android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果(微信和QQ底部多标签切换)...
前言
之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋。这次改用ViewPager+TabLayout 实现联动的效果。
实现效果
ViewPager 多个页面滑动
TabLayout 和 ViewPager绑定,实现Fragment和标签绑定
TabLayout的自定义标签以及选中颜色改变
效果图
效果图
思路分析
ViewPager用来放Fragment,并且实现滑动的效果。(原谅我最近才知道这个控件,所以才会有上一篇用Fragment+Button来实现切换。PS:经常百度copy的后遗症┗( T﹏T )┛)
TabLayout 用来放Fragment对应标题。标题只是文字话,需要重写FragmentPagerAdapter的getPageTitle()方法来获取标题,如果要用图标或者复杂的标题可以用TabLayout的setCustomView()将自定义控件放入Tab中。
通过TabLayout的setupWithViewPager()方法来实现TabLayout和ViewPager联动。
布局文件
activity_tab_layout_custom_title.xml
主界面布局文件包含一个ViewPager和一个TabLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#FFFFFF"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/contextViewPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="58dp"
app:tabMinWidth="80dp"
app:tabIndicatorColor="#00000000"
android:background="#FBFBFB"
app:tabMode="scrollable"
android:orientation="horizontal">
cust_tab_title.xml
自定义Tab标题的布局文件包含一个ImageView和一个TextView(图标和文本)。
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
android:id="@+id/tabIcon"
android:layout_width="32dp"
android:layout_height="32dp"/>
android:id="@+id/tabTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
接下来是代码
TabLayoutCustomTitleActivity.java
主Activity文件
import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import csl.com.fa.adapter.TabLayoutCustomTitleAdapter;
import csl.com.fa.fragment.ContextFragment;
/**
* TabLaytou和ViewPager联动,自定义标题(icon+文字)
*/
public class TabLayoutCustomTitleActivity extends AppCompatActivity {
private String[] titleTexts = new String[]{"微信", "通信录", "发现", "我", "QQ", "好友", "黑名单", "特别关心", "朋友圈"};// 标签标题数组
private int[] titleIcons = new int[]{R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,
R.drawable.tongxunlu, R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,
R.drawable.tongxunlu,R.drawable.weixin};// 标签图标数组
private TabLayout tabLayout;// tabLayout
private List fragmentList;// Fragment集合
private ViewPager viewPager;// ViewPager
private TabLayoutCustomTitleAdapter adapter;
private final int TAB_SELECT_COLOR = Color.argb(255,72,193,30);// tab选中状态颜色
private final int TAB_UN_SELECT_COLOR = Color.argb(255,175,175,175);// tab非选中状态颜色
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout_custom_title);
// 初始化控件
init();
}
/**
* 初始化控件
*/
private void init() {
fragmentList = new ArrayList<>();
// 根据标题的数量,动态创建Fragment,并将其动态加入Fragment集合
for (String title : titleTexts) {
// 声明一个Fragment
ContextFragment contextFragment = new ContextFragment();
// 声明一个Bundle用来初始化Fragment中TextView控件的文本信息
Bundle bundle = new Bundle();
bundle.putString("textValue", title);
// 将Bundle装入Fragment
contextFragment.setArguments(bundle);
// 将Fragment加入Fragment集合
fragmentList.add(contextFragment);
}
// 将Fragment集合装入适配器
adapter = new TabLayoutCustomTitleAdapter(getSupportFragmentManager(), fragmentList);
// 初始化ViewPager
viewPager = findViewById(R.id.contextViewPager);
// 将适配器绑定到ViewPager
viewPager.setAdapter(adapter);
// 默认第一个页面
viewPager.setCurrentItem(0);
// 初始化TabLayout
tabLayout = findViewById(R.id.tabLayout);
// 将TabLayout与ViewPager绑定,实现TabLayout与ViewPager联动
tabLayout.setupWithViewPager(viewPager);
// 自定义tab标签(这里主要是自定义控件,图标+标题)
// 如果不需要自定义标签,只需要显示文本,则可以直接通过FragmentPagerAdapter的getPageTitle()方法返回标签的值
setTabCustomView();
}
/**
* 自定义tab标签(这里主要是自定义控件,图标+标题)
*/
private void setTabCustomView() {
// 遍历tab标签页标题数组,自定义tab显示
for (int i=0, len=titleTexts.length; i
// 自定义控件布局 cust_tab_title(icon+文本)
View v = LayoutInflater.from(this).inflate(R.layout.cust_tab_title, null);
// 设置文本信息和颜色
TextView textView = v.findViewById(R.id.tabTitle);
textView.setText(titleTexts[i]);
textView.setTextColor(TAB_UN_SELECT_COLOR);
// 设置图片
ImageView imageView = v.findViewById(R.id.tabIcon);
imageView.setImageDrawable(getResources().getDrawable(titleIcons[i]));
imageView.setColorFilter(TAB_UN_SELECT_COLOR);
// 将自定义控件加入到tab中
tabLayout.getTabAt(i).setCustomView(v);
}
// 将第一个标签页颜色调整为被选中的颜色
changeTabColor(tabLayout.getTabAt(0), TAB_SELECT_COLOR);
// 加入监听
tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 将tab调整为选中的颜色
changeTabColor(tab, TAB_SELECT_COLOR);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// 将tab调整为非选中的颜色
changeTabColor(tab, TAB_UN_SELECT_COLOR);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
/**
* 改变Tab控件的颜色
* @param tab
* @param color
*/
private void changeTabColor(TabLayout.Tab tab, int color) {
// 改变文本颜色
TextView textView = tab.getCustomView().findViewById(R.id.tabTitle);
textView.setTextColor(color);
// 改变图标颜色
ImageView imageView = tab.getCustomView().findViewById(R.id.tabIcon);
imageView.setColorFilter(color);
}
}
TabLayoutCustomTitleAdapter.java
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
public class TabLayoutCustomTitleAdapter extends FragmentPagerAdapter {
private List mFragmentList;
public TabLayoutCustomTitleAdapter(FragmentManager fragmentManager, List fragmentList) {
super(fragmentManager);
this.mFragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
/**
* TabLayout通过该方法,获取tab的标题title
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return mFragmentList.get(position).getArguments().getString("textValue");
}
}
总结
嗯,比上次做的那个好看多了,但是感觉这次写的说明的比较不详细,但是又不知道怎么写。。下次想到了再做补充吧。有不清楚的可以留言或者发我邮箱(466120367@qq.com)。
后续会把demo放到git上,以后会养成分享的好习惯,希望大家多多指教。
android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果(微信和QQ底部多标签切换)...相关推荐
- Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变)
文章目录 GitHub:https://github.com/AnJiaoDe/TabLayoutNiubility 该轮子特异功能如下: 使用方法 注意:该轮子适用于androidx中的ViewPa ...
- Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果
本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下 先放一张效果图: 想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性 ...
- android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果 发布时间:2020-10-09 19:48:00 来源:脚本之家 阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
- Android Tab大总结 Fragment+TabPageIndicator+ViewPager
2019独角兽企业重金招聘Python工程师标准>>> 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740 ...
- android 指示器平移动画,Android实现带指示器的自动轮播式ViewPager
前言 最近在做项目的时候,有个需求就是实现自动轮播式的ViewPager,最直观的例子就是知乎日报顶部的ViewPager,它内部有着好几个子view,每个一段时间便自动滑动到下一个item view ...
- android仿微信的activity平滑水平切换动画,Android实现平滑翻动效果
本文实例为大家分享了Android实现平滑翻动效果的具体代码,供大家参考,具体内容如下 效果 1.activity加implements implements GestureDetector.OnGe ...
- android横竖屏切换动画,Android应用怎么实现屏幕横竖屏切换功能
Android应用怎么实现屏幕横竖屏切换功能 发布时间:2020-11-26 15:48:57 来源:亿速云 阅读:121 作者:Leah Android应用怎么实现屏幕横竖屏切换功能?针对这个问题, ...
- android仿微信的activity平滑水平切换动画,android仿微信的activity平滑水平切换动画...
大家好,下面我们来探讨一下微信界面跳转的动画,简单,大方,不失华丽:overridePendingTransition(android.R.anim.slide_in_left,android.R.a ...
- android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果(背景动画、透明+沉浸式状态栏、渐变效果)...
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
最新文章
- 把python语言翻译出来_Python语言实现翻译小工具(Python打包成exe文件)
- Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决...
- CVPR2019 日程安排
- css 倒三角_改善CSS的10种最佳做法
- 指针是c语言的灵魂,C语言之灵魂 指针学习
- html记仇表情包源码,写小本本记仇表情包
- cmake之交叉编译arm32/arm64(四)
- 玛雅Maya 2022 for Mac(三维动画制作软件)
- [PYTHON] 核心编程笔记(11.Python函数和函数式编程)
- Win7下PDF文件无法显示缩略图的解决方法
- Github上找到开源的《植物大战僵尸》代码分享~
- EFR32 晶振电容设置
- PHP 报错 Resource temporarily unavailable 无法删除上传的资源
- 放生主要体现在对生命尊严的维护
- Unable to find script library '/aspnet_client/system-web/1-1-4322/webvalidation.js'
- php 浏览器打开excel文件夹里,php网页显示excel表格数据-phpexcel 读取excel里的数据并在页面显示出来...
- MIUI10自助更换主题和字体
- 携程到底有没有大数据杀熟?!
- pandas 数据怎样实现行间计算
- 知+付费推广:我花3W烧出来的投放经验