Go语言视频零基础入门到精通

admin

1. Tablayout是安卓新特性中的组件，之前很多地方都会用到这样的组件，只是我们一般都是通过tabactivity加fragment或者其他第三方框架来实现，谷歌推出tablayout以后，使这个组件简化了许多，只需要一个tablayout加一个viewpager就可以实现想要的效果。今天就讲一下tablayout如何配合viewpager一起使用。
2. 我们要想使用安卓的新组建，如果你使用的是android studio进行开发的只要在build.gradle中加入compile "com.android.support:design:22.2.0"即可。(此处注意如果你同时导入[b]com.android.support:*****-v7:21+就会有冲突，无法使用tablayout，笔者就在使用的过程中遇到，添加了依赖包以后一直提示找不到tablayout[/b])。如果是eclipse的话导入对应的库就可以。这个就不多废话了，开始原文吧。
3. 开始之前我们先来看一下google官方文档的原文，如何与ViewPager进行联动：
4.   [quote]
5.    You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed.
6. If you’re using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter’s page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout
7.   [/quote]意思就是
8.   
9.              通过setOnTabSelectedListener设置一个监听器来响应选项卡的选择状态
10.    
12.              可以通过setTabsFromPagerAdapter来使用PagerAdapter的page title
13.    
15.              使用TabLayout.TabLayoutOnPageChangeListener来联动滑动。
16.    
18.   
19.   
20.    
22.   
23.   
24.    以下为整个源代码以及讲解。
25.   
26.   
27.        我们先来写布局界面
28.   
29.   
30.       
31.    
32.   [code]<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"            xmlns:app="http://schemas.android.com/apk/res-auto"
33.             android:layout_width="match_parent"
34.             android:layout_height="match_parent"
35.             android:orientation="vertical">
36.             <android.support.design.widget.TabLayout
37.                     android:id="@+id/tablayout"
38.                     android:layout_width="match_parent"
39.                     android:layout_height="wrap_content"
40.                     android:background="@color/titleBlue"
41.                     app:tabIndicatorColor="@color/white"
42.                     app:tabSelectedTextColor="@color/gray"
43.                     app:tabTextColor="@color/white"
44.                     />
45.             <android.support.v4.view.ViewPager
46.                     android:id="@+id/vviewpager"
47.                     android:layout_width="fill_parent"
48.                     android:layout_height="0dp"
49.                     android:layout_weight="1"
50.                     />
51.     </LinearLayout>

复制代码

  
   
  
  
   布局界面很简单，一个容器中放一个tablayout，放一个viewpager，tablayout有很多属性，这里就不一一介绍了。下面列出他的是哪个很重要的属性。
  
  
   
  

1. app:tabIndicatorColor="@color/white"                 // （指示器下表的颜色）下方滚动的下划线颜色  app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色  app:tabTextColor="@color/white"                      // tab默认的文字颜色（即未被选中的颜色）//如果用到app:的属性，需要在跟布局中加入xmlns:app="http://schemas.android.com/apk/res-auto"

复制代码

  [/code]

1. [/code]
3. [code]

复制代码

1. [/code]
3. [code]

复制代码

下面是类的代码。

1. /**
2. * Created by rain on 2015-12-09.
3. */
4. public class HomeFragment extends Fragment {
5.     private TabLayout tabLayout;
6.     @Override
7.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
8.         View view = inflater.inflate(R.layout.fragment_home, container, false);
9.         ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
10.         if (viewPager != null) {
11.             setupViewPager(viewPager);
12.         }
13.         setupTabLayout();
14.         return super.onCreateView(inflater, container, savedInstanceState);
15.     }
16.     //设置tablayout，
17.     private void setupTabLayout() {
18.         tabLayout = (TabLayout) view.findViewById(R.id.tabs);
19.         tabLayout.setupWithViewPager(viewPager);
20.         //一下几个重要属性都可以自己选择性进行设置。
21.         //tabLayout.setSelectedTabIndicatorColor();
22.         //tabLayout.setSelectedTabIndicatorHeight();
23.         //tabLayout.setOnTabSelectedListener();
24.         //tabLayout.setTabGravity();
25.         //tabLayout.setTabTextColors(int normalColor,int selectColor);
26.         //将tablayout与viewpager进行绑定，下面会有讲解。
27.         tabLayout.setupWithViewPager(viewPager);
28.     }
29.     //设置viewpager
30.     private void setupViewPager(ViewPager viewPager) {
31.         Adapter adapter = new Adapter(getActivity().getSupportFragmentManager());
32.         adapter.addFragment(new CheeseListFragment(), "Category 1");
33.         adapter.addFragment(new CheeseListFragment(), "Category 2");
34.         adapter.addFragment(new CheeseListFragment(), "Category 3");
35.         viewPager.setAdapter(adapter);
36.     }
37.     //设置viewpager的adapter
38.     static class Adapter extends FragmentPagerAdapter {
39.         private final List<Fragment> mFragments = new ArrayList<>();
40.         private final List<String> mFragmentTitles = new ArrayList<>();
41.         public Adapter(FragmentManager fm) {
42.             super(fm);
43.         }
44.         public void addFragment(Fragment fragment, String title) {
45.             mFragments.add(fragment);
46.             mFragmentTitles.add(title);
47.         }
48.         @Override
49.         public Fragment getItem(int position) {
50.             return mFragments.get(position);
51.         }
52.         @Override
53.         public int getCount() {
54.             return mFragments.size();
55.         }
56.         @Override
57.         public CharSequence getPageTitle(int position) {
58.             return mFragmentTitles.get(position);
59.         }
60.     }
61. }

复制代码

  
  

1. 相信这个代码很好理解，我这里是用fragment做的框架，大家改成activity也是一样的。我们先在布局文件里定义好tablayout和viewpager，在代码中实例化，先设置viewpaer的adapter，然后设置tablayout的属性。最后将tablayout与viewpager进行绑定就完成了。

复制代码

  

1. 我看到有人在使用tablayout的时候还在mTabLayout.setOnTabSelectedListener来设置viewpager，我想说这样就没有必要用tablayout。他已经在setupWithViewPager里面讲这些代码封装好了。大家只要使用就可以了；以下setupWithViewPager的源码，相信大家看了就会明白。

复制代码

1. public void setupWithViewPager(@NonNull ViewPager viewPager) {
2.     final PagerAdapter adapter = viewPager.getAdapter();
3.     if (adapter == null) {
4.         throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
5.     }
7.     // First we"ll add Tabs, using the adapter"s page titles
8.     setTabsFromPagerAdapter(adapter);
10.     // Now we"ll add our page change listener to the ViewPager
11.     viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(this));
13.     // Now we"ll add a tab selected listener to set ViewPager"s current item
14.     setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));
16.     // Make sure we reflect the currently set ViewPager item
17.     if (adapter.getCount() > 0) {
18.         final int curItem = viewPager.getCurrentItem();
19.         if (getSelectedTabPosition() != curItem) {
20.             selectTab(getTabAt(curItem));
21.         }
22.     }
23. }

复制代码

如果想要了解更多属性可以去看一下谷歌的官方文档
http://developer.android.com/intl/zh-cn/reference/android/support/design/widget/TabLayout.html[code][/code]