安卓 ViewPager+Fragment+TabLayout實現簡易微信界面

一、TabLayout的使用

首先我們先看看什麼是TabLayout，如下圖：

首先，我們現在我們app下的build.gradle下添加我們的依賴：

 implementation 'com.android.support:design:28.0.0'

接着，我們在我們主函數佈局裏面加上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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="#ECAFAF"
        app:tabSelectedTextColor="#ff0000"
        app:tabIndicatorHeight="3dp"
        app:tabMode="scrollable" />
</LinearLayout>

這裏有幾條屬性：
字體未點擊的時候的顏色：

app:tabTextColor

字體點擊的時候的顏色：

app:tabSelectedTextColor

字體下面小橫線指示器的高度（如果不想要則吧高度設置爲0即可）：

app:tabIndicatorHeight

指示器的顏色也可以設置：

app:tabIndicatorColor

tab是滾動的還是固定的，分別對應scrollable 和 fixed（固定則會自動平分屏幕）

app:tabMode

最後，在主函數中：

public class MainActivity extends AppCompatActivity {
     TabLayout tabLayout;

     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = findViewById(R.id.tab_layout);


        tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
         tabLayout.addTab(tabLayout.newTab().setText("生活1").setIcon(R.drawable.friends));
    }


}

二、實現簡易微信界面

效果圖如下：

首先，我們要記得導入ViewPager和TabLayout的依賴：

implementation ‘com.android.support:viewpager:28.0.0’
implementation ‘com.android.support:design:28.0.0’

接着我們來編寫佈局文件：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabTextColor="#80848B"
        app:tabSelectedTextColor="#57F106"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        />
</LinearLayout>

這裏，最外面一層我們用了LinearLayout佈局，orientation是vertical，佈局忘了的記得去看我之前的博客https://blog.csdn.net/weixin_43547832/article/details/102592852
裏面有兩個控件，是ViewPager和TabLayout，注意這裏ViewPager高度設置爲了odp，而weight權重爲1，意思是佔滿其他控件剩餘的控件，也就是除了我們的TabLayout高度所佔的空間，其餘的就是我們ViewPager的位置。

佈局寫完後，我們要爲我們的VeiwPager寫一個適配器，由於我們是用Fragment來作爲我們page，故而ViewPager有一個專門是Fragment的適配器FragmentPagerAdapter，我們讓我們自己寫的適配器繼承它。
新建一個MyFragmentAdapter：

public class MyFragmentAdapter extends FragmentPagerAdapter {
    List<Fragment> fgList;
    List<String> list;
    public MyFragmentAdapter(List<Fragment> fgList, List<String> list,FragmentManager fm) {
        super(fm);
        this.fgList = fgList;
        this.list = list;
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}

裏面重寫的函數意思就像字面一樣，我就不多說了，這裏通過構造函數傳入三個參數，一個是碎片的列表，一個是我們TabLayout底部顯示的文字列表，第三個參數是固定的，記得這樣寫就好。

接下來我們在layout下新建四個佈局文件，我們的碎片做準備，下面我只貼出其中一個佈局的，圖片自己準備一些，不需要和我一樣：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/one"
        />

</LinearLayout>

寫了四個佈局，當然要對應四個碎片啦，下面我們建四個碎片類：

其中一個代碼如下，記得分別綁定各個佈局！！！！！

public class PhotoOneFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View  view = inflater.inflate(R.layout.one_list,container,false);   //這裏的r.layout.one_list每個碎片不一樣，記得改爲對應的佈局
        return view;
    }
}

接着就到我們最重要的主函數了：

public class MainActivity extends AppCompatActivity {
     TabLayout tabLayout;
     ViewPager viewPager;
     List<Fragment> fgList = new ArrayList<>();
     List<String> list = new ArrayList<>();

     @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         tabLayout = findViewById(R.id.tab_layout);
         viewPager = findViewById(R.id.viewpager);

         fgList.add(new PhotoOneFragment());    //往我們的碎片list添加我們的四個碎片
         fgList.add(new PhotoTwoFragment());
         fgList.add(new PhotoThreeFragment());
         fgList.add(new PhotoFourFragment());

         list.add("微信");            	//往我們tab底部文字的list裏添加文字
         list.add("通訊錄");
         list.add("發現");
         list.add("我");

         MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(fgList, list, getSupportFragmentManager()); //實例化我們的適配器，並把我們的碎片list和文字list傳進去，第三個參數固定這樣寫
         viewPager.setAdapter(myFragmentAdapter);    //爲我們的ViewPger添加適配器
         tabLayout.setupWithViewPager(viewPager); 	//把我們的TabLayout與我們的ViewPager綁定起來

            tabLayout.getTabAt(0).setIcon(R.drawable.news);        //設置我們底部圖片的是否被點擊狀態
            tabLayout.getTabAt(1).setIcon(R.drawable.friends_un);
            tabLayout.getTabAt(2).setIcon(R.drawable.find_un);
            tabLayout.getTabAt(3).setIcon(R.drawable.me_un);

         tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
             @Override
             public void onTabSelected(TabLayout.Tab tab) {        //選中tab的處理邏輯
                 if(tab.getPosition()==0)       tab.setIcon(R.drawable.news);    //如果當前點擊第一個Tab,就把改tab的圖片設置爲點擊狀態的圖片
                 else if(tab.getPosition()==1)  tab.setIcon(R.drawable.friends);
                 else if(tab.getPosition()==2)  tab.setIcon(R.drawable.find);
                 else tab.setIcon(R.drawable.me);
             }

             @Override
             public void onTabUnselected(TabLayout.Tab tab) {   //未選中的tab的處理邏輯
                 if(tab.getPosition()==0)       tab.setIcon(R.drawable.news_un);  // 如果當前的tab未點擊，就把改圖片設置爲未點擊的圖片
                 else if(tab.getPosition()==1)  tab.setIcon(R.drawable.friends_un);
                 else if(tab.getPosition()==2)  tab.setIcon(R.drawable.find_un);
                 else tab.setIcon(R.drawable.me_un);
             }

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

             }
         });


     }


}

好啦，本節課的內容就到這了，寫了好久好久這篇博客，希望能對你們有用啦！！！