android 局部tab页,安卓TabLayout+ViewPager实现切页
安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换
可自定义菜单栏是在顶部还是在底部
一、实现效果:
二、实现过程:
2.1 一些重要的设置
添加必须依赖:
因为需要使用:import android.support.design.widget.TabLayout;,所以必须添加下列依赖compile 'com.android.support:design:23.3.0'
主布局文件编写:
顶部或者底部显示,只要更改ViewPager和TabLayout排列顺序即可
1 <?xml version="1.0" encoding="utf-8"?> 2 13 14 20 33 34 46
2.2 仅字符菜单栏显示实现:
未加入图片显示,实现较为简单
基本逻辑代码:
每个界面使用不同的fragment,进行一 一对应
1 import android.support.design.widget.TabLayout; 2 public class MainActivity extends AppCompatActivity { 3 private ViewPager viewPager; 4 private TabLayout tabLayout; 5 @Override 6 protected void onCreate(Bundle savedInstanceState) { 7 super.onCreate(savedInstanceState); 8 setContentView(R.layout.activity_main); 9 10 11 tabLayout = (TabLayout) findViewById(R.id.tabs2);12 viewPager = (ViewPager) findViewById(R.id.viewpager);13 14 //设置界面文件和文字一一对应15 final Fragment[] fragments = {new Fragment0(), new Fragment1(), new Fragment2()};16 final String[] titles = {"界面1", "界面2", "界面3"};17 18 //添加tablayout中的竖线,每一项的中间分隔线19 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);20 // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);21 // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg));22 23 //每项只进入一次24 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {25 @Override26 public Fragment getItem(int position) {27 return fragments[position];28 }29 @Override30 public int getCount() {31 return fragments.length;32 }33 34 @Override35 public CharSequence getPageTitle(int position) {36 return titles[position];37 }38 });39 40 tabLayout.setupWithViewPager(viewPager);41 tabLayout.getTabAt(1).select();//设置第一个为选中42 }43 }
2.3 字符和图片菜单栏实现
图片加汉字菜单栏,菜单栏每项都是一个视图可以自定义设计
菜单栏每项的布局文件设计:
一个图片显示和一个文字显示,定义为垂直布局,其中android:layout_gravity="center"是把控件居中,这里不写,在菜单栏显示时可能会出现错位
1 <?xml version="1.0" encoding="utf-8"?> 2 8 14 20
主布局文件更改:
在主布局文件的更改android:layout_height="70dp",表示其菜单栏的高度改变。
定义必要的类变量:
1 private ViewPager viewPager; 2 private TabLayout tabLayout; 3 //设置界面文件和文字一一对应 4 private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()}; 5 private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"}; 6 //未选中图片 7 private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4}; 8 //选中图片 9 private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};10 //配置默认选中第几项11 private int ItemWhat=1;
数据初始化及基本界面加载:
1 //只进入一次,初始化 2 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { 3 @Override 4 public Fragment getItem(int position) { 5 return Lfragments[position]; 6 } 7 @Override 8 public int getCount() { 9 return Lfragments.length;10 }11 12 @Override13 public CharSequence getPageTitle(int position) {14 return Ltitles[position];15 }16 });17 18 //绑定19 tabLayout.setupWithViewPager(viewPager);20 21 //设置默认选中页,宏定义22 tabLayout.getTabAt(ItemWhat).select();23 viewPager.setOffscreenPageLimit(3); //设置向左和向右都缓存的页面个数24 //初始化菜单栏显示25 for (int i = 0; i
监听选择事件:
1 //是否选中监听 2 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 3 @Override 4 public void onTabSelected(TabLayout.Tab tab) { 5 //选中时进入,改变样式 6 ItemSelect(tab); 7 //onTabselected方法里面调用了viewPager的setCurrentItem 所以要想自定义OnTabSelectedListener,也加上mViewPager.setCurrentItem(tab.getPosition())就可以了 8 viewPager.setCurrentItem(tab.getPosition()); 9 }10 11 @Override12 public void onTabUnselected(TabLayout.Tab tab) {13 //未选中进入,改变样式14 ItemNoSelect(tab);15 16 }17 18 @Override19 public void onTabReselected(TabLayout.Tab tab) {20 //重新选中21 22 }23 });
选中和非选中,更改其中显示样式:
1 //某个项选中,改变其样式 2 private void ItemSelect(TabLayout.Tab tab) { 3 View customView = tab.getCustomView(); 4 TextView tabText = (TextView) customView.findViewById(R.id.item_text); 5 ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img); 6 tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed)); 7 String stitle = tabText.getText().toString(); 8 for(int i=0;i
整体代码:
1 import android.support.design.widget.TabLayout; 2 public class MainActivity extends AppCompatActivity { 3 private ViewPager viewPager; 4 private TabLayout tabLayout; 5 //设置界面文件和文字一一对应 6 private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()}; 7 private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"}; 8 //未选中图片 9 private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4}; 10 //选中图片 11 private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4}; 12 //配置默认选中第几项 13 private int ItemWhat=1; 14 @Override 15 protected void onCreate(Bundle savedInstanceState) { 16 super.onCreate(savedInstanceState); 17 setContentView(R.layout.activity_main); 18 19 //找控件 20 tabLayout = (TabLayout) findViewById(R.id.tabs2); 21 viewPager = (ViewPager) findViewById(R.id.viewpager); 22 23 //添加tablayout中的竖线,每一项的中间分隔线 24 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); 25 // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 26 // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg)); 27 28 //只进入一次,初始化 29 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { 30 @Override 31 public Fragment getItem(int position) { 32 return Lfragments[position]; 33 } 34 @Override 35 public int getCount() { 36 return Lfragments.length; 37 } 38 39 @Override 40 public CharSequence getPageTitle(int position) { 41 return Ltitles[position]; 42 } 43 }); 44 45 //绑定 46 tabLayout.setupWithViewPager(viewPager); 47 48 //设置默认选中页,宏定义 49 tabLayout.getTabAt(ItemWhat).select(); 50 viewPager.setOffscreenPageLimit(3); //设置向左和向右都缓存的页面个数 51 //初始化菜单栏显示 52 for (int i = 0; i
作者:东小东
android 局部tab页,安卓TabLayout+ViewPager实现切页相关推荐
- 安卓TabLayout+ViewPager实现切页
安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是在顶部还是在底部 一.实现效果: 二.实现过程: 2.1 一些重要 ...
- android fragment实现翻书效果,viewpager实现翻页效果(fragment)
viewpager的运用核心在于适配器的编写,及最终的setadapter(adapter) 谷歌官方认为,ViewPager应该和Fragment一起使用时,此时ViewPager的适配器是Frag ...
- Android Material Design 系列之 BottomNavigationView + ViewPager + Fragment + BadgeView 开发详解
前言 BottomNavigationView 是 Material Design 提供的一个标准底部导航栏的实现,可以轻松的实现导航栏菜单之间的切换与浏览.底部导航使用户更方便的查看和切换最高层级的 ...
- Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变)
文章目录 GitHub:https://github.com/AnJiaoDe/TabLayoutNiubility 该轮子特异功能如下: 使用方法 注意:该轮子适用于androidx中的ViewPa ...
- android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果
原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout . 其实TabLayout实现切换效果还是蛮简单的,跟tabpag ...
- Android实现一个简易的新闻列表APP(TabLayout+ViewPager+Fragment)
Android实现一个简易的新闻列表APP(TabLayout+ViewPager+Fragment) 文章目录 Android实现一个简易的新闻列表APP(TabLayout+ViewPager+F ...
- 011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)
1.TabLayout介绍 TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,简书,知乎等.TabLayout就可以很好的完成这一职责,首先TabLay ...
- TabLayout+ViewPager+Fragment实现切页展示
写在前面 目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验,最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式,最近在公司项目中 ...
- 使用TabLayout+ViewPager+Fragment实现切页展示
使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式,本例是在fragment中实现主要代码 步骤: 1,定义TabLayout和ViewPager的布局 2,实 ...
最新文章
- 智能物联网(AIoT,2020年)(下)
- IOS UIWebView引用外部CSS样式(转载)
- Robot Cleaner I
- putty串口打开没反应_如何使用树莓派快速搭建一个串口数据记录器?
- OnClientClick和OnClick同时使用!
- canva画图 图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...
- 【LeetCode】剑指 Offer 11. 旋转数组的最小数字
- 小米Civi 1S获美女产品经理确认:依旧是最美小米机型
- python-按照相同的顺序打乱
- python学习笔记(二十七)多线程与多进程
- 使用cmd命令 ping网段内的使用的IP并输出到文件
- 服务器端 viewstate
- Java速成:Boot入门
- java用于输入输出流的类_java输入输出流
- 宽度学习与深度学习中的时空转化问题
- 【2022西电A测】温度检测控制仿真系统
- Native开发工具之静态库和动态库(二,小码农也有大梦想
- NPM js 包管理器介绍
- 安卓软件开发你知道需要学什么吗,看这里?
- 这样做老板,企业才发展!
热门文章
- 怎样做中长线股票,中长线炒股技巧有哪些?
- python replace函数 成功 失败_解决python replace函数替换无效问题
- 最严“22条措施”打击市场乱象 云南旅游“浴火重生”
- 《A Survey on Transfer Learning》迁移学习研究综述 翻译
- JAVA名片注册_JavaWeb练习-网上名片管理系统
- 一个Roguelike类型H5游戏的服务器开发——成就系统
- css:overflow-x: overlay火狐浏览器不生效没有滚动条出现
- macd 公式 java_EMA指标和MACD指标的JAVA语言实现 | 学步园
- 80端口web服务攻击痕迹
- php 解析pathinfo 类