安卓APP_ Fragment(5)—— Fragment + ViewPager2 模拟微信首页 (2)两者联动翻页
摘自:安卓APP_ Fragment(5)—— Fragment + ViewPager2 模拟微信首页 (2)两者联动实现翻页
作者:丶PURSUING
发布时间: 2021-04-22 00:11:43
网址:https://blog.csdn.net/weixin_44742824/article/details/115956924
目录
- 效果与UI框架
- (1)定义导航栏大致布局
- (2)初步设置导航栏图标点击响应事件
- (3)导航栏图标跟随viewPager滑动一同变化
- (4)点击导航栏图标,切换viewPager
- 更多细节在具体代码中体现
效果与UI框架
模拟微信首页的最终实现效果如下图:
要实现下面导航栏的效果,有很多的实现方案,典型的是navigation。这个控件把整个联动效果都完成了,开发变得非常简单,在下一章节中再介绍这个简便高级的办法
下面硬撸代码,了解更底层地原理。一行行手写效果。总的UI框架为:
(1)定义导航栏大致布局
导航栏框
导航栏中的图标按钮(其中一个)
点击按钮图标的变化实际上是换了一张图片
(2)初步设置导航栏图标点击响应事件
用图标所对应的LinearLayout响应点击事件
布局初始化与设置监听
在main.xml中引用
(3)导航栏图标跟随viewPager滑动一同变化
viewPager既然能够设置滑动,必然有滑动的监听接口
要重置状态,使得按钮变化正常化(不点击与点击对应不同状态)
(4)点击导航栏图标,切换viewPager
完成按钮的点击事件
viewPager设置item,实现页面切换
更多细节在具体代码中体现
代码架构
bottom_layout.xml
<?xml version="1.0" encoding="utf-8"?><!--导航栏布局,方向为水平,颜色为#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"><!-- 宽度设置为0,权重为1,表示宽度按照LL个数自动分配--><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="发现"/></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
类似
<?xml version="1.0" encoding="utf-8"?><!--点击状态是一张图片,非点击是另外一张-->
<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权重为1的设置可以让ViewPager界面自动适配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用于保存当前画面private ImageView ivWeixin,ivContact,ivFind,ivMy,ivCurrent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//这里的viewPager不再是一个简单的UI,是一个要控制fragment的UI。要用专门的方法去初始化viewPagerinitPager();initTabView();}//这个函数专门处理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);//微信一进来显示的应该是聊天界面ivWeixin.setSelected(true);//设置当前页面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("发现"));fragments.add(BlankFragment.newInstance("我"));MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);//getLifecycle是jetpack里面的一个组件//系统专门提供了ViewPager适配Fragment的AdapterviewPager.setAdapter(pagerAdapter);//viewpager的高级用法:既然能够设置滑动,必然有滑动的监听接口viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Override//实现动画的滚动动效可以放在这里实现public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position, positionOffset, positionOffsetPixels);}@Override//选择后改变位置放在这里实现,响应页面改变public void onPageSelected(int position) {super.onPageSelected(position);//viewpager的滑动对应改变导航栏的UIchangeTab(position);}@Overridepublic void onPageScrollStateChanged(int state) {super.onPageScrollStateChanged(state);}});}//viewpager的滑动对应改变导航栏的UIprivate void changeTab(int position) {//把上一次的图标点击事件取消,相当于复位ivCurrent.setSelected(false);switch (position) {case 0:case R.id.id_tab_weixin://导航栏对viewpage的联动,点击导航栏切换页面viewPager.setCurrentItem(0);//viewpage对导航栏的联动,选中为ivWeixin,则对应的图片被选中ivWeixin.setSelected(true);//标记当前图标ivCurrent = ivWeixin;break;case 1:case R.id.id_tab_contact:viewPager.setCurrentItem(1);//选中为ivWeixin,则对应的图片被选中ivContact.setSelected(true);ivCurrent = ivContact;break;case 2:case R.id.id_tab_find:viewPager.setCurrentItem(2);//选中为ivWeixin,则对应的图片被选中ivFind.setSelected(true);ivCurrent = ivFind;break;case 3:case R.id.id_tab_my:viewPager.setCurrentItem(3);//选中为ivWeixin,则对应的图片被选中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
最后的关于fragment的fragment_blank.xml
、BlankFragment.java
、MyFragmentPagerAdapter.java
均在上一章节中有,且完全一致。
安卓APP_ Fragment(5)—— Fragment + ViewPager2 模拟微信首页 (2)两者联动翻页相关推荐
- 安卓APP_ Fragment(4)—— Fragment + ViewPager2 模拟微信首页 (1)两者联动实现翻页
摘自:安卓APP_ Fragment(4)-- Fragment + ViewPager2 模拟微信首页 (1)两者联动实现翻页 作者:丶PURSUING 发布时间: 2021-04-20 17:46 ...
- Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)
可以实现的方式:BottomNavigationView 这里我们不使用BottomNavigationView,手动来写代码 先看一下效果 fragment + viewPager2模拟微信首页2( ...
- Android:viewpager+ fragment模拟微信首页
viewpager+ fragment viewpager+ fragment模拟微信首页 1.前言 2.实现 viewpager+ fragment模拟微信首页 1.前言 ViewPager(视图滑 ...
- 微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFra ...
- ViewPager+Fragment模拟微信首页详细步骤
实现步骤: 第一步:添加ViewPager2依赖 implementation 'androidx.viewpager2:viewpager2:1.0.0' 第二步:页面布局activity_main ...
- Android 实战之模拟微信首页界面 (java实现)
哈喽~大家好呀,这篇我们来看看用 java 来实现 模拟微信界面 ,首先我们来看看效果. 开头 首先,我们先看 GIF 图,我们是实现了界面的左滑右滑切换界面与点击下面的图标按钮来实现切换界面的效果 ...
- 蓝牙遥控器 – 将手机模拟为键盘、鼠标、翻页笔、遥控器
简介: 一直在寻找将手机模拟为鼠标和键盘的软件,对于有两部手机的人来说,这会使旧手机变废为宝,将其用作主力机的键盘,用来编辑文档写写东西还是非常方便的,一方面,备用机的整个手机屏幕都是键盘,双手操持打 ...
- 用 Cocos Creator 模拟书本翻页效果
本篇文章作者:乐府-贝塔 乐府-贝塔:乐府前端核心开发,从事游戏开发多年,从 Cocos2d-x 做到 Cocos Creator,擅长渲染技术的相关优化.多年的前端开发经验激发了对技术研究的深厚兴趣 ...
- 用Cocos Creator 模拟书本翻页效果
1.简介 本文主要探讨了如何使用CocosCreator来模拟书本翻页效果,分别介绍了通过使用贝塞尔曲线和verlet积分算法来模拟书页底边在翻页过程中的弯曲形变,最后通过自定义assembler传入 ...
最新文章
- mysql数据类型不写(),MYSQL 数据类型
- android 相册选择视频和图片格式,Android获取文件类型是图片还是视频
- P2596 [ZJOI2006]书架 无旋treap 按照排名分裂
- c语言程序设计中三子棋游戏,C语言实现简易版三子棋游戏
- java的整型_java 整型
- matlab与c 接口与混合编程,Matlab与C/C++混合编程接口及应用方法解析
- 数学分析原理 定理 6.12
- FF与IE兼容性总结(转载)
- activiti7(三):Activiti7简介与HelloWorld
- 2013年中国新媒体行业的八大趋势
- javascript之操作文件(Files)
- torch学习 (41):torch中的tensor初始化操作
- 富贵不压重发_俗语“贵人不顶重发”,重发是啥意思?为什么这样说?
- 移动硬盘(USB3.0)2TB在自己电脑上突然识别不了。。
- SIPM模拟器 MIPS汇编语言实现读取文件
- 四川大学计算机学院夏令营优秀,2018年四川大学全校各学院保研夏令营通知信息大汇总...
- exit code非0什么意思C语言,c++程序出现exit code -1073740940 (0xC0000374)
- 气体压力测试与泄露量测试
- 161. 相隔为 1 的编辑距离
- 什么是中控矩阵视屏监控系统