Android进阶之利用Tablayout+ViewPager+Fragment实现神奇的滑动效果
2024-04-10 01:44:13
一,概述
之前我们使用ViewPager时,往往喜欢与TabPageIndicator配合使用,达到滑动就可以切换页面的效果.但是,TabPageIndicator毕竟是第三方库,多少还是没有谷歌推出的Tablayout好用.Tablayout出来后,估计之前在GitHub上类似的第三方控件都会沉寂下去了.Tablayout还有一个优点就是,它可以最低可以兼容到Android api2.2,这就很有吸引力了.本文主要是记录Tablayout+ViewPager+Fragment结合使用,搭建一个漂亮的app界面,小型项目可以直接使用!
二,代码实现
布局实现
1)Tablayout是在Android Support Design库,所有先去app/build.gradle添加该库
//使用TabLayout，需要引入design库compile 'com.android.support:design:25.1.0'2)布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!--titlebar--><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/myColor_green"android:padding="8dp"><TextViewandroid:id="@+id/home_tv_qrcode"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:background="@drawable/qr_code"/><TextViewandroid:id="@+id/home_tv_category"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:background="@drawable/category"/><TextViewandroid:id="@+id/home_tv_search"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_toLeftOf="@id/home_tv_category"android:layout_toRightOf="@id/home_tv_qrcode"android:background="@drawable/bg_home_edittext"android:gravity="center"android:padding="6dp"android:text="@string/text_tv_search"android:textColor="@color/black_cdcdcd"android:textSize="16sp"/></RelativeLayout><!--tablayout的背景颜色: android:background="#38B059"--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayoutandroid:background="@color/colorPrimary"android:id="@+id/home_tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabIndicatorColor="@color/myColor_green"app:tabMode="scrollable"app:tabSelectedTextColor="@color/myColor_green"app:tabTextColor="@color/pale_black"/><android.support.v4.view.ViewPagerandroid:id="@+id/home_viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/></LinearLayout></LinearLayout><!--设置fab的背景颜色app:backgroundTint="@color/myColor_green"--><android.support.design.widget.FloatingActionButtonandroid:id="@+id/home_fabtn_settings"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_marginBottom="@dimen/size_dp14"android:layout_marginRight="@dimen/size_dp14"android:src="@drawable/icon_setting"app:backgroundTint="@color/myColor_green"app:rippleColor="@color/colorAccent"/>
</RelativeLayout>3)关于Tablayout的几个属性
background: 设置背景图，示例为#38B059
tabTextColor: tab 的字体颜色，示例为#7D&D&D
tabSelectedTextColor: tab 选中时候的字体颜色
tabMode: tab 的模式，有两种。fixed 为固定模式，scrollable 为可滚动模式
程序代码实现
1)HomeUI.java的所有代码
public class HomeUI extends BaseActivity implements View.OnClickListener {private TabLayout mTabLayout;private ViewPager mViewPager;private FloatingActionButton mFabtnSettings;//悬浮按钮/*** title list*/private List<String> mTitleLists;/*** fragment list*/private List<Fragment> mFragLists;private TextView mQrCode;//二维码@Overrideprotected void setContentView() {setContentView(R.layout.ui_home);//changeStatusBarColor(R.color.myColor_green);//隐藏actionbargetSupportActionBar().hide();}@Overrideprotected void initView() {mTabLayout = (TabLayout) findViewById(R.id.home_tablayout);mViewPager = (ViewPager) findViewById(R.id.home_viewpager);mFabtnSettings = (FloatingActionButton) findViewById(R.id.home_fabtn_settings);mQrCode = (TextView) findViewById(R.id.home_tv_qrcode);}@Overrideprotected void initData() {//默认隐藏mFabtnSettings.setVisibility(ViewPager.GONE);//去掉阴影getSupportActionBar().setElevation(0);mTitleLists = new ArrayList<>();mTitleLists.add("语音助手");mTitleLists.add("微信精选");mTitleLists.add("视频推荐");mTitleLists.add("创意商品");mTitleLists.add("个人中心");mFragLists = new ArrayList<>();mFragLists.add(new HelperFrag());mFragLists.add(new WechatFrag());mFragLists.add(new VideoFrag());mFragLists.add(new GoodsFrag());mFragLists.add(new UserFrag());//viewpager预加载mViewPager.setOffscreenPageLimit(mFragLists.size());//监听ViewPagermViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {//在第一个ViewPager中隐藏，其他页面显示mFabtnSettings.setVisibility((position == 0) ? ViewPager.GONE : ViewPager.VISIBLE);}@Overridepublic void onPageScrollStateChanged(int state) {}});//设置适配器mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {//返回当前位置的页面return mFragLists.get(position);}@Overridepublic int getCount() {//总的页面数return mFragLists.size();}@Overridepublic CharSequence getPageTitle(int position) {//每个item的titlereturn mTitleLists.get(position);}});/*** 绑定*/mTabLayout.setupWithViewPager(mViewPager);//跳转到悬浮按钮设置界面mFabtnSettings.setOnClickListener(this);//跳转到扫码页面mQrCode.setOnClickListener(this);}@Overrideprotected void showBackKey() {//主页不显示返回的按钮//super.showBackKey();}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.home_fabtn_settings:IntentUtils.startActivity(this, UserSettingUI.class);showNext();break;default:break;}}}2)HomeUI继承自BaseActivity,BaseActivity是自定义的Activity基类,继承自该基类的Activity默认就要实现setContentView() initView() initData()三个方法,作用分别为加载布局文件 获取id 初始化一些数据.
3)标题与需要绑定的Fragment最好是用一个JavaBean来封装数据,如FragmentInfo.java,如下:
public class FragmentInfo {private String title;private Class fragment;public FragmentInfo(String title, Class fragment) {this.title = title;this.fragment = fragment;}//setter与getter方法省略
}本文为了方便,分别用集合来存标题和Fragment实例,如下:
mTitleLists = new ArrayList<>();mTitleLists.add("语音助手");mTitleLists.add("微信精选");mTitleLists.add("视频推荐");mTitleLists.add("创意商品");mTitleLists.add("个人中心");mFragLists = new ArrayList<>();mFragLists.add(new HelperFrag());mFragLists.add(new WechatFrag());mFragLists.add(new VideoFrag());mFragLists.add(new GoodsFrag());mFragLists.add(new UserFrag());
4)为了提高效率,进行了ViewPager的预加载.
mViewPager.setOffscreenPageLimit(mFragLists.size());5)实际开发中最好另外写一个适配器类,将代码分析,而不是通过匿名内部类的方式
//设置适配器mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {//返回当前位置的页面return mFragLists.get(position);}@Overridepublic int getCount() {//总的页面数return mFragLists.size();}@Overridepublic CharSequence getPageTitle(int position) {//每个item的titlereturn mTitleLists.get(position);}});
6)接下来就是Tablayout绑定ViewPager了
/*** 绑定*/mTabLayout.setupWithViewPager(mViewPager);三,效果图
效果图如下,可以自然的滑动滑动切换页面哦,个人感觉还不错!嘻嘻!
Android进阶之利用Tablayout+ViewPager+Fragment实现神奇的滑动效果相关推荐
- SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+RecyclerView 刷新，不能滑动等问题
使用SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment+RecyclerView 实现首页悬浮 ...
- Android实现一个简易的新闻列表APP（TabLayout+ViewPager+Fragment）
Android实现一个简易的新闻列表APP(TabLayout+ViewPager+Fragment) 文章目录 Android实现一个简易的新闻列表APP(TabLayout+ViewPager+F ...
- TabLayout+ViewPager+Fragment实现切页展示
写在前面 目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验,最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式,最近在公司项目中 ...
- TabLayout+Viewpager+Fragment实现分页滚动
效果如上,顶部标签滚动底下的页面也跟着滚动 灰色的标签只是一个recyclerview装起来的 这里用TabLayout+Viewpager+Fragment实现 先看布局 <?xml vers ...
- TabLayout+ViewPager+Fragment(内部:TabLayout+ViewPager+ Fragment)需要注意！！
之前面试的时候,被面试官问道ViewPager嵌套ViewPager怎么处理的.我还一直在回答用最外层的vp的onInterceptTouchEvent来处理怎样怎样(注意是代码没有写过,就这样说了. ...
- 使用TabLayout+ViewPager+Fragment实现切页展示
使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式,本例是在fragment中实现主要代码 步骤: 1,定义TabLayout和ViewPager的布局 2,实 ...
- 小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
昨夜西风凋碧树,独上高楼,望尽天涯路. 今天难得有时间,准备写一写我们在APP中经常用到的页面形式,废话不多说,直接一张图看看页面效果你就知道为啥是常用的页面形式.先看看逻辑和最后的效果是怎么样的: ...
- TabLayout+ViewPager+Fragment中Fragment的可见和不可见问题
场景 TabLayout+ViewPager+Fragment的使用过程中需要判断Fragment是否对用户可见,监听Fragment由不可见变为可见的事件 解决方案 重写Fragment的setUs ...
- Tablayout+ViewPager+Fragment 实现页面切换
项目也快上线了,就来总结下Tablayout+ViewPager+Fragment 的使用啦 主activity public class DoSomethingAct extends BaseAct ...
- android左右滑动fragment,Android基于ViewPager+Fragment实现左右滑屏效果的方法
本文实例讲述了Android基于ViewPager+Fragment实现左右滑屏效果的方法.分享给大家供大家参考,具体如下: 1.xml布局模板 android:id="@+id/local ...
最新文章
- UI设计培训分享：ui的字体怎么正确设置?
- 30分钟从工作电脑入侵公司内网！Win11：更新强制要求有TPM2.0，知道为啥了吧？...
- 「测评」酷炫“霸王龙”Miposaur机器人测评
- Linux文件系统目录
- 【Android】Android程序自己主动更新
- 王爽 汇编语言第三版 第7章 --- 更灵活的定位内存地址的方法（可以理解为 数组形式的内存定位）
- 退出所有循环_Python学习之路9—循环的总结
- Smokeping的参数使用说明
- linux中脚本循环语句,Shell脚本循环语句
- 群同态基本定理证明_自由群的定义及相关
- 生成式模型（generative） vs 判别式模型（discriminative）
- coreldraw sp2精简版 x4_CorelDRAW X4下载-CorelDRAW X4 SP2 精简版_Win10镜像官网
- echart的基本使用方法
- 形式化方法 Assignment 4: Proof for predicate logic
- zabbix web监控 一： zabbix3.2添加web页面监控（Web monitoring）
- ES学习构建EKL海量日志分析平台
- python3.9安装numpy+mky_各种转码（bytes、string、base64、numpy array、io、BufferedReader ）...
- ES中如何实现随机抽样查询
- ZOOM一直显示登录失败，出现Zoom登录失败：100000503，zoom登录失败错误代码1044
- ROsalind 014 Finding a Shared Motif