Android 使用TabLayout打造滑动标签栏

最新推荐文章于 2022-01-18 14:34:56 发布
最新推荐文章于 2022-01-18 14:34:56 发布
阅读量1.8w 收藏 10
点赞数 3
分类专栏： ui android-ui 文章标签： android TabLayout 标签栏 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l403040463/article/details/79187870
版权

滑动标签栏在App中很常见，以前自己试着实现了一个，使用HorizontalScrollView以及跟ViewPager的，现在有了TabLayout方便了很多，先上效果图，UI略丑，别介意哈~ PS:最下方有源码链接



<script type="math/tex" id="MathJax-Element-1"> </script>
效果图

废话不说，直接上代码！

**

一、添加依赖

implementation 'com.android.support:design:27.0.2'

二、布局文件activity_tablayout.xml

只有一个TabLayout和ViewPager而已

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height=
最低0.47元/天 解锁文章
大笨鸟飞快点
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android控件-TabLayout使用介绍(1)
2301_79600088的博客
05-04 1022
在技术领域内，没有任何一门课程可以让你学完后一劳永逸，再好的课程也只能是“师傅领进门，修行靠个人”。“学无止境”这句话，在任何技术领域，都不只是良好的习惯，更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。如果你觉得自己学习效率低，缺乏正确的指导，可以一起学习交流！加入我们吧！群内有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。
Android之TabLayout
迷茫的小亮仔的博客
07-27 381
android中TabLayut到底是个什么鬼？今天我们来看一下，起初，我听见这个名字的时候我总觉得这不是五大布局里的表格布局嘛，现在想想真是有点可笑，下面我们来了解一下它吧！在2015年的google大会上，google发布了新的Android Support Design库，TabLayout是属于Android Design Support Library中的一个控件，顶部或者底部水平的Tab
Android 渐变的‘TabLayout’ , (含免费( java / kotlin) Demo)
高级开发者进阶ing... QaQ
08-11 1625
⚠️ : 本篇‘由简入奢’,全是干货!绘制文字 先来看看完成的效果: 简单解释: 在滑动的过程中,渐变文字会随着ViewPager的滑动而变化!! 绘制文字 先来看看最初版代码: public class GradualChangeTv extends AppCompatTextView { public Paint mPaint = new Paint(); public final String text = "android 超级兵"; public GradualCh
Android 使用TabLayout实现可水平滑动的标签选择布局
u010231454的专栏
09-05 6060
一说到标签布局，一般都会想到是流式布局FlowLayout，流式布局网上有太多的demo可参考了，但是今天产品上有个横向水平滑动的标签布局，有选中和未选中的状态，并且初始状态是不选中任何一个标签。折腾了一番，最终在TabLayout上修饰了一阵，解决了需求和想要的效果。具体如下： 1.先附上效果截图：（默认都是未选中的） 2.xml中使用如下所示： 因为tabLayout有个默认的点击效...
android tablayout垂直,Android VerticalTabLayout纵向的tablayout
weixin_34844709的博客
05-26 406
添加依赖compile 'q.rorbin:VerticalTabLayout:1.2.5'XML布局android:layout_width="@dimen/dp_100"android:layout_height="match_parent"app:indicator_width="@dimen/dp_2"app:layout_constraintLeft_toLeftOf="parent"a...
Android底部导航栏(可滑动)----TabLayout+viewPager
weixin_30546189的博客
03-12 763
【TabLayout】 　　①TabLayout是选项卡，在屏幕空间有限的情况下，对不同的空间进行分组。属于android support design，更多的用于新闻上，如果放在底部也可做底部导航栏 　　　　 　　②TabLayout的选项卡模式有两种：fixed；scrollable;　　　　 　　tabLayout.setTabMode(TabLayout.MODE_FIXED);设...
Android实现网易严选标签栏滑动效果
08-29
在Android开发中，实现网易严选标签栏滑动效果是一个涉及到UI交互与动画设计的典型应用场景。这个功能的实现主要包括以下几个关键知识点： 1. **标签栏控件**：标签栏通常使用`TabLayout`或者自定义View来实现，...
Android MarginDesign控件TabLayout导航栏使用详解
08-31
TabLayout主要用于在应用顶部创建一个可滑动的标签页导航，它与ViewPager结合使用，可以轻松地切换不同的内容片段。在本文中，我们将深入探讨如何使用TabLayout来构建一个功能齐全的导航栏。 首先，为了使用...
Android tabLayout+recyclerView实现锚点定位的示例
08-27
Android TabLayout 和 RecyclerView 是 Android 开发中两个常用的控件，分别用于实现标签栏和列表视图。锚点定位是指在列表视图中实现锚点跳转的功能，即当用户滑动列表视图时，标签栏也随之更改，以便用户快速定位...
Android design包自定义tablayout的底部导航栏的实现方法
08-31
首先，`TabLayout`是Google推荐的一种用于展示标签页的UI组件，它与`ViewPager`配合使用可以实现滑动切换页面的效果。在Android design包中，`TabLayout`提供了丰富的定制选项，包括文字、图标以及样式等。 在布局...
IndicatorTabBar——可滑动的带指示条的TabBar
Battling against our own ignorance
05-12 2646
这篇文字给大家分享一个可以滑动的TabBar，这里叫做IndicatorTabBar。先上效果图： 诸如网易新闻、腾讯新闻、百度新闻等客户端，都使用了类似的TabBar，这玩意儿都快成多页面APP的标配了。 简单说一下实现原理: 1.自定义IndicatorTabBar，继承自HorizontalScrollView。 2.IndicatorTabBar里面放置一个水平方向的L
Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果
05-30 446
此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果，详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。 Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了
Android 6.0特性Toolbar+ TabLayout +Viewpager实现demo
Cricket_7的博客
04-01 240
1，实现效果 Toolbar+ TabLayout +Viewpager 使用AppBarLayout实现滚出效果 2，实现逻辑 【1】更改主题添加依赖 compile 'com.android.support:design:23.2.0' 【2】创建布局添加Toolbar+ TabLayout +Viewpager <?xml versio...
Android实战开发---滑动分类列表（TabLayout+ViewPager+RecyclerView）
yunyanchengyu114的博客
01-18 4420
TabLayout是一个滑动的标签组件，他是继承自HorizontalScrollView（横向滑动视图），所以它通常适合滑动组件ViewPager配合使用。
Android自带的TabLayout实现滑动翻页效果（实例）
weixin_34259159的博客
08-03 727
Android自带的TabLayout在support包中，导包： implementation 'com.android.support:support-v4:27.1.1' 复制代码效果1 不带viewpager，tab只可点击，就是普通的控件。 TabLayout嵌套TabItem，可改造空间有限。tabLayout只能嵌套TabItem，其余会报错。 <android.suppor...
tablayout 滑动监听
丿灬安之若死
12-10 1739
notify_tab_bar.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab?) { notify_tab_bar.isEnabled = false //选择时触发 tab.let { ...
使用TabLayout快速实现一个导航栏
weixin_30780221的博客
12-12 135
在没有Material Design的年代，要实现一个类似微信主页面的效果，我们有以下几种解决方案：1.Fragment + ViewPager + RadioGroup自定义固定导航条2.Fragment + ViewPager 带滑动导航条3.Fragment + ViewPager + HorizontalScrollView自定义滑动导航条当然，除了这些之外，还有许多已经被Go...
固定android tab,Android快速开发库之TabLayout
weixin_36439481的博客
05-25 276
一、效果展示1. 效果图a.常用的效果b.常用的效果c.常用的效果d.常用的效果e.可滚动的常用的效果f.常用的效果g.自定义效果2. 关联ViewPage关联ViewPage3. TabLayout固定选项卡或可滚动选项卡固定选项卡或可滚动选项卡4. TabLayout动态添加移除选项卡动态添加移除选项卡5. 显示选项卡Badge显示选项卡Badge二、项目中使用1. 在Gradle中引入(最新...
androidstudio使用Viewpage和tablayout实现滑动效果
最新发布
06-09
好的，下面是使用ViewPager和TabLayout实现滑动效果的步骤： 1.在布局文件中添加ViewPager和TabLayout组件 ```xml <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabMode="scrollable" app:tabTextColor="@android:color/white" app:tabSelectedTextColor="@android:color/white" app:tabIndicatorColor="@android:color/white" app:tabIndicatorHeight="3dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2.在Java代码中初始化ViewPager和TabLayout组件 ```java ViewPager viewPager = findViewById(R.id.viewPager); TabLayout tabLayout = findViewById(R.id.tabLayout); MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); ``` 3.实现FragmentPagerAdapter类，用于管理ViewPager中的Fragment ```java public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private String[] titles = {"Tab 1", "Tab 2", "Tab 3"}; public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } @Override public int getCount() { return titles.length; } @Nullable @Override public CharSequence getPageTitle(int position) { return titles[position]; } } ``` 4.实现三个Fragment类，用于显示在ViewPager中的内容 ```java public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1_layout, container, false); return view; } } public class Fragment2 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment2_layout, container, false); return view; } } public class Fragment3 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment3_layout, container, false); return view; } } ``` 5.创建三个布局文件fragment1_layout.xml、fragment2_layout.xml、fragment3_layout.xml，用于显示在ViewPager中的内容 ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 1" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 2" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:text="Fragment 3" android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 以上就是使用ViewPager和TabLayout实现滑动效果的步骤，希望对你有帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值