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萬能的指示器，大家可以借鑒借鑒。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
