2-VVI-材料设计之TabLayout下标签

mac2022-06-30  154

[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

转载于:https://www.cnblogs.com/toly-top/p/9781916.html

最新回复(0)