Android 使用TabLayout制作下划线能滑动的Tab标签页-design
2016-08-22 22:47
405 查看
google提供的Design开发包里,有很多实用好看的新控件,这里介绍下使用TabLayout+ViewPager实现下划线能滑动的Tab标签页
效果图
不使用google的design包,我们也可以自己制作这样的效果,详看我的这篇博客:http://blog.csdn.net/zhuwentao2150/article/details/51407661
要使用Design包,在项目的build.gradle中添加下依赖就好(记得更新SDK到最新版本)
先来看布局
常用属性
tabSelectedTextColor:当Tab标签被选中时的文字颜色
tabTextColor:Tab标签中文字的默认颜色
tabIndicatorColor:下划线颜色
tabIndicatorHeight:下划线的高度
tabBackground:设置Tab标签的背景
tabMode:Tab标签的行为模式
MODE_FIXED: Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE: Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels. This mode is commonly used with a ViewPager.
两种模式的差异:
tabMode=”scrollable”
滚动模式,TabLayout可以滚动
标签多时,TabLayout支持滑动查看
标签少时,,这些Tab会挤在一侧,且各个Tab不是等量分布的,有的占地多有的占地少
tabMode=”fixed”
填充模式,TabLayout不可滚动,所有的Tab都被限制在一定区域内
标签多时,Tab会受到挤压
Tab少时,各个Tab等量空间分布
Fragment页面
Activity界面
调用setupWithViewPager()方法传入一个ViewPager对象,请确保该ViewPager对象已经通过setAdapter设置好了Adapter适配器
从源码可以看出
如果ViewPager的Adapter为空,则会抛出IllegalArgumentException异常
把 TabLayout和 ViewPager 关联起来,该方法相当于帮我们封装好了 addOnPageChangeListener 和setOnTabSelectedListener ,帮我们节省了大量的代码。
效果图
不使用google的design包,我们也可以自己制作这样的效果,详看我的这篇博客:http://blog.csdn.net/zhuwentao2150/article/details/51407661
要使用Design包,在项目的build.gradle中添加下依赖就好(记得更新SDK到最新版本)
dependencies { compile 'com.android.support:design:23.4.0' }
先来看布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabSelectedTextColor="#ffffff" app:tabIndicatorColor="#ff00ff" app:tabTextColor="#000000" app:tabIndicatorHeight="5dp" app:tabMode="fixed"/> <android.support.v4.view.ViewPager android:id="@+id/vp_tab_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
常用属性
tabSelectedTextColor:当Tab标签被选中时的文字颜色
tabTextColor:Tab标签中文字的默认颜色
tabIndicatorColor:下划线颜色
tabIndicatorHeight:下划线的高度
tabBackground:设置Tab标签的背景
tabMode:Tab标签的行为模式
MODE_FIXED: Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE: Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels. This mode is commonly used with a ViewPager.
两种模式的差异:
tabMode=”scrollable”
滚动模式,TabLayout可以滚动
标签多时,TabLayout支持滑动查看
标签少时,,这些Tab会挤在一侧,且各个Tab不是等量分布的,有的占地多有的占地少
tabMode=”fixed”
填充模式,TabLayout不可滚动,所有的Tab都被限制在一定区域内
标签多时,Tab会受到挤压
Tab少时,各个Tab等量空间分布
Fragment页面
/** * ViewPager页面 * Created by zhuwentao on 2016-08-22. */ public class ViewPagerFragment extends Fragment{ private String mPageNo; private TextView mPageNoTv; /** 状态类型常量 */ public static final String STATUS_TYPE = "pagerType"; public static final String STATUS_ONE = "One"; public static final String STATUS_TWO = "Two"; public static final String STATUS_THREE = "Three"; /** * 取得Fragment实例 */ public static ViewPagerFragment newInstance(Bundle args) { ViewPagerFragment fragment = new ViewPagerFragment(); fragment.setArguments(args); return fragment; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPageNo = getArguments().getString(STATUS_TYPE); } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_tab, container, false); mPageNoTv = (TextView) v.findViewById(R.id.tv_page_text); mPageNoTv.setText(mPageNo); return v; } }
Activity界面
public class TabLayoutActivity extends AppCompatActivity { private ViewPager mPageVp; private TabLayout mLayoutTab; /** * 选项卡总数 */ private static final int TAB_COUNT = 3; private static final int TAB_0 = 0; private static final int TAB_1 = 1; private static final int TAB_2 = 2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); initUI(); } /** * 初始化UI */ private void initUI() { mPageVp = (ViewPager) findViewById(R.id.vp_tab_pager); mLayoutTab = (TabLayout) findViewById(R.id.tab_layout); mPageVp.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); // 把TabLayout和ViewPager关联起来 mLayoutTab.setupWithViewPager(mPageVp); } /** * ViewPager适配器 */ public class MyPagerAdapter extends FragmentPagerAdapter { // 定义Tab标题 private String[] tabTitles = new String[]{ "One","Two","Three" }; public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Bundle args = new Bundle(); boolean flag = true; switch (position) { case TAB_0: args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_ONE); break; case TAB_1: args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_TWO); break; case TAB_2: args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_THREE); break; default: flag = false; break; } if (flag) { // 返回对应的Fragment页面 return ViewPagerFragment.newInstance(args); } return null; } @Override public int getCount() { return TAB_COUNT; } @Override public CharSequence getPageTitle(int position) { // 设置Page对应的Tab标题 return tabTitles[position]; } } }
调用setupWithViewPager()方法传入一个ViewPager对象,请确保该ViewPager对象已经通过setAdapter设置好了Adapter适配器
从源码可以看出
public void setupWithViewPager(@Nullable final ViewPager viewPager) { if (mViewPager != null && mPageChangeListener != null) { // If we've already been setup with a ViewPager, remove us from it mViewPager .removeOnPageChangeListener( mPageChangeListener); } if (viewPager != null ) { final PagerAdapter adapter = viewPager.getAdapter(); if (adapter == null) { throw new IllegalArgumentException( "ViewPager does not have a PagerAdapter set"); } // ......
如果ViewPager的Adapter为空,则会抛出IllegalArgumentException异常
把 TabLayout和 ViewPager 关联起来,该方法相当于帮我们封装好了 addOnPageChangeListener 和setOnTabSelectedListener ,帮我们节省了大量的代码。
相关文章推荐
- Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用
- Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- Eclipse下使用Android Design Support Library中的控件(比如TabLayout)
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- Android开发学习之使用ViewPager+PagerTabStrip制作可滑动的Tab
- Android--使用反射修改TabLayout下划线宽度
- Android Material Design(4) CoordinatorLayout,AppBarLayout,Toolbar以及TabLayout的使用
- android.support.design.widget.TabLayout 使用
- android.support.design.widget.TabLayout的使用
- android.support.design.widget.TabLayout的使用
- android.support.design.widget.TabLayout的使用
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- android.support.design.widget.TabLayout的使用
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- Android开发学习之使用ViewPager+PagerTabStrip制作可滑动的Tab
- 【Android界面实现】使用ActionBar和DrawerLayout纯原生控件,实现侧滑栏和滑动Tab界面
- AndroidSupportDesign之TabLayout使用详解
- AndroidSupportDesign之TabLayout使用详解
- Android进阶系列--Design Support Library使用详解(Snackbar,TextInputLayout,TabLayout,NavigationView...)