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

Posted 有头发的程序猿#

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安卓 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) 

             
         );


     



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

以上是关于安卓 ViewPager+Fragment+TabLayout实现简易微信界面的主要内容,如果未能解决你的问题,请参考以下文章

安卓ScrollView中放ViewPager+ViewPager,ViewPager中放的是2个Fragment,Fragment中放Listview.

Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

首页-底部Tab导航(菜单栏)的实现:FragmentTabHost+ViewPager+Fragment

Android安卓viewpager和Fragment的结合,多个Fragment视图之间切换等运用

viewpager+fragment三页面tab切换并且实现同时上传三个页面的信息

安卓中viewpager+tablayout+fragment懒加载怎么做