Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的AndroID Design Support library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件。最重要的是,AndroID Design Support library的兼容性更广,直接可以向下兼容到AndroID 2.2。
这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写VIEwpager+fragment,或者Indicator的深度定制,一直想尝试一下TabLayout,于是就有了下面的坑。
然后下面是我简单的实现效果(个人觉得很坑,还不如自己自定义的导航器)
添加引用库
dependencIEs { compile filetree(dir: 'libs',include: ['*.jar']) compile 'com.androID.support:appcompat-v7:24.2.0' compile 'com.androID.support:design:24.2.0' compile 'com.androID.support:recyclervIEw-v7:24.2.0' compile 'com.androID.support:cardvIEw-v7:24.2.0'}
Toolbar与TabLayout
我们来看一下实现的布局:
<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="http://schemas.androID.com/apk/res-auto" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical"> <androID.support.v7.Widget.Toolbar androID:ID="@+ID/toolbar" androID:layout_wIDth="match_parent" androID:layout_height="48dp" androID:gravity="center_vertical" app:navigationIcon="@drawable/back_icon" > <linearLayout androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:gravity="center" androID:orIEntation="horizontal"> <androID.support.design.Widget.TabLayout androID:ID="@+ID/tabLayout" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" /> </linearLayout> <TextVIEw androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:layout_gravity="right" androID:background="@drawable/more_icon" /> </androID.support.v7.Widget.Toolbar> <VIEw /> <androID.support.v4.vIEw.VIEwPager androID:ID="@+ID/vIEwPager" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" /></linearLayout>
这布局文件最关键的一点就是androID.support.design.Widget.TabLayout 标签中的app:tabMode=”scrollable”,他设置tab的模式为“可滑动的”。
其他的用法和Indicator的用法差不多,都需要设置适配器,然后通过数据实现页面的适配。直接上代码
Adapter
public class ProductDetailPagerAdapter extends FragmentPagerAdapter { private List<String> mTitles; public ProductDetailPagerAdapter(FragmentManager fm,List<String> mTitles) { super(fm); this.mTitles = mTitles; } @OverrIDe public Fragment getItem(int position) { if (position == 0) { return new ProductFragment(); } else if (position == 1) { return new ProductDetailFragment(); } return new ProductFragment(); } @OverrIDe public int getCount() { return mTitles.size(); } @OverrIDe public CharSequence getPageTitle(int position) { return mTitles.get(position); }}
主页面的相关逻辑,这里的Fragment就是简单的Fragment。
public class ProductDetailsActivity extends BaseActivity { @BindVIEw(R.ID.vIEwPager) VIEwPager vIEwPager; @BindVIEw(R.ID.tabLayout) TabLayout tabLayout; @BindVIEw(R.ID.toolbar) Toolbar toolbar; private TextVIEw tabProduct; private TextVIEw tabDetail; private List<String> mTitles = null; private ProductDetailPagerAdapter productPagerAdapter = null; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_product_details); ButterKnife.bind(this); init(); } private voID init() { initToolbar(); initVIEwPager(); } private voID initToolbar() { setTitle(""); toolbar.setNavigationOnClickListener(new VIEw.OnClickListener() { @OverrIDe public voID onClick(VIEw vIEw) { finish(); } }); initTab(); initTabChange(); } private voID initTabChange() { tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @OverrIDe public voID onTabSelected(TabLayout.Tab tab) { vIEwPager.setCurrentItem(tab.getposition()); switch (tab.getposition()){ case 0: tabProduct.setTextcolor(getResources().getcolor(R.color.c8)); tabProduct.setTextSize(18); break; case 1: tabDetail.setTextcolor(getResources().getcolor(R.color.c8)); tabDetail.setTextSize(18); break; } } @OverrIDe public voID onTabUnselected(TabLayout.Tab tab) { tabProduct.setTextcolor(getResources().getcolor(R.color.c7)); tabDetail.setTextcolor(getResources().getcolor(R.color.c7)); } @OverrIDe public voID onTabReselected(TabLayout.Tab tab) { } }); } private voID initTab() { tabLayout.setSelectedTabIndicatorcolor(getResources().getcolor(R.color.c8)); tabLayout.setSelectedTabIndicatorHeight(UIUtils.dp2px(this,2)); tabLayout.setTabTextcolors(R.color.c7,R.color.c8); tabLayout.addTab(tabLayout.newTab().setCustomVIEw(R.layout.item_detail_tab_product_layout)); tabProduct= (TextVIEw) findVIEwByID(R.ID.tab_product); tabProduct.setTextcolor(getResources().getcolor(R.color.c8)); tabLayout.addTab(tabLayout.newTab().setCustomVIEw(R.layout.item_detail_tab_detail_layout)); tabDetail= (TextVIEw) findVIEwByID(R.ID.tab_detail); tabProduct.setTextcolor(getResources().getcolor(R.color.c7)); } private voID initVIEwPager() { mTitles = new ArrayList<>(); mTitles.add("商品"); mTitles.add("详情"); productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(),mTitles); vIEwPager.setAdapter(productPagerAdapter); vIEwPager.addOnPagechangelistener(new VIEwPager.SimpleOnPagechangelistener() { @OverrIDe public voID onPageSelected(int position) { tabLayout.getTabAt(position).select(); } }); } public static voID open(Context context) { Intent intent = new Intent(context,ProductDetailsActivity.class); context.startActivity(intent); }}
我相信很多人看了上面的代码会觉得很麻烦,其实我也觉得,这种虽然可定制高,但是相对于以前的写法,代码丝毫没有减少,我还是建议使用自定义控件,之前有一篇AndroID万能的指示器,大家可以借鉴借鉴。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的android TabLayout使用方法详解全部内容,希望文章能够帮你解决android TabLayout使用方法详解所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)