添加后就可以使用design包里面的UI控件了,上XML代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/white"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
app:tabSelectedTextColor="@color/colorAccent"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabTextColor="@android:color/white"
app:tabGravity="fill"
android:background="@color/colorPrimary"
android:id="@+id/tb_home"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_home"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.v4.view.ViewPager>
</LinearLayout>
TabLayout属性:
app:tabSelectedTextColor="" 改变选中字体的颜色
app:tabIndicatorColor="" 改变指示器下标的颜色
app:tabTextColor="" 改变未选中字体的颜色
app:tabMode =""
布局中Tab的行为模式(behavior mode),有两种值:MODE_FIXED 和 MODE_SCROLLABLE。
MODE_FIXED:固定tabs,并同时显示所有的tabs。
MODE_SCROLLABLE:可滚动tabs,显示一部分tabs,在这个模式下能包含长标签和大量的tabs,最好用于用户不需要直接比较tabs。
app:tabGravity = ""
放置Tab的Gravity,有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义,一个是居中,另一个是尽可能的填充(注意,GRAVITY_FILL需要和MODE_FIXED一起使用才有效果)
下面讲讲MainActivity的实现逻辑,我设置了4个滑动界面,所以就需要创建4个Fragment和4个Title。然后把它们存放在List里面,当然也是可以有数组来存放的,不过为了更好的拓展还是建议用List。
然后findviwebyId找到控件,做一下ViewPager的预加载。原理是先获取到Fragment的总数创建出响应数目的空间,当滑动进去界面的时候再把数据放进去显示。
因为ViewPager 继承的是ViewGroup,所以设置一个适配器,创建一个匿名的FragmentPagerAdapter,调用回调方法。把TableLayout绑定ViewPager就完成。代码如下:
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private List<Fragment> fragments;
private List<String> titles;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
//去掉阴影
getSupportActionBar().setElevation(0);
initView();
initData();
}
//初始化View
private void initView() {
titles = new ArrayList<>();
titles.add(getBaseContext().getString(R.string.titles_item1));
titles.add(getBaseContext().getString(R.string.titles_item2));
titles.add(getBaseContext().getString(R.string.titles_item3));
titles.add(getBaseContext().getString(R.string.titles_item4));
fragments = new ArrayList<>();
fragments.add(new Item1Fragment());
fragments.add(new Item2Fragment());
fragments.add(new Item3Fragment());
fragments.add(new Item4Fragment());
}
//初始化数据
private void initData() {
tabLayout = findViewById(R.id.tb_home);
viewPager = findViewById(R.id.vp_home);
//预加载
viewPager.setOffscreenPageLimit(fragments.size());
//设置适配器
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
//选中的ITem
@Override
public Fragment getItem(int i) {
return fragments.get(i);
}
//返回Item个数
@Override
public int getCount() {
return fragments.size();
}
//设置标题
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
});
tabLayout.setupWithViewPager(viewPager);
}
}
然后是Fragment的类与XML
public class Item1Fragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_item1,null);
return view;
}
}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="30sp"
android:text="@string/titles_item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
这样一个简单的标题栏索引就完成了,当然我们也可以做成底部的导航栏,有兴趣的可以去了解下。
更改选中时的背景
第一步
在drawable文件夹下建立文件 tab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
第二步
在drawable文件夹下建立选中效果的文件 tab_background_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d13fdd1a" />
</shape>
第三步
在drawable文件夹下建立未选中效果的文件 tab_background_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
最后
建立一个style
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">@drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>