摘自：安卓APP_ Fragment（5）—— Fragment + ViewPager2 模擬微信首頁(yè) （2）兩者聯(lián)動(dòng)實(shí)現(xiàn)翻頁(yè)
作者：丶PURSUING
發(fā)布時(shí)間： 2021-04-22 00:11:43
網(wǎng)址：https://blog.csdn.net/weixin_44742824/article/details/115956924

目錄

• 效果與UI框架
• （1）定義導(dǎo)航欄大致布局
• （2）初步設(shè)置導(dǎo)航欄圖標(biāo)點(diǎn)擊響應(yīng)事件
• （3）導(dǎo)航欄圖標(biāo)跟隨viewPager滑動(dòng)一同變化
• （4）點(diǎn)擊導(dǎo)航欄圖標(biāo)，切換viewPager
• 更多細(xì)節(jié)在具體代碼中體現(xiàn)

效果與UI框架

模擬微信首頁(yè)的最終實(shí)現(xiàn)效果如下圖：

要實(shí)現(xiàn)下面導(dǎo)航欄的效果，有很多的實(shí)現(xiàn)方案，典型的是navigation。這個(gè)控件把整個(gè)聯(lián)動(dòng)效果都完成了,開(kāi)發(fā)變得非常簡(jiǎn)單，在下一章節(jié)中再介紹這個(gè)簡(jiǎn)便高級(jí)的辦法

下面硬擼代碼，了解更底層地原理。一行行手寫(xiě)效果?？偟腢I框架為：

（1）定義導(dǎo)航欄大致布局

導(dǎo)航欄框

導(dǎo)航欄中的圖標(biāo)按鈕（其中一個(gè)）

點(diǎn)擊按鈕圖標(biāo)的變化實(shí)際上是換了一張圖片

（2）初步設(shè)置導(dǎo)航欄圖標(biāo)點(diǎn)擊響應(yīng)事件

用圖標(biāo)所對(duì)應(yīng)的LinearLayout響應(yīng)點(diǎn)擊事件

布局初始化與設(shè)置監(jiān)聽(tīng)

在main.xml中引用

（3）導(dǎo)航欄圖標(biāo)跟隨viewPager滑動(dòng)一同變化

viewPager既然能夠設(shè)置滑動(dòng)，必然有滑動(dòng)的監(jiān)聽(tīng)接口

要重置狀態(tài)，使得按鈕變化正?；?#xff08;不點(diǎn)擊與點(diǎn)擊對(duì)應(yīng)不同狀態(tài)）

（4）點(diǎn)擊導(dǎo)航欄圖標(biāo)，切換viewPager

完成按鈕的點(diǎn)擊事件

viewPager設(shè)置item，實(shí)現(xiàn)頁(yè)面切換

更多細(xì)節(jié)在具體代碼中體現(xiàn)

代碼架構(gòu)

bottom_layout.xml

<?xml version="1.0" encoding="utf-8"?><!--導(dǎo)航欄布局，方向?yàn)樗?#xff0c;顏色為#0E0E0E(灰色)--> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="55dp"android:background="@color/gray"android:orientation="horizontal"><!-- 寬度設(shè)置為0，權(quán)重為1，表示寬度按照LL個(gè)數(shù)自動(dòng)分配--><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weixin"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_weixin"android:background="@drawable/tab_weixin"/><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_weixin"android:gravity="center"android:text="微信"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_contact"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_contact"android:background="@drawable/table_contact"/><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_contact"android:gravity="center"android:text="通訊錄"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_find"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_find"android:background="@drawable/tab_find"/><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_find"android:gravity="center"android:text="發(fā)現(xiàn)"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_my"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:id="@+id/tab_iv_my"android:background="@drawable/tab_my"/><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_my"android:gravity="center"android:text="我"/></LinearLayout></LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103

tab_find.xml、tab_my.xml、tab_contact.xml與tab_weixin.xml類(lèi)似

<?xml version="1.0" encoding="utf-8"?><!--點(diǎn)擊狀態(tài)是一張圖片，非點(diǎn)擊是另外一張--> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/ic_baseline_chat_bubble_24" android:state_selected="true"/><item android:drawable="@drawable/ic_baseline_chat_bubble_outline_24"/> </selector>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!-- 高為0權(quán)重為1的設(shè)置可以讓ViewPager界面自動(dòng)適配bottom_layout--><androidx.viewpager2.widget.ViewPager2android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:id="@+id/viewpage"/><!-- 引用bottom_layout.xml--><include layout="@layout/bottom_layout"/></LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener{ViewPager2 viewPager;private LinearLayout llWeixin,llContact,llFind,llMy;//ivCurrent用于保存當(dāng)前畫(huà)面private ImageView ivWeixin,ivContact,ivFind,ivMy,ivCurrent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//這里的viewPager不再是一個(gè)簡(jiǎn)單的UI，是一個(gè)要控制fragment的UI。要用專(zhuān)門(mén)的方法去初始化viewPagerinitPager();initTabView();}//這個(gè)函數(shù)專(zhuān)門(mén)處理UI的更新private void initTabView() {llWeixin = findViewById(R.id.id_tab_weixin);llWeixin.setOnClickListener(this);llContact = findViewById(R.id.id_tab_contact);llContact.setOnClickListener(this);llFind = findViewById(R.id.id_tab_find);llFind.setOnClickListener(this);llMy = findViewById(R.id.id_tab_my);llMy.setOnClickListener(this);ivWeixin = findViewById(R.id.tab_iv_weixin);ivContact = findViewById(R.id.tab_iv_contact);ivFind = findViewById(R.id.tab_iv_find);ivMy = findViewById(R.id.tab_iv_my);//微信一進(jìn)來(lái)顯示的應(yīng)該是聊天界面ivWeixin.setSelected(true);//設(shè)置當(dāng)前頁(yè)面ivCurrent = ivWeixin;}private void initPager() {viewPager = findViewById(R.id.viewpage);ArrayList<Fragment> fragments = new ArrayList<>();fragments.add(BlankFragment.newInstance("微信聊天"));fragments.add(BlankFragment.newInstance("通訊錄"));fragments.add(BlankFragment.newInstance("發(fā)現(xiàn)"));fragments.add(BlankFragment.newInstance("我"));MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);//getLifecycle是jetpack里面的一個(gè)組件//系統(tǒng)專(zhuān)門(mén)提供了ViewPager適配Fragment的AdapterviewPager.setAdapter(pagerAdapter);//viewpager的高級(jí)用法：既然能夠設(shè)置滑動(dòng)，必然有滑動(dòng)的監(jiān)聽(tīng)接口viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Override//實(shí)現(xiàn)動(dòng)畫(huà)的滾動(dòng)動(dòng)效可以放在這里實(shí)現(xiàn)public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position, positionOffset, positionOffsetPixels);}@Override//選擇后改變位置放在這里實(shí)現(xiàn)，響應(yīng)頁(yè)面改變public void onPageSelected(int position) {super.onPageSelected(position);//viewpager的滑動(dòng)對(duì)應(yīng)改變導(dǎo)航欄的UIchangeTab(position);}@Overridepublic void onPageScrollStateChanged(int state) {super.onPageScrollStateChanged(state);}});}//viewpager的滑動(dòng)對(duì)應(yīng)改變導(dǎo)航欄的UIprivate void changeTab(int position) {//把上一次的圖標(biāo)點(diǎn)擊事件取消，相當(dāng)于復(fù)位ivCurrent.setSelected(false);switch (position) {case 0:case R.id.id_tab_weixin://導(dǎo)航欄對(duì)viewpage的聯(lián)動(dòng)，點(diǎn)擊導(dǎo)航欄切換頁(yè)面viewPager.setCurrentItem(0);//viewpage對(duì)導(dǎo)航欄的聯(lián)動(dòng)，選中為ivWeixin，則對(duì)應(yīng)的圖片被選中ivWeixin.setSelected(true);//標(biāo)記當(dāng)前圖標(biāo)ivCurrent = ivWeixin;break;case 1:case R.id.id_tab_contact:viewPager.setCurrentItem(1);//選中為ivWeixin，則對(duì)應(yīng)的圖片被選中ivContact.setSelected(true);ivCurrent = ivContact;break;case 2:case R.id.id_tab_find:viewPager.setCurrentItem(2);//選中為ivWeixin，則對(duì)應(yīng)的圖片被選中ivFind.setSelected(true);ivCurrent = ivFind;break;case 3:case R.id.id_tab_my:viewPager.setCurrentItem(3);//選中為ivWeixin，則對(duì)應(yīng)的圖片被選中ivMy.setSelected(true);ivCurrent = ivMy;break;}}@Overridepublic void onClick(View v) {changeTab(v.getId());} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120

最后的關(guān)于fragment的fragment_blank.xml、BlankFragment.java、MyFragmentPagerAdapter.java均在上一章節(jié)中有，且完全一致。

總結(jié)

以上是生活随笔為你收集整理的安卓APP_ Fragment（5）—— Fragment + ViewPager2 模拟微信首页 （2）两者联动翻页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。