AndroidAPP顶部导航栏Tab点击和左右滑动实现切换界面

最新推荐文章于 2024-04-11 22:08:36 发布
VIP文章 最新推荐文章于 2024-04-11 22:08:36 发布
阅读量7.8k 收藏 47
点赞数 2
分类专栏： Android 文章标签： APP顶部 顶部导航栏 Tab 导航栏 TabLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5061/article/details/82681836
版权

 

APP市场中大多数资讯App都有导航菜单，导航菜单是一组标签的集合，在新闻APP中，每个标签标示一个类别，对应下面ViewPager控件的一个分页面。

随着版本迭代的更新，带来了许多控件，案例主要用到了TabLayout，ViewPage，RecyclerView，CardView等新控件。

效果如图：

 

以前的实现方法是 ：ViewPagerIndicator + Fragment + ViewPager 相结合来实现

请看博客： ViewPagerIndicator实现新闻App导航栏。

今天主要讲的是另一种实现方式：TabLayout+ Fragment + ViewPager

 

添加程序所需要的依赖：

 

 compile 'com.android.support:design:23.2.1'
 compile 'com.android.support:recyclerview-v7:23.1.1'
 compile 'com.android.support:cardview-v7:23.2.1'


主布局

 

 

<?xml version="1.0
最低0.47元/天 解锁文章
iteye_5061
关注
  • 2
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现顶部导航菜单左右滑动效果
09-02
主要为大家详细介绍了Android实现顶部导航菜单左右滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android开发使用TabLayout+ViewPager+Fragment实现导航栏滑动切换不同内容
ThereIsNoCode
10-14 5756
我对这三个组件的理解我对这三个组件的理解 最终要实现的效果是可以通过屏幕的左右滑动，切换导航栏，同时也能点击导航栏切换不同的页面。截图： 我的理解：Tablayout组件就是顶部导航栏的部分，ViewPager是页面中除了导航栏以外的部分，即展示内容的部分，而Fragment(碎片)就是来处理这部分数据填充的工具，换言之就是用fragment来设置每个标签下显示的内容是什么。 实现过程 看...
android viewswitcher分屏显示仿launcher系统界面实现左右滑动效果
安卓兼职framework和app工程师的博客
11-21 598
ViewSwitcher代表了视图切换组件, 本身继承了FrameLayout ,可以将多个View叠在一起 ,每次只显示一个组件.当程序控制从一个View切换到另个View时,ViewSwitcher 支持指定动画效果. 为了给ViewSwitcher 添加多个组件, 一般通过ViewSwitcher 的setFactory 方法为止设置ViewFactory ,并由ViewFactory为之创...
应用从后台切换到前台时，默认跳转到主页的问题
学无止境
12-11 3749
应用从后台切换到前台时，有时候会出现已打开的页面被关闭了，自动跳转到主页面，这个问题的解决方法是，把主页的启动模式改成标准模式就可以了
GridView删除，更新后不能立刻刷新的问题解决方案
学无紫晶
03-12 2974
          最近写个网站程序的时候，GridView删除，或者插入之后，不能立刻刷新数据，哪怕是做了数据的重新绑定还是不行。再网上搜了好多，都说是要把数据库的连接关闭。 后来我看了下我的数据访问层的类，数据更新后，都没有立刻关闭连接。关闭连接后，再绑定数据，就会看到刷新后的数据了。
使用 C# 和 Mono 开发跨平台应用程序的用户界面（UI）
最新发布
csdn_ad986ad的博客
04-11 374
总体来说，这些框架都有各自的优缺点，选择哪个框架取决于你的需求和个人偏好。如果你只需要在Windows上开发，可以考虑使用WinForms。跨平台支持，可以在Linux、Windows和MacOS上使用。跨平台支持，可以在Linux、Windows和MacOS上使用。跨平台支持，可以在Linux、Windows和MacOS上使用。提供了一套现代化的控件和布局系统。提供了一套现代化的控件和布局系统。社区相对较小，文档和示例相对较少。社区相对较小，文档和示例相对较少。控件和布局系统相对较为陈旧。
Android Studio之 更改背景颜色及主题样式
夏轩00的博客
05-27 5222
1.其实今天写这篇博客也是一时兴起，哈哈，也不是啥新技术，感兴趣的朋友可以看一下，好了 废话不多说。设置步骤： 1.打开android studio工具点击File->Settings打开设置选项，找到Plugins，选择Browse repositories 2.找到Sexy Editor，并点击右侧下载，下载完成后重启Android studio。 3.重启完之后点开[File]–
用kotlin写一个按钮的点击事件，让两张图片轮换
jintingbo的专栏
05-27 1551
废话不说，直接上干货： 开发工具：Android Studio 4.1.3 开发语言：kotlin 重要的话写在前面： 要做两张或多张图片轮流交换，必须要得到图片的id号，而这个正在显示的图片的id号是不好直接得到的， 但可以使用getTag()得到。 以下程序就是通过这个“窍门” 弄出的结果 ：） 第一步：准备两张图片jpg或png都可以，文件名为ab1.jpg和ab2.jpg 第二步：新建一个新的Android新工程，在编程环境下，将这两张图片拷贝粘贴到drawable资源目录下。 .
android 多窗口见左右滑动,android实现多界面左右滑动切换
weixin_42345036的博客
05-26 2083
源博文链接：http://blog.sina.com.cn/s/blog_a69672d901017nox.html一、实现多面界面滑动切换方法有多种，就目前我所知道的大致有三种：1.ViewFlipper+Animation：2.ViewGroup+Scroller+VelocityTracker3.ViewPager本文主要介绍第三种ViewPager实现方式二、ViewPager...
android实现左右滑动切换界面的效果
mmdev
04-19 1367
布局文件 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layContain" android:layout_width="fill_paren
Android之新闻客服端顶部导航栏Tab点击和左右滑动实现切换界面
02-16
APP市场中大多数新闻App都有导航菜单，随着版本迭代的更新，带来了许多控件，使用新控件让你更方便实现导航栏。 博客地址：http://blog.csdn.net/dickyqie/article/details/55253562
Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)
08-31
主要介绍了 Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网),非常不错，具有参考借鉴价值，需要的朋友可以参考下
前端汇总（转载）
yuanbotao219的博客
01-14 7411
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
Android Studio详细安装流程和配置、主题
OCNYang
08-17 2143
Android Studio详细安装流程和配置、主题 在这里先给大家一张我的Android studio的外观截图： 1、Android Studio安装 Android studio下载地址： 官方下载地址（版本最新/需爬墙）：https://developer.android.com/studio/index.html Android Studio 中文社区：http://ww
Kotlin学习日志（一）TextView、Button、Toast的使用
晨曦
02-11 3260
在Android Studio 中使用Kotlin编写TextView、Button、Toast 介绍的话我就不说了，可以看我的第一篇关于Kotlin的文章，讲了为什么要用Kotlin的原因,进入正题，我们现在已经重新创建了一个Kotlin的项目，我在activity_main.xml文件中放了一个id为tv_hello的TextView和一个id为btn_test的Button, 然后在Main...
android-使用ViewGroup实现左右滑动切换界面以及界面裂开的效果
Central-Perk的专栏
03-15 4621
效果图：         源码下载：http://download.csdn.net/detail/centralperk/5142933   关于ViewGroup的一点介绍： 这里有个地方要注意，那就要明白ViewGroup的绘图流程：ViewGroup绘制包括两个步骤：1.measure 2.layout 在两个步骤中分别调用回调函数：1.onMeasure()   2.
Android 界面左右滑动切换
Scxioi0的博客
05-05 7702
Android 界面左右滑动切换 1.界面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientat
android新闻顶部标签栏,Android--------TabLayout实现新闻客户端顶部导航栏
weixin_39900180的博客
05-26 592
APP市场中大多数新闻App都有导航菜单，导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面，今日头条， 网易新闻等。随着版本迭代的更新，带来了许多控件，案例主要用到了TabLayout，ViewPage，RecyclerView，CardView等新控件。 效果如图： 以前的实现方法是 ：ViewPagerIndicator + Fra...
view pager2怎么实现顶部导航栏的左右滑动
03-23
View Pager2 可以通过使用 TabLayout 实现顶部导航栏的左右滑动。具体实现方式如下： 1. 在 XML 布局文件中添加 TabLayout 和 ViewPager2： ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabGravity="fill"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 2. 在代码中设置 ViewPager2 的 Adapter 和 TabLayout 的 Tab： ``` // 设置 ViewPager2 的 Adapter ViewPager2 viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new MyPagerAdapter(this)); // 设置 TabLayout 的 Tab TabLayout tabLayout = findViewById(R.id.tab_layout); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` 其中，MyPagerAdapter 是自定义的 ViewPager2 Adapter，TabLayoutMediator 是用于将 TabLayout 和 ViewPager2 关联起来的辅助类。 通过以上步骤，就可以实现顶部导航栏的左右滑动了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值