Toolbar系列文章导航
Android中导航栏之Toolbar的使用
Android中导航栏之溢出菜单OverflowMenu
Android中导航栏之搜索框SearchView
Android中导航栏之自定义导航布局
Android中导航栏之标签导航暨TabLayout用法
既然我们的导航栏Toolbar是可以自定义的,那么我们是不是可以把导航栏打造成一个标签栏,实现一个标签页的效果。
1.标签依赖
我们添加标签页,首先需要一个制作标签的三方库。依赖如下。
implementation 'com.android.support:design:28.0.0'
有人说这不就是我们的design库么,对,所以有了就不用重复引入了。这里其实就是要用到design库的TabLayout标签布局。
2.TabLayout主要的几个属性
- tabBackground:指定标签的背景。
- tabIndicatorColor:指定下划线的颜色。
- tabIIndicatorHeight:指定下划线的高度。
- tabTextColor:指定标签文字的颜色。
- tabTextAppearance:指定标签文字的风格。
- tabSelectedTextColor:指定选中文字的颜色。
3.TabLayout主要的几个java方法
- newTab:创建新标签。
- addTab:添加一个标签。
- getTabAt:获取指定位置的标签。
- setOnTabSelectedListener:设置标签的选中监听器。该监听器需实现OnTabSelectedListener接口的3个方法。
- onTabSelected:标签被选中时触发。
- onTabUnselected:标签被取消选中时触发。
- onTabReselected:标签被重新选中时触发。
4.代码示例
activity_tab_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tl_head"
android:layout_width="match_parent"
android:layout_height="50dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 注意TabLayout节点需要使用完整路径 -->
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
app:tabIndicatorColor="#FF0000"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#FF0000"
app:tabTextColor="#666666" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
private TabLayout tab_title; // 定义一个标签布局对象
private ArrayList<String> mTitleArray = new ArrayList<String>(); // 标题文字队列
private ViewPager viewpager;
private List<Fragment> fragmentList;
private FragmentPagerAdapter viewPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
// 从布局文件中获取名叫tl_head的工具栏
Toolbar tl_head = findViewById(R.id.tl_head);
viewpager = findViewById(R.id.viewpager);
// 使用tl_head替换系统自带的ActionBar
setSupportActionBar(tl_head);
mTitleArray.add("商品");
mTitleArray.add("详情");
initTabLayout(); // 初始化标签布局
initTabViewPager(); // 初始化标签翻页
}
// 初始化标签布局
private void initTabLayout() {
// 从布局文件中获取名叫tab_title的标签布局
tab_title = findViewById(R.id.tab_title);
// 给tab_title添加一个指定文字的标签
tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(0)));
// 给tab_title添加一个指定文字的标签
tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(1)));
// 给tab_title添加标签选中监听器
tab_title.addOnTabSelectedListener(this);
tab_title.setupWithViewPager(viewpager);
}
// 初始化标签翻页
private void initTabViewPager() {
fragmentList = new ArrayList<>();
fragmentList.add(new OneFragment());
fragmentList.add(new MineFragment());
viewPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitleArray.get(position);
}
};
viewpager.setAdapter(viewPagerAdapter);
}
// 在标签被重复选中时触发
public void onTabReselected(TabLayout.Tab tab) {
}
// 在标签选中时触发
public void onTabSelected(TabLayout.Tab tab) {
}
// 在标签取消选中时触发
public void onTabUnselected(TabLayout.Tab tab) {
}
}
这里注意一下,我们使用的环境是androidx的环境,所以这里design的依赖是
implementation 'com.google.android.material:material:1.0.0-rc01'
同时我们要先去掉默认的actionbar才可以使用toolbar
Fragment的代码这里就省略了,和普通的用法没有什么区别。
FragmentPagerAdapter中重写的getPageTitle方法一定要注意一下。