2-VVI-材料设计之TabLayout下标签
[1].将下面线去掉，自定义条目样式，就可以实现下图效果
[2].以前实现这种效果一般用按钮组，有点麻烦
[3].Fragment同上篇
效果图
二、代码实现：
1.Activity的布局：a01_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tl_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_72"
android:background="@color/white">
</android.support.design.widget.TabLayout>
</LinearLayout>
2.条目的布局：item_01_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/selector_menu_home"/>
<TextView
android:id="@+id/tv_menu_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item"
android:textColor="@color/selector_blue"/>
</LinearLayout>
3.Activity
public class V01_BottomActivity extends AppCompatActivity {
private TabLayout mTabTl;
private ViewPager mContentVp;
private List<String> tabIndicators;
private List<Fragment> tabFragments;
private FragmentPagerAdapter contentAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.a01_bottom);
mTabTl = findViewById(R.id.tl_tab);
mContentVp = findViewById(R.id.vp_content);
initContent();
initTab();
}
private void initTab() {
mTabTl.setTabMode(TabLayout.MODE_FIXED);
//去除下面线
mTabTl.setSelectedTabIndicatorHeight(0);
ViewCompat.setElevation(mTabTl, 10);
mTabTl.setupWithViewPager(mContentVp);
for (int i = 0; i < tabIndicators.size(); i++) {
//获取Tab对应条目
TabLayout.Tab itemTab = mTabTl.getTabAt(i);
if (itemTab != null) {
//自定义布局加到对应条目上
itemTab.setCustomView(R.layout.item_tab_layout_custom);
TextView itemTv = itemTab.getCustomView().findViewById(R.id.tv_menu_item);
itemTv.setText(tabIndicators.get(i));
}
}
}
private void initContent() {
tabIndicators = DataUtils.getRandomName(5, true);
tabFragments = new ArrayList<>();
for (String s : tabIndicators) {
tabFragments.add(V01_ContentV4Fragment.newInstance(s));
}
//创建适配器对象
contentAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return tabFragments.get(position);
}
@Override
public int getCount() {
return tabIndicators.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tabIndicators.get(position);
}
};
mContentVp.setAdapter(contentAdapter);
}
}
后记、
1.声明：
[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
[4]你的喜欢与支持将是我最大的动力
2.连接传送门：
更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
简书首发，腾讯云+社区同步更新
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com
3.联系我
QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328
4.欢迎关注我的微信公众号，最新精彩文章，及时送达：
公众号.jpg
