Android---TabLayout

这篇具有很好参考价值的文章主要介绍了Android---TabLayout。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Android---TabLayout

目录

TabLayout

TabItem

​编辑

演示效果的xml

TabLayout

TabLayout 在开发中一般作为选项卡使用,常与 ViewPager2 和 Fragment 结合起来使用。

    常用属性:

     app:tabBackground 设置 TabLayout 的背景色,改变整个TabLayout 的颜色;

     app:tabTextColor 设置未被选中时文字的颜色;

     app:tabSelectorColor 设置选中时文字颜色;

    ​​​​​​​ app:tabTextAppearance="@android:style/TextAppearance.Large" 设置 TabLayout 的文本主题,无法通过 textSize 来设置文字大小,只能通过主题来设定;

    ​​​​​​​ app:tabMode="scrollable"设置 TabLayout 可滑动,当 tabItem 个数较多时,一个界面无法呈现所有的导航标签,此时就必须要用;

    ​​​​​​​ app:tabIndicator 设置指示器;

    ​​​​​​​ app:tabIndicatorColor 设置指示器颜色;

    ​​​​​​​ app:tabIndecatorHeight 设置指示器高度,当 app:tabIndecatorHeight="0dp",隐藏 Indicator 效果;

     app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" 改变 TabLayout 里 TabItem 文字的大小;

     app: tabPadding 设置 Tab 内部 item 的 padding。也可以单独设置某个方向的padding, 比如 app:tabPaddingStart 设置左边距;

     app:paddingEdng / app:paddingStart 设置整个 TabLayout 的 padding;

     app:tabGravity="center" 居中,如果是 fill,则充满;

     app:tabMaxWidth / app:tabMinWidth 设置最大/最小的 tab 宽度,对 Tab 的宽度进行限制。

TabItem

 给TabLayout 添加 Item 有两种方法,其中一种就是使用 TabItem 在 xml 里直接添加。

    1. 使用TabItem 给 TabLayout 添加卡片。

<com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:icon="@android:drawable/ic_menu_add"
     android:text="添加"/>

     android:icon 设置图标;

     Android:text 设置文本;

    2. 通过代码添加。使用 TabLayoutMediator()

        new TabLayoutMediator(binding.tab, binding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                //TODO 设置卡片的文本/图标
                tab.setText(mTitles.get(position))
                   .setIcon(mIcons.get(position));
            }
        }).attach();

其中 mTitles 和 mIcons 是存放 text 和 Icon 的list。效果如下:

Android---TabLayout

可以看到 text 在英文状态下默认都是大写, 这是因为在 TabLayout 的源码中默认设置属性 textAllCaps=true。所以可以在 TabLayout 中设置如下属性来改成小写。

app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"

Android---TabLayout

 文章来源地址https://www.toymoban.com/news/detail-405349.html

演示效果的xml

<?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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs1"
        style="@style/Widget.MaterialComponents.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        android:layout_margin="8dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>

    </com.google.android.material.tabs.TabLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs2"
        style="@style/Widget.MaterialComponents.TabLayout.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/purple_700"
        android:layout_margin="8dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>

    <com.google.android.material.tabs.TabLayout
        android:layout_margin="8dp"
        android:id="@+id/tabs3"
        style="@style/Widget.Design.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_call"
            android:text="删除" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="菜单" />

    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs4"
        app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="0dp"
        android:layout_margin="8dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="add"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

到了这里,关于Android---TabLayout的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android开发:利用Android Studio自带的底部导航栏和ViewPager+TabLayout创建顶部导航栏

    目录 效果图 底部导航栏 ​编辑 顶部导航栏 底部导航栏首个Fragment代码 适配器代码 顶部导航栏首个Fragment代码  顶部导航栏另外三个Fragment代码  ​编辑 顶部导航栏四个Fragment的XML 补充 学Android开发开始实操,第一步肯定要把大致布局搞定。做这个布局用到的知识难点有fr

    2024年02月03日
    浏览(60)
  • Android kotlin 实现仿蜜源ViewPager和指示器对应上面TabLayout功能

    在 app 的 build.gradle 在添加以下代码 1、 TabLayout : implementation \\\'com.google.android.material:material:1.1.0\\\' 2、 implementation \\\'com.github.li-xiaojun:StateLayout:1.3.4\\\' //allprojects {…增加:maven { url ‘https://jitpack.io’ }…} 3、 implementation \\\'com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.6\\\' ,这个里面带的适配

    2024年02月09日
    浏览(74)
  • 探索 Linux vim/vi 编辑器:介绍、模式以及基本操作演示

    💐作者:insist-- 💐个人主页: insist-- 的个人主页 理想主义的花,最终会盛开在浪漫主义的土壤里,我们的热情永远不会熄灭,在现实平凡中,我们终将上岸,阳光万里 ❤️欢迎点赞👍收藏📁评论📒 前言 本文将介绍vim / vi编辑器是什么并详细讲解它的三种工作模式以及基

    2024年02月05日
    浏览(67)
  • 超简单演示Android地图开发应用实例

    手机地图开发应用广泛,本实例演示了在手机上显示各种地图的方法。比如3D矢量地图、卫星地图、交通地图、夜景地图等在手机上的显示。可以根据手势自由做地图缩放,地图旋转等操作。代码简洁、实用,可以帮助你快速上手地图开发。 一、实现效果图: 二、实现过程

    2024年02月11日
    浏览(43)
  • ViewPager2+TabLayout

    ViewPager2最显著的特点是基于RecyclerView实现,RecyclerView是目前Android端最成熟的AdapterView解决方案,这带来诸多好处: 1、抛弃传统的PagerAdapter,统一了Adapter的API/ 2、通过LinearLayoutManager可以实现类似抖音的纵向滑动 3、支持DiffUitl,可以通过diff实现局部刷新 4、支持RTL(right-to-

    2023年04月19日
    浏览(41)
  • IDEA Android用户登录页面、登录验证、页面跳转演示示例全部源码

    开发工具: IDEA 2022.3.2,未连接数据库。验证用的用户名和密码为内置硬编码 演示程序运行效果:     设计器中的用户登录页面布局:  登录验证容错提示如下: 1,用户名不能为空: 2,密码不能为空:     3,用户名不存在: 4,用户密码错误    5,登录验证成功跳转到用户

    2024年02月11日
    浏览(51)
  • TabLayout去除点击时的波纹效果

    需求:去除com.google.android.material.tabs.TabLayout手指点击时产生的波纹效果 解决办法: xml中增加 注意:Java/kotlin代码中不要设置这两个属性了。

    2024年01月15日
    浏览(47)
  • 自动化应用杂志自动化应用杂志社自动化应用编辑部2023年第11期目录

      数据处理与人工智能     大数据视域下无轨设备全生命周期健康管理技术的研究     赖凡; 1-3     三维激光扫描结合无人机倾斜摄影在街区改造测绘中的技术应用     张睿; 4-6     井上变电站巡检机器人的设计与应用     刘芳; 7-9 《自动化应用》投稿邮箱:cnqikant

    2024年02月13日
    浏览(42)
  • ViewPager2与TabLayout的简单使用

    ViewPager2与TabLayout的简单使用 MainActivity.java activity_main.xml ViewPagerAdapter.java ShowBigIdBean.java item_img.xml item_icon_layout.xml item_circle_shape.xml

    2024年02月12日
    浏览(38)
  • 玩转Android10源码开发定制(二)之基于Pixel 3手机超级详细演示recovery刷机

    本节主要内容: Pixel 3通过fastboot方式刷入Android 11.0官方工厂镜像 Pixel 3通过recovery方式刷入LineageOs 18.1 Android主要刷机方式: 线刷 fastboot刷机,比如pixel 3手机刷工厂镜像的时候用的就是fastboot刷机方式。 卡刷 通过recovery刷机。比如要刷入LineageOs官方的刷机包,需要刷入twrp等recove

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包