TabLayout 的几种用法
原创TabLayout 的几种用法
原创
Jingbin
发布于 2019-03-19 20:19:55
发布于 2019-03-19 20:19:55
1.结合ViewPager使用
这是最常见的用法了，实现也比较简单。
tablayout01.gif
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tab\_book"
android:layout\_width="match\_parent"
android:layout\_height="38dp"
app:tabBackground="@drawable/ripple\_tab\_bg"
app:tabIndicatorColor="@color/colorTheme"
app:tabSelectedTextColor="@color/colorTheme"
app:tabTextColor="@color/colorTabText" />
<android.support.v4.view.ViewPage
android:id="@+id/vp\_book"
android:layout\_width="match\_parent"
android:layout\_height="match\_parent">
</android.support.v4.view.ViewPager>对应的Activity页面：
public class WanFragment extends BaseFragment<NoViewModel,FragmentBookBinding> {
private ArrayList<String> mTitleList = new ArrayList<>(3);
private ArrayList<Fragment> mFragments = new ArrayList<>(3);
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
showLoading();
initFragmentList();
MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), mFragments, mTitleList);
bindingView.vpBook.setAdapter(myAdapter);
// 左右预加载页面的个数
bindingView.vpBook.setOffscreenPageLimit(2);
myAdapter.notifyDataSetChanged();
bindingView.tabBook.setTabMode(TabLayout.MODE\_FIXED);
bindingView.tabBook.setupWithViewPager(bindingView.vpBook);
showContentView();
}
@Override
public int setContent() {
return R.layout.fragment\_book;
}
private void initFragmentList() {
mTitleList.clear();
mTitleList.add("玩安卓");
mTitleList.add("知识体系");
mTitleList.add("导航数据");
mFragments.add(BannerFragment.newInstance());
mFragments.add(TreeFragment.newInstance());
mFragments.add(NaviFragment.newInstance());
}
}设置后就可以达到切换滑动的效果。
2.点击滑动选中，类似RadioGroup的效果
tablayout02.gif
不过它与RadioGroup不同在于它有下划线可以滑动，更动感...，如果产品经理要求这样实现，就可以派上用场了。
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tl\_search"
android:layout\_width="match\_parent"
android:layout\_height="30dp"
android:background="@color/colorTheme"
app:tabGravity="center"
app:tabIndicatorColor="@color/colorWhite"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorWhite"
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
app:tabTextColor="@color/colorWhiteHalf">
<android.support.design.widget.TabItem
android:layout\_width="wrap\_content"
android:layout\_height="wrap\_content"
android:text="玩安卓"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout\_width="wrap\_content"
android:layout\_height="wrap\_content"
android:text="干货 | 安卓"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout\_width="wrap\_content"
android:layout\_height="wrap\_content"
android:text="干货 | 全部"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout\_width="wrap\_content"
android:layout\_height="wrap\_content"
android:text="网页"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
</android.support.design.widget.TabLayout>当然也可以在Activit动态添加，其中的一些颜色设置等就不细说了~：
for (String bean : list) {
MyTabLayout.Tab tab = binding.tlSearch.newTab();
tab.setText(bean.getName());
binding.tlSearch.addTab(tab);
}然后再监听点击的时候做处理：
binding.tlSearch.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 选中 逻辑操作 (再次点击不会触发)
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});3.点击滑动到屏幕中央，并再次点击可取消
tablayout03.gif
这样的效果很实用，很多App都会有这样的效果，以前我都是用HorizontalScrollView来实现的，设置点击的item滑动到屏幕中央。
后来想想TabLayout继承自HorizontalScrollView，选中也会自动滚动并居中，于是就选用了它来实现，相对于直接使用HorizontalScrollView代码量更少。
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tl\_tag"
android:layout\_width="match\_parent"
android:layout\_height="40dp"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/color\_theme" />Activity里控制：
// 添加自定义Tab
for (int i = 0; i < result.size(); i++) {
TabLayout.Tab tab = bindingView.tlTag.newTab();
bindingView.tlTag.addTab(tab.setCustomView(getTabView(result.get(i).getName())));
}
// 默认 手动设置 position=0的Tab不选中
if (bindingView.tlTag.getTabAt(0) != null
&& bindingView.tlTag.getTabAt(0).getCustomView() != null) {
bindingView.tlTag.getTabAt(0).getCustomView().setSelected(false);
}
// 添加监听
addTagListener(); // 哪个tag被选择过
private int tagSelectPosition = 0;
// 是否被选中
private boolean tagSelect = false;
// 主要处理取消选中的状态
private void addTagListener() {
bindingView.tlTag.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// // 切换到此tab，则设置已选中position和选中的状态
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// // Tab再次被点击会走这里
// 之前手动 [取消] 的tab角标 初始值为0
if (tagSelectPosition == tab.getPosition()) {
if (tagSelect) {
// tab之前被选中，则手动取消
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = false;
bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView().setSelected(false);
// do something..
}
} else {
// tab之前被取消，则手动将其选中
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
}
} else {
// 一般不会触发，以防万一
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
}
}
});
}相关代码
第一部分：WanFragment.java
第二部分：SearchActivity.java
完整Demo项目：https://github.com/youlookwhat/CloudReade
第三部分因为是公司项目，暂时只有上面的代码片段，已包含所有的相关代码，如果有问题请留言，我会重新整理在Demo里。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录