• Android：viewPage+Fragment实现模拟微信首页

    一、前言：

    虽然现在很多已经不这么写了，但是这是最底层的东西，我想我还是要好好理解一下的。这篇代码是模拟微信首页底部按钮和ViewPage的联动。记录一下！！

    二、代码理解：

    主页面布局

    1. "1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".MainActivity">
    9.  
    10.     <androidx.viewpager2.widget.ViewPager2
    11.         android:id="@+id/vp"
    12.         android:layout_width="match_parent"
    13.         android:layout_height="0dp"
    14.         android:layout_weight="1"
    15.         app:layout_constraintTop_toTopOf="parent" />
    16.  
    17.     <include layout="@layout/bottom_layout" />
    18.  
    19.  
    20. LinearLayout>

    对应的java类

    1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    2.     public ViewPager2 viewPager;//1.创建viewPage
    3.     private LinearLayout llMessage, llContect, llFind, llMine;
    4.     private ImageView ivMessage, ivContect, ivFind, ivMine, ivCurrent;
    5.  
    6.     @Override
    7.     protected void onCreate(Bundle savedInstanceState) {
    8.         super.onCreate(savedInstanceState);
    9.         setContentView(R.layout.activity_main);
    10.         initPage();//2.viewPage不再是单纯的ui而是混合的，因此要专门定义一个方法来管理ui
    11.         initTabView();//初始化tableView控件
    12.     }
    13.  
    14.     private void initTabView() {
    15.         llMessage = findViewById(R.id.id_tab_weixin);
    16.         llMessage.setOnClickListener(this);
    17.         llContect = findViewById(R.id.id_tab_contact);
    18.         llContect.setOnClickListener(this);
    19.         llFind = findViewById(R.id.id_tab_find);
    20.         llFind.setOnClickListener(this);
    21.         llFind = findViewById(R.id.id_tab_mine);
    22.         llFind.setOnClickListener(this);
    23.  
    24.         ivMessage = findViewById(R.id.tab_iv_weixin);
    25.         ivContect = findViewById(R.id.tab_iv_contect);
    26.         ivFind = findViewById(R.id.tab_iv_find);
    27.         ivMine = findViewById(R.id.tab_iv_mine);
    28.  
    29.         ivMessage.setSelected(true);
    30.         ivCurrent = ivMessage;//保存当前按钮
    31.  
    32.     }
    33.  
    34.     private void initPage() {
    35.         viewPager = findViewById(R.id.vp);//3.找到viewPage
    36.         ArrayList fragments = new ArrayList<>();
    37.         fragments.add(BlankFragment.newInstance("微信聊天"));
    38.         fragments.add(BlankFragment.newInstance("通讯录"));
    39.         fragments.add(BlankFragment.newInstance("发现"));
    40.         fragments.add(BlankFragment.newInstance("我"));
    41.         MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
    42.         viewPager.setAdapter(myFragmentPagerAdapter);
    43.  
    44.         //按钮点击触发viewpage页面发生改变
    45.         viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    46.             @Override
    47.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    48.                 super.onPageScrolled(position, positionOffset, positionOffsetPixels);
    49.             }
    50.  
    51.             @Override
    52.             public void onPageSelected(int position) {
    53.                 super.onPageSelected(position);
    54.                 changeTab(position);
    55.             }
    56.  
    57.             @Override
    58.             public void onPageScrollStateChanged(int state) {
    59.                 super.onPageScrollStateChanged(state);
    60.             }
    61.         });
    62.     }
    63.  
    64.     private void changeTab(int position) {
    65.         ivCurrent.setSelected(false);
    66.         switch (position) {
    67.             case R.id.id_tab_weixin:
    68.             case 0:
    69.                 viewPager.setCurrentItem(0);
    70.                 ivMessage.setSelected(true);
    71.                 ivCurrent = ivMessage;
    72.                 break;
    73.             case R.id.id_tab_contact:
    74.             case 1:
    75.                 viewPager.setCurrentItem(1);
    76.                 ivContect.setSelected(true);
    77.                 ivCurrent = ivContect;
    78.                 break;
    79.             case R.id.id_tab_find:
    80.             case 2:
    81.                 viewPager.setCurrentItem(2);
    82.                 ivFind.setSelected(true);
    83.                 ivCurrent = ivFind;
    84.                 break;
    85.             case R.id.id_tab_mine:
    86.             case 3:
    87.                 viewPager.setCurrentItem(3);
    88.                 ivMine.setSelected(true);
    89.                 ivCurrent = ivMine;
    90.                 break;
    91.         }
    92.     }
    93.  
    94.     @Override
    95.     public void onClick(View view) {
    96.         //当点击底部导航按钮的时候改变viewpage的页面，需要把点击的按钮id传入
    97.         changeTab(view.getId());
    98.     }
    99. }

    底部导航栏设计

    1. "1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="55dp"
    5.     android:background="@color/white"
    6.     android:orientation="horizontal">
    7.  
    8.     <LinearLayout
    9.         android:id="@+id/id_tab_weixin"
    10.         android:layout_width="0dp"
    11.         android:layout_height="match_parent"
    12.         android:layout_gravity="center"
    13.         android:layout_weight="1"
    14.         android:gravity="center"
    15.         android:orientation="vertical">
    16.  
    17.         <ImageView
    18.             android:id="@+id/tab_iv_weixin"
    19.             android:layout_width="32dp"
    20.             android:layout_height="32dp"
    21.             android:background="@drawable/message_select" />
    22.  
    23.         <TextView
    24.             android:id="@+id/text_weixin"
    25.             android:layout_width="32dp"
    26.             android:layout_height="wrap_content"
    27.             android:gravity="center"
    28.             android:text="微信" />
    29.     LinearLayout>
    30.  
    31.     <LinearLayout
    32.         android:id="@+id/id_tab_contact"
    33.         android:layout_width="0dp"
    34.         android:layout_height="match_parent"
    35.         android:layout_gravity="center"
    36.         android:layout_weight="1"
    37.         android:gravity="center"
    38.         android:orientation="vertical">
    39.  
    40.         <ImageView
    41.             android:id="@+id/tab_iv_contect"
    42.             android:layout_width="32dp"
    43.             android:layout_height="32dp"
    44.             android:background="@drawable/contect_select" />
    45.  
    46.         <TextView
    47.             android:id="@+id/text_contect"
    48.             android:layout_width="wrap_content"
    49.             android:layout_height="wrap_content"
    50.             android:gravity="center"
    51.             android:text="通讯录" />
    52.     LinearLayout>
    53.  
    54.     <LinearLayout
    55.         android:id="@+id/id_tab_find"
    56.         android:layout_width="0dp"
    57.         android:layout_height="match_parent"
    58.         android:layout_gravity="center"
    59.         android:layout_weight="1"
    60.         android:gravity="center"
    61.         android:orientation="vertical">
    62.  
    63.         <ImageView
    64.             android:id="@+id/tab_iv_find"
    65.             android:layout_width="32dp"
    66.             android:layout_height="32dp"
    67.             android:background="@drawable/find_select" />
    68.  
    69.         <TextView
    70.             android:id="@+id/text_find"
    71.             android:layout_width="32dp"
    72.             android:layout_height="wrap_content"
    73.             android:gravity="center"
    74.             android:text="发现" />
    75.     LinearLayout>
    76.  
    77.     <LinearLayout
    78.         android:id="@+id/id_tab_mine"
    79.         android:layout_width="0dp"
    80.         android:layout_height="match_parent"
    81.         android:layout_gravity="center"
    82.         android:layout_weight="1"
    83.         android:gravity="center"
    84.         android:orientation="vertical">
    85.  
    86.         <ImageView
    87.             android:id="@+id/tab_iv_mine"
    88.             android:layout_width="32dp"
    89.             android:layout_height="32dp"
    90.             android:background="@drawable/mine_select" />
    91.  
    92.         <TextView
    93.             android:id="@+id/text_mine"
    94.             android:layout_width="32dp"
    95.             android:layout_height="wrap_content"
    96.             android:gravity="center"
    97.             android:text="我的" />
    98.     LinearLayout>
    99.  
    100. LinearLayout>

    需要对应的图片资源

    在drawable中新建导航底部按钮选择器

    首页消息

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@drawable/ic_select_massage" android:state_selected="true"/>
    4.     <item android:drawable="@drawable/ic_normal_massages"/>
    5. selector>

    通讯录按钮选择器

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@drawable/ic_select_contect" android:state_selected="true"/>
    4.     <item android:drawable="@drawable/ic_normal_contect"/>
    5. selector>

    发现按钮选择器

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@drawable/ic_select_find" android:state_selected="true"/>
    4.     <item android:drawable="@drawable/ic_normal_find"/>
    5. selector>

    我的按钮选择器

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@drawable/ic_select_mine" android:state_selected="true"/>
    4.     <item android:drawable="@drawable/ic_normal_mine"/>
    5. selector>

    三、运行效果：要源码可以私信我

  • 相关阅读:
    知识分享系统
    MybatisPlus
    自定义Lua解析器管理器-------演化脚本V0.5
    openKylin 0.7 尝鲜
    《异常检测——从经典算法到深度学习》29 EasyTSAD: 用于时间序列异常检测模型的工业级基准
    责任链模式
    Docker安装部署Redis集群
    Linux高级IO
    【时时三省】(C语言基础)操作符5
    推荐接口压测报告
  • 原文地址：https://blog.csdn.net/Rssqzqyp/article/details/132811629