安卓 ViewPager+Fragment+TabLayout实现简易微信界面

Posted 2022-12-01 有头发的程序猿#

一、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) 

             
         );


     

好啦，本节课的内容就到这了，写了好久好久这篇博客，希望能对你们有用啦！！！