首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用TabLayout在Android Viewpager上设置图标

在Android中使用TabLayout在ViewPager上设置图标的步骤如下:

  1. 首先,在布局文件中添加TabLayout和ViewPager组件,并将它们进行关联。例如:
代码语言:xml
复制
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        ...
        />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        ...
        />

</androidx.constraintlayout.widget.ConstraintLayout>
  1. 在Activity或Fragment中,获取TabLayout和ViewPager的实例,并进行关联。例如:
代码语言:java
复制
TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
  1. 创建自定义的PagerAdapter类,继承自FragmentPagerAdapter或FragmentStatePagerAdapter,并实现必要的方法。在getPageTitle()方法中返回每个Tab的标题,在getItem()方法中返回对应位置的Fragment实例。例如:
代码语言:java
复制
public class MyPagerAdapter extends FragmentPagerAdapter {

    private static final int NUM_TABS = 3;

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Tab 1";
            case 1:
                return "Tab 2";
            case 2:
                return "Tab 3";
            default:
                return null;
        }
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Tab1Fragment();
            case 1:
                return new Tab2Fragment();
            case 2:
                return new Tab3Fragment();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return NUM_TABS;
    }
}
  1. 在每个Tab对应的Fragment中,创建一个布局文件,并在其中添加一个ImageView用于显示图标。例如,在Tab1Fragment的布局文件中添加一个ImageView:
代码语言:xml
复制
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    >

    <ImageView
        android:id="@+id/iconImageView"
        ...
        />

</LinearLayout>
  1. 在每个Tab对应的Fragment中,通过findViewById获取ImageView的实例,并设置相应的图标。例如,在Tab1Fragment中设置图标:
代码语言:java
复制
public class Tab1Fragment extends Fragment {

    private ImageView iconImageView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab1, container, false);
        iconImageView = view.findViewById(R.id.iconImageView);
        iconImageView.setImageResource(R.drawable.tab1_icon);
        return view;
    }
}
  1. 在res目录下创建一个drawable目录,并将每个Tab对应的图标文件放入其中。例如,将Tab1的图标文件命名为tab1_icon.png,并放入drawable目录。
  2. 运行应用程序,即可在TabLayout上看到带有图标的Tab。

注意:以上步骤中的布局文件、类名、资源文件名等可以根据实际需求进行修改。此外,还可以通过设置TabLayout的其他属性来自定义Tab的样式和行为,例如设置选中Tab的颜色、指示器的样式等。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Material Design整理(八)——TabLayout

而指示器可以是RadioGroup或者是其他简单的View(TextView),但复杂的业务逻辑需要我们自己控制,还有过度动画也需要自己实现。...当然了,不仅可以不居中直接添加TabItem子标签,这样可变性不好,我们可以代码中动态添加,节后会介绍到!...、为Tab添加图标 for (int i = 0; i < titles.length; i++) { TabLayout.Tab tab = tabLayout.newTab();//创建tab...tab.setText(titles[i]);//设置文字 tab.setIcon(R.mipmap.ic_launcher);//设置图标 tabLayout.addTab(tab...);//添加到tabLayout中 } 结合第三步,创建Tab对象,对其设置文字和图片 ---- 6、修改TabLayout的样式 Tablayout支持定制化修改,提供了不少自定义属性供开发者进行设置

1.3K10

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

完全收缩后,Toolbar还可以保留在屏幕。...除此之外,设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性API文档中都有详细介绍,设置导航栏图标设置App的logo; 支持设置标题和子标题...TabLayout提供一个水平布局来显示选项卡。TabLayout一般都是配合ViewPager一起来使用。...如果设计的需求不要求选项卡在切换时附带有图标的切换效果,仅仅文字的颜色发生变化以响应用户的点击事件,那么TabLayoutViewPager建立联系可以用官方提供的方法,它可以做到交互双向联动,也就是点击...相互建立联系的方法如下: setupWithViewPager(ViewPager viewPager) 如果选项卡里带有图标或者仅仅只有图标时就麻烦了,那个选项卡会变得什么都没有了。

2.3K90

Android TabLayout 使用进阶(含源码)

TabLayout 使用进阶 前言 正文 一、控件基础使用 ① 设置标题 ② 设置图标设置下划线 二、分类页面 (TabLayout + ViewPager + Fragment) ① 创建...Fragment ② Fragment适配器 ③ 编码运行 三、App主页面 (TabLayout + TabItem + ViewPager + Fragment) ① 选中图标 ② 创建Fragment...//选中第一个 tabLayout.getTabAt(0).select(); 这样设置就可以了。 ② 设置图标 TabLayout也是可以设置图标的。首先放入五个图标 ? ? ?...> 这里对TabLayout控件做了一些修改,设置点击的水波纹为透明、下划线为透明,选中的文字颜色为蓝色,默认是灰色,和刚才创建的四个图标样式文件类似,选中时切换蓝色图片...(fragTabAdapter); tabLayout.setupWithViewPager(viewPager); } } 设置一个50以内的随机数,然后设置菜单和Fragment

2.9K33

Android原生TabLayout使用全解析,看这篇就够了

是的,早期的api确实不够丰富,某些需求的实现显得捉襟见肘,但是google也不断的迭代,目前为止,常见的样式都能满足。...2.添加图标 mBinding.tabLayout2.getTabAt(index)?.setIcon(R.mipmap.ic_launcher) 获取Tab然后设置icon。...Tab内部其实是一个TextView和ImageView,添加图标就是给ImageView设置icon。...然后又创建了TabLayout.ViewPagerOnTabSelectedListener(viewPager),并传入当前viewPager,然后设置给了addOnTabSelectedListener...所以,经过这种你来我往的操作之后,设置TabLayout的选中下标和设置ViewPager的选中下标,其实效果是一毛一样的,因为联动起来了… 另外,FragmentPagerAdapter已经废弃了,官方推荐使用

8.3K41

AndroidX TabLayout使用、扩展及解析All In One

之前的TabLayoutsupport中使用,新的引用全部放到老AndroidX中 image.png 使用老的库需要用 implementation 'com.android.support:design...要显示的选项卡的填充是通过TabLayout.Tab实例完成的。可以通过创建标签 newTab()。在此处,您可以分别通过setText(int) 和更改选项卡的标签或图标setIcon(int)。...此视图还支持用作ViewPager装饰的一部分,并且可以像这样布局资源文件中直接添加到ViewPager: <androidx.viewpager.widget.ViewPager android...(3)添加图标 TabItem有个上下结构的默认布局,这里使用默认的 tabLayout1.addTab(tabLayout1.newTab().setText("Tab 4").setIcon...TabLayout的简单运用和若干问题的解决。 这篇中介绍了怎么加分割线,设置原有字体大小,自定义标签等。 源码中可以看到再newTab中,customView的的创建。

7.8K71

TabLayout+ViewPager实现切页的示例代码

安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是顶部还是底部 一、实现效果: ?...文本默认颜色 app:tabSelectedTextColor="" Tab文本被选中后的颜色 app:tabTextAppearance="" 为Tab文本设置样式,一般是需要为Tab加图标时使用...主布局文件更改: 主布局文件的<android.support.design.widget.TabLayout 更改android:layout_height=”70dp”,表示其菜单栏的高度改变。...定义必要的类变量: private ViewPager viewPager; private TabLayout tabLayout; //设置界面文件和文字一一对应 private Fragment...(viewPager); //设置默认选中页,宏定义 tabLayout.getTabAt(ItemWhat).select(); viewPager.setOffscreenPageLimit(3)

1.7K40

使用TabLayout看这篇就够了

里加上 compile 'com.android.support:design:25.0.0' 然后基本就不会有什么问题了。...这里的android:textAllCaps属性就是控制字体大小写的,TabLayout里默认是true,我们手动改成false即可,我们顺便设置了下字体。...不要用文本了,改成icon吧,wtf,TabItem根本没有这样的属性啊,TabLayout貌似也没有啊。怎么搞?TabLayout没有明确地提供向Tab中设置图标的途径,但是很多事情总可以另辟蹊径。...于是,我们可以PagerAdapter中重写getPageTitle()方法,创建一个SpannableString,而将图标放置ImageSpan中,设置SpannableString中: ?...代码逻辑,我们setupWithViewPager()方法最终remove掉了标题栏之后再重新设置标题,这样就不会出现标题栏消失的问题了。

2.9K30

Android开发笔记(一百七十二)第二代翻页视图ViewPager2

撤销刚加的边缘特效代码,再给测试页面的Java代码中补充下面几行:     // ViewPager2支持翻页时展示切换动画     // 创建页面转换器,用于计算切换动画的各项参数     ViewPager2...如果要让ViewPager联动TabLayout,得先给ViewPager注册页面变更监听器,一旦监听到翻页事件就切换对应的标签;再给TabLayout注册标签选中监听器,一旦监听到标签事件就翻到对应的页面...现在有了ViewPager2,搭配TabLayout便轻松多了,只要一行代码即可绑定ViewPager2与TabLayout。下面是将二者联结起来的操作步骤。...1、创建测试页面,并往页面的XML文件先后加入TabLayout标签和ViewPager2标签,具体内容如下所示:     <com.google.android.material.tabs.TabLayout         android:id="@+

2.2K30

Tablayout简单使用方法总结

Tablayout设置标题 第三步:将TablayoutViewPager关联到一起 //第一步:初始化ViewPager设置adapter viewPager = (ViewPager)...好了,正常情况下就到此结束了,但是我写这个demo的时候碰到一个坑: 标题死活显示不出来,浪费了很长时间,最后Tablayout关联Viewpager之后添加从新设置下标题即可: //关联...,25,25); } }); 最后记得更改滑动方式: app:tabMode=”fixed” 左右距离可根据自己项目设置;(更改下划线宽度需第一步(Tablayout普通用法)的基础更改使用...” 限制标签宽度 (更改更改标签对齐方式需第一步(Tablayout普通用法)的基础更改使用) ?.../ <size android:width="1dp"/ </shape 2,主类设置tablayout后添加如下代码: LinearLayout linearLayout = (LinearLayout

1.5K20

Android实现简单底部导航栏 Android仿微信滑动切换效果

Android仿微信滑动切换最终实现效果: ? 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2....底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3....通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1....添加 图标自定义类, 该类封装着底部导航栏中每一个选项的的图标和文字,将该类型对象添加到集合中,用于给底部导航栏设置图标; /** * 底部导航栏的封装类,该类对象用于底部导航栏添加对应图标和文字...布局文件中添加: <zhengyanze.com.bottomdemo.widget.bottomView android:id="@+id/bottom" android:layout_width

2.1K31

TabLayout用法,android顶部导航栏,android底部导航栏

TabLayoutandroid.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航。类似于这样的,能设置选中时字体的颜色和选中时的图片。 ? ?...(Color.WHITE, Color.GRAY);//设置文本选中和为选中时候的颜色 // tabLayout.setSelectedTabIndicatorColor(Color.WHITE...下面说第二种带图片的底部导航, 其实也很简单,就是把TabLayout放到底部,上面是viewpager,然后给text设置个图片就行了。...下面的那块是设置图片的,就是selected的时候把图片换成选中态的图片。遍历tab,给tab设置icon,icon就是selector。 R.drawable.selector_home <?...以上的代码可以从oschina的git托管http://git.oschina.net/tianyalei/MDDesignLib获取,TabLayout相关的Sample的TabActivity那里

4K10

学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件,响应...collapse时是移除屏幕和固定在最上面 TabLayout 结合ViewPager,实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同,不过包含在NestedScrollView...CollapsingToolbarLayout CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById...(R.id.collapsing_toolbar); collapsingToolbar.setTitle("失控"); //设置ViewPager mViewPager = (ViewPager...) findViewById(R.id.viewpager); setupViewPager(mViewPager); //给TabLayout增加Tab, 并关联ViewPager TabLayout

1.2K31
领券