TableLayout与TabeLayout+ViewPager的使用

TableLayout与TabeLayout+ViewPager的使用

1、TableLayout的简介：
TableLayout是Design包下的一个控件，支持水平布局，可以和viewpager配合使用，
也可以单独使用。

2、使用步骤：
  1）、引入design包： compile 'com.android.support:design:26.0.0-alpha1'
  2）、在布局文件中加入TableLayout布局：
     <android.support.design.widget.TabLayout
       android:id="@+id/tb"
       android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
  3）、使用：
       private android.support.design.widget.TabLayout mTableLayout;
       mTableLayout= (TabLayout) getViewById(R.id.tb);

       设置标题：
       mTableLayout.newTab().setText(mTitles[i]).setText("相册"))
       mTableLayout.newTab().setText(mTitles[i]).setText("标题"))
       mTableLayout.newTab().setText(mTitles[i]).setText("我的"))

         设置监听：
              mTableLayout.addOnTabSelectedListener(new TabLayout.
              OnTabSelectedListener() {
                     @Override
                      public void onTabSelected(TabLayout.Tab tab) {
                        //当被选中时被调用，tab是被选中的位置
                      }

                       @Override
                      public void onTabUnselected(TabLayout.Tab tab) {
                        //当没被选中的时候调用，即当前是选中的，选择了
                        另一个item时，
                        当另一个view别选中时被调用

                      }

                      @Override
                      public void onTabReselected(TabLayout.Tab tab) {
                        //当当前item是选中状态，此时再次选择该item时别调用


                       }
                      });
                   }


 
 

  
  
 
 









3、TableLayout与ViewPager配合使用：
布局文件：
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.pdftron.webviewer.activity.TabLayoutActivity">

        <android.support.design.widget.TabLayout
            android:id="@+id/tb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            app:tabBackground="@android:color/holo_green_dark"
            app:tabContentStart="5dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/holo_purple"
            app:tabIndicatorHeight="6dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#ff00796b"
            app:tabTextAppearance="@style/TextAppearance.AppCompat.Medium"
            app:tabTextColor="#FFFFFF">
       </android.support.design.widget.TabLayout>

       <android.support.v4.view.ViewPager
              android:id="@+id/vp"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_below="@id/tb"></android.support.v4.view.ViewPager>
       </RelativeLayout>

使用到的adapter:
       public class BaseFragemetAdapter extends FragmentStatePagerAdapter {
         ArrayList<Fragment> fgs;
         private String[] mTitles;
         public void setFgs(ArrayList<Fragment> fgs, String[] mTitles){
           this.fgs=fgs;
           this.mTitles=mTitles;
         }
         public BaseFragemetAdapter(FragmentManager fm) {
            super(fm);
         }

         @Override
         public Fragment getItem(int position) {
           return fgs.get(position);
         }

         @Override
          public int getCount() {
            return fgs.size();
         }

         @Override
         public CharSequence getPageTitle(int position) {
            return mTitles[position];//很重要，起到与tableLayout关联的作用，
            否则会报错
         }
       }

用到的Activity：
     public class TabLayoutActivity extends FragmentActivity {
       private android.support.design.widget.TabLayout mTableLayout;
       private String[] mTitles={"相册","标题","我的","菜单","牧场","农场",
       "设置"};
       private ArrayList<Fragment> fgs=new ArrayList<Fragment>();
       private ViewPager vp;
       @Override
       protected void onCreate(@Nullable Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              initViews();
              intiDatas();
              initEvents();
       }

       private void initEvents() {
              mTableLayout.addOnTabSelectedListener(new TabLayout.
              OnTabSelectedListener() {
               @Override
               public void onTabSelected(TabLayout.Tab tab) {
                 Toast.makeText(TabLayoutActivity.this, tab.getText()+"",
                 Toast.LENGTH_SHORT).show();
              }

              @Override
                public void onTabUnselected(TabLayout.Tab tab) {

              }

              @Override
              public void onTabReselected(TabLayout.Tab tab) {

              }
           });
       }
       private void initMenus(){

              fgs.clear();
              for (int i=0;i<mTitles.length;i++){
               if ((i%2)==0){
                  fgs.add(new MyFragments());
                 }else {
                   fgs.add(new MyFragments2());
                }
              }
       };

       private void intiDatas() {
              initMenus();
              BaseFragemetAdapter adapter=new BaseFragemetAdapter(
              getSupportFragmentManager());
              adapter.setFgs(fgs,mTitles);
              vp.setAdapter(adapter);
              mTableLayout.setupWithViewPager(vp);
       }

       private void initViews() {
              mTableLayout= (TabLayout) getViewById(R.id.tb);
              vp= (ViewPager) getViewById(R.id.vp);
       }

       private View getViewById(int id){
              return this.findViewById(id);
          };
}