欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

android TabLayout使用方法详解

时间:2020-10-18 11:10:28|栏目:Android代码|点击:

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"
        style="@style/style_c7_s20"
        />

    </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 style="@style/horizontal_line" />

  <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 Button 自带阴影效果另一种解决办法

栏    目:Android代码

下一篇:android如何获取联系人所有信息

本文标题:android TabLayout使用方法详解

本文地址:http://www.codeinn.net/misctech/13066.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有