Android Material Design控件之TabLayout

本文介绍了如何在Android中使用Material Design的TabLayout来创建标签栏,详细讲解了导入design库、XML布局配置、TabItem的使用以及通过OnTabSelectedListener监听Tab切换和重新点击选中事件。同时,还讨论了在MaterialDesignWidget.TabLayoutActivity中如何设置nestedScrollView的topMargin以实现协调布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android Material Design Android官方控件学习

TabLayout

  • 标签栏
  • extends HorizontalScrollView 水平滚动布局
  • 需要结合TabItem一起使用
  • 不再需要使用第三方库如PagerSlidingTabStrip,或者TabHost,
  • TabLayout简单地实现标签栏

导入design库

'com.android.support:design:26.1.0'

xml

TabLayout

  • 这里直接写入三个TabItem
  • app:tabIndicatorColor:指示器颜色
  • app:tabIndicatorHeight:指示器高度
  • app:tabSelectedTextColor: 选中TabItem字体颜色
  • app:tabTextColor:未选中TabItem字体颜色
    TabItem
  • android:icon="@drawable/ic_action_tab"//设置图片
  • android:text=“第一项”//设置文字
<android.support.design.widget.TabLayout
			android:id="@+id/tabLayout"
			android:background="#3558B3"
			app:tabIndicatorColor="#cdcdcd"
			app:tabIndicatorHeight="4dp"
			app:tabSelectedTextColor="#fff"
			app:tabTextColor="#cdcdcd"
			app:tabTextAppearance="@style/TextAppearance.AppCompat.Small"
			android:layout_width="match_parent"
			android:layout_height="wrap_content">

			<android.support.design.widget.TabItem
				android:icon="@drawable/ic_action_tab"
				android:text="第一项"
				android:tag="tag第三项"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"/>

			<android.support.design.widget.TabItem
				android:icon="@drawable/ic_action_tab"
				android:text="第二项"
				android:tag="tag第三项"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"/>
			<android.support.design.widget.TabItem
				android:icon="@drawable/ic_action_tab"
				android:tag="tag第三项"
				android:text="第三项"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"/>
		</android.support.design.widget.TabLayout>

	</LinearLayout>

OnTabSelectedListener TabLayout监听事件

切换Tab
  • 先调用onTabUnselected(TabLayout.Tab tab):切换前选中tab
  • 再调用onTabSelected(TabLayout.Tab tab):切换后选中tab
重新点击选中Tab
  • onTabReselected(TabLayout.Tab tab):选中Tab
        TabLayout mTabLayout =   findViewById(R.id.tabLayout);
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getText();
                tab.getPosition();
                tab.getTag();
                Toast.makeText(TabLayoutActivity.this,"onTabSelected"+tab.getText()+tab.getPosition()+tab.getTag(), Toast.LENGTH_SHORT).show();
                Log.e("onTabSelected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

                Log.e("onTabUnselected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.e("onTabReselected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }
        });

MaterialDesignWidget.TabLayoutActivity 设置nestedScrollView的topMargin,

  • 实现Toolbar、TabLayout、NestedScrollView在CoordinatorLayout中的合理布局
        //测量ll_appbar,设置nestedScrollView的topMargin
        LinearLayout mLLAppbar =   findViewById(R.id.ll_appbar);
        int width2 = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        int height2 = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        mLLAppbar.measure(width2,height2);
        int  height=mLLAppbar.getMeasuredHeight();
        NestedScrollView mNestedScrollView =   findViewById(R.id.nestedScrollView);
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mNestedScrollView.getLayoutParams();
        layoutParams.topMargin=height;
        mNestedScrollView.setLayoutParams(layoutParams);
 

github 源码地址:https://github.com/LinweiJ/MaterialDesignWidget

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值