TabLayout+ViewPager實現(xiàn)切頁的示例代碼

更新時間：2019年01月03日 14:52:58 作者：東小東

這篇文章主要介紹了TabLayout+ViewPager實現(xiàn)切頁的示例代碼，可實現(xiàn)左右滑動切換視圖界面和點擊切換，非常具有實用價值，需要的朋友可以參考下

安卓使用TabLayout+ViewPager+Fragment 實現(xiàn)頁面切換，可實現(xiàn)左右滑動切換視圖界面和點擊切換

可自定義菜單欄是在頂部還是在底部

一、實現(xiàn)效果：

二、實現(xiàn)過程：

2.1 一些重要的設(shè)置

添加必須依賴：

因為需要使用：import android.support.design.widget.TabLayout;，所以必須添加下列依賴

compile 'com.android.support:design:23.3.0'

主布局文件編寫：

頂部或者底部顯示，只要更改ViewPager和TabLayout排列順序即可

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:paddingBottom="0dp"
  android:paddingLeft="0dp"
  android:paddingRight="0dp"
  android:orientation="vertical"
  android:paddingTop="0dp"
  tools:context="com.example.fafa.MainActivity">

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<!--
app:tabIndicatorColor=""  指示器顏色
app:tabIndicatorHeight="" 指示器高度，設(shè)置為0就是沒有指示器
app:tabTextColor=""  Tab文本默認顏色
app:tabSelectedTextColor=""   Tab文本被選中后的顏色
app:tabTextAppearance=""   為Tab文本設(shè)置樣式，一般是需要為Tab加圖標時使用
app:tabMode="" 只有兩個值：fixed、scrollable
其中 fixed用于標題欄少的情況，每個Tab可以平分屏幕寬度
其中 scrollable用于標題欄多出屏幕的情況，如果標題欄少的時候用很難看，占不滿屏幕
app:tabGravity="center" 整體居中，不可與上共用
app:tabBackground=""  TabLayout背景，和android:background=""效果一樣
app:tabGravity=""  對齊方式: 居中顯示center、fill填滿
-->

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"

    app:tabMode="fixed"
    app:tabIndicatorColor="@color/colorLv"
    app:tabTextColor="@android:color/black"
    app:tabSelectedTextColor="@color/colorred"

    />
</LinearLayout>

2.2 僅字符菜單欄顯示實現(xiàn)：

未加入圖片顯示，實現(xiàn)較為簡單

基本邏輯代碼：

每個界面使用不同的fragment，進行一一對應(yīng)

import android.support.design.widget.TabLayout;
public class MainActivity extends AppCompatActivity {
  private ViewPager viewPager;
  private TabLayout tabLayout;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    tabLayout = (TabLayout) findViewById(R.id.tabs2);
    viewPager = (ViewPager) findViewById(R.id.viewpager);

    //設(shè)置界面文件和文字一一對應(yīng)
    final Fragment[] fragments = {new Fragment0(), new Fragment1(), new Fragment2()};
    final String[] titles = {"界面1", "界面2", "界面3"};

 //添加tablayout中的豎線,每一項的中間分隔線
 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
// linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
// linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg));

 //每項只進入一次
 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
   @Override
   public Fragment getItem(int position) {
     return fragments[position];
   }
   @Override
   public int getCount() {
     return fragments.length;
   }

   @Override
   public CharSequence getPageTitle(int position) {
     return titles[position];
   }
 });

 tabLayout.setupWithViewPager(viewPager);
 tabLayout.getTabAt(1).select();//設(shè)置第一個為選中
  }
}

2.3 字符和圖片菜單欄實現(xiàn)

圖片加漢字菜單欄，菜單欄每項都是一個視圖可以自定義設(shè)計

菜單欄每項的布局文件設(shè)計：

一個圖片顯示和一個文字顯示，定義為垂直布局，其中android:layout_gravity="center"是把控件居中，這里不寫，在菜單欄顯示時可能會出現(xiàn)錯位

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:id="@+id/item_view"

  android:layout_height="match_parent">
  <ImageView
    android:layout_width="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:id="@+id/item_img"
    android:layout_gravity="center"
    android:layout_height="wrap_content" />
  <TextView
    android:layout_width="wrap_content"
    android:text="xxxx"
    android:layout_gravity="center"
    android:id="@+id/item_text"
    android:layout_height="wrap_content" />
</LinearLayout>

主布局文件更改：

在主布局文件的<android.support.design.widget.TabLayout>更改android:layout_height="70dp"，表示其菜單欄的高度改變。

定義必要的類變量：

private ViewPager viewPager;
 private TabLayout tabLayout;
 //設(shè)置界面文件和文字一一對應(yīng)
 private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()};
 private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"};
 //未選中圖片
 private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4};
 //選中圖片
 private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};
//配置默認選中第幾項
 private int ItemWhat=1;

數(shù)據(jù)初始化及基本界面加載：

//只進入一次，初始化
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
  @Override
  public Fragment getItem(int position) {
    return Lfragments[position];
  }
  @Override
  public int getCount() {
    return Lfragments.length;
  }

  @Override
  public CharSequence getPageTitle(int position) {
    return Ltitles[position];
  }
});

//綁定
tabLayout.setupWithViewPager(viewPager);

//設(shè)置默認選中頁，宏定義
tabLayout.getTabAt(ItemWhat).select();
viewPager.setOffscreenPageLimit(3); //設(shè)置向左和向右都緩存的頁面?zhèn)€數(shù)
//初始化菜單欄顯示
for (int i = 0; i < tabLayout.getTabCount(); i++) {
  //尋找到控件
  View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null);
   LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);
  TextView mTabText = (TextView) view.findViewById(R.id.item_text);
  ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);

  mTabText.setText(Ltitles[i]);
  mTabIcon.setImageResource(Limg[i]);
  //設(shè)置不可點擊
  // mTabView.setClickable(true);

  //更改選中項樣式
  if(i==ItemWhat){
    mTabIcon.setImageResource(Limgn[i]);
    mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));
  }

  //設(shè)置樣式
  tabLayout.getTabAt(i).setCustomView(view);
}

監(jiān)聽選擇事件：

//是否選中監(jiān)聽
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
   //選中時進入，改變樣式
    ItemSelect(tab);
    //onTabselected方法里面調(diào)用了viewPager的setCurrentItem 所以要想自定義OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了
    viewPager.setCurrentItem(tab.getPosition());
  }

  @Override
  public void onTabUnselected(TabLayout.Tab tab) {
   //未選中進入，改變樣式
    ItemNoSelect(tab);

  }

  @Override
  public void onTabReselected(TabLayout.Tab tab) {
   //重新選中

  }
});

選中和非選中，更改其中顯示樣式：

//某個項選中，改變其樣式
 private void ItemSelect(TabLayout.Tab tab) {
   View customView = tab.getCustomView();
   TextView tabText = (TextView) customView.findViewById(R.id.item_text);
   ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);
   tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));
   String stitle = tabText.getText().toString();
   for(int i=0;i<Ltitles.length;i++){
     if(Ltitles[i].equals(stitle)){
       //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();
       tabIcon.setImageResource(Limgn[i]);
     }
   }
 }
//某個項非選中，改變其樣式
 private void ItemNoSelect(TabLayout.Tab tab) {
   View customView = tab.getCustomView();
   TextView tabText = (TextView) customView.findViewById(R.id.item_text);
   ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);
   tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));
   String stitle = tabText.getText().toString();
   for(int i=0;i<Ltitles.length;i++){
     if(Ltitles[i].equals(stitle)){
       tabIcon.setImageResource(Limg[i]);
     }
   }
 }

整體代碼：

import android.support.design.widget.TabLayout;
public class MainActivity extends AppCompatActivity {
  private ViewPager viewPager;
  private TabLayout tabLayout;
  //設(shè)置界面文件和文字一一對應(yīng)
  private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()};
  private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"};
  //未選中圖片
  private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4};
  //選中圖片
  private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};
  //配置默認選中第幾項
  private int ItemWhat=1;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //找控件
    tabLayout = (TabLayout) findViewById(R.id.tabs2);
    viewPager = (ViewPager) findViewById(R.id.viewpager);

    //添加tablayout中的豎線,每一項的中間分隔線
    //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
    // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
    // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg));

    //只進入一次，初始化
    viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
      @Override
      public Fragment getItem(int position) {
        return Lfragments[position];
      }
      @Override
      public int getCount() {
        return Lfragments.length;
      }

      @Override
      public CharSequence getPageTitle(int position) {
        return Ltitles[position];
      }
    });

    //綁定
    tabLayout.setupWithViewPager(viewPager);

    //設(shè)置默認選中頁，宏定義
    tabLayout.getTabAt(ItemWhat).select();
    viewPager.setOffscreenPageLimit(3); //設(shè)置向左和向右都緩存的頁面?zhèn)€數(shù)
    //初始化菜單欄顯示
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
      //尋找到控件
      View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null);
       LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);
      TextView mTabText = (TextView) view.findViewById(R.id.item_text);
      ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);

      mTabText.setText(Ltitles[i]);
      mTabIcon.setImageResource(Limg[i]);
      //設(shè)置不可點擊
      // mTabView.setClickable(true);

      //更改選中項樣式
      if(i==ItemWhat){
        mTabIcon.setImageResource(Limgn[i]);
        mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));
      }

      //設(shè)置樣式
      tabLayout.getTabAt(i).setCustomView(view);
    }
    //是否選中監(jiān)聽
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
       //選中時進入，改變樣式
        ItemSelect(tab);
        //onTabselected方法里面調(diào)用了viewPager的setCurrentItem 所以要想自定義OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了
        viewPager.setCurrentItem(tab.getPosition());
      }
      @Override
      public void onTabUnselected(TabLayout.Tab tab) {
       //未選中進入，改變樣式
        ItemNoSelect(tab);
      }
      @Override
      public void onTabReselected(TabLayout.Tab tab) {
       //重新選中

      }
    });}
  //某個項選中，改變其樣式
  private void ItemSelect(TabLayout.Tab tab) {
    View customView = tab.getCustomView();
    TextView tabText = (TextView) customView.findViewById(R.id.item_text);
    ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);
    tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));
    String stitle = tabText.getText().toString();
    for(int i=0;i<Ltitles.length;i++){
      if(Ltitles[i].equals(stitle)){
        //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();
        tabIcon.setImageResource(Limgn[i]);
      }
    }
  }
  //某個項非選中，改變其樣式
  private void ItemNoSelect(TabLayout.Tab tab) {
    View customView = tab.getCustomView();
    TextView tabText = (TextView) customView.findViewById(R.id.item_text);
    ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);
    tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));
    String stitle = tabText.getText().toString();
    for(int i=0;i<Ltitles.length;i++){
      if(Ltitles[i].equals(stitle)){
        tabIcon.setImageResource(Limg[i]);
      }
    }
  }

}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: