首页
学习
活动
专区
工具
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.4K10

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

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

    3.1K33

    TabLayout 使用详解(修改文字大小、下划线样式等)

    目录 效果: 依赖: 代码方式: XML方式: 关联ViewPager: 常用属性: 所有属性: 高级用法: 设置图标 添加监听 默认选中或指定选中 文字样式 下划线宽度等同文字 下划线样式 Github...android:icon="@drawable/ic_android"/> android.support.design.widget.TabLayout> 关联ViewPager: android.support.design.widget.TabLayout....view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent"...; mViewPager = (ViewPager) findViewById(R.id.view_pager); //设置adapter mViewPager.setAdapter..." 未选中文字颜色 app:tabMinWidth="50dp" 最小宽度,可以控制tab的宽度,包括指示器的宽度 app:tabMaxWidth="100dp" 最大宽度 所有属性: 高级用法: 设置图标

    4.3K30

    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已经废弃了,官方推荐使用

    9.9K41

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

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

    8K71

    使用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掉了标题栏之后再重新设置标题,这样就不会出现标题栏消失的问题了。

    3K30

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

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

    2.3K30
    领券