TabLayout ViewPager2 Fragment实现顶部切换布局 并且设置顶部tab点击效果-程序员宅基地

技术标签: android  

在build.gradle中配置文件

  implementation 'androidx.viewpager2:viewpager2:1.0.0'
  implementation "com.google.android.material:material:1.1.0"

在xml文件中配置com.google.android.material.tabs.TabLayoutandroidx.viewpager2.widget.ViewPager2的标签

<com.google.android.material.tabs.TabLayout
       android:id="@+id/tab_layout"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"/>
   <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/viewpager2"
       android:layout_height="match_parent"
       android:layout_width="match_parent"
       android:layout_below="@id/tab_layout"
       android:orientation="horizontal"
       />

在activity中
先声明 ViewPager2 TabLayout TabLayoutMediator
其中TabLayoutMediator是tablayout+viewpager2的联动工具类 重写onConfigureTab()方法可以设置顶部Tablayout的textview(注意:最好一定要使用attach()方法)
ViewPager2如果要fragment复用 不可以只new一个fragment(因为fragment有其特有生命周期 当共用一个时 切换页面的时候要先隐藏再显示 而共用的原因会都隐藏导致出错) 所以哪怕复用也是要声明多个fragment


public class MainActivity extends AppCompatActivity {
    
    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    private TabLayoutMediator mediator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final String[] tabs = {
    "推荐", "关注"};
        Fragment[] fragments = new Fragment[tabs.length];
        fragments[0] = new FeedMainFragment();
        fragments[1] = new FeedMainFragment();
        viewPager2 = findViewById(R.id.viewpager2);
        tabLayout = findViewById(R.id.tab_layout);
    
        viewPager2.setAdapter(new FragmentStateAdapter(getSupportFragmentManager(), getLifecycle()) {
    

            @NonNull
            @Override
            public Fragment createFragment(int position) {
    
			// 各分页的fragment
                return fragments[position];
            }

            @Override
            public int getItemCount() {
    
            // 有多少个分页
                return tabs.length;
            }
        });
    


        mediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
    
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
    
                TextView textView = new TextView(MainActivity.this);
                textView.setText(tabs[position]);
                tab.setCustomView(textView);

            }
        });
        mediator.attach();

    }
}

最后如果想设置顶部Tablayout 点击的模块字体放大变色等功能
需要做如下声明 并重写onPageSelected方法 在该方法内设置效果

private ViewPager2.OnPageChangeCallback changeCallback = new ViewPager2.OnPageChangeCallback() {
    
        @Override
        public void onPageSelected(int position) {
    
            //可以来设置选中时tab的大小
            int tabCount = tabLayout.getTabCount();
            for (int i = 0; i < tabCount; i++) {
    
                TabLayout.Tab tab = tabLayout.getTabAt(i);
                TextView tabView = (TextView) tab.getCustomView();
                if (tab.getPosition() == position) {
    
                    tabView.setTextSize(20);
                    tabView.setTypeface(Typeface.DEFAULT_BOLD);
                } else {
    
                    tabView.setTextSize(15);
                    tabView.setTypeface(Typeface.DEFAULT);
                }
            }
        }
    };

然后在activity的onCreate()方法中设置页面切换监听

// 页面切换监听
viewPager2.registerOnPageChangeCallback(changeCallback);

效果图:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Azadoo/article/details/115481163

智能推荐

从零开始学Pyqt5之【控件介绍】(13):QFontDialog字体选择对话框控件_pyqt qfont_阿_旭的博客-程序员宅基地

从零开始学Pyqt5之【控件介绍】(13):QFontDialog字体选择对话框控件QFontDialog控件的作用代码示例QFontDialog控件的作用QFontDialog 控件是一个常用的字体选择对话框,可以让用户选择所显示文本的字号大小、样式和格式。使用QFontDialog类的静态方法getFont(),可以弹出字体选择对话框,可从字体选择对话框中选择文本的显示字号大小、样式和格式。代码示例# -*- coding: utf-8 -*-import sysfrom PyQt5.Qt_pyqt qfont

Hibernate复合查询_通过hibernate条件查询实现两列合并搜索_xuxiaoshengfj的博客-程序员宅基地

Hibernate复合查询主要是处理,具有关联关系的两个实体怎样进行关联查询,比如User实体对象与Addres实体对象具有一对多的关联关系。Hibernate复合查询相关:1. Hibernate2.Hibernate QBC查询 QBC查询:QBC查询就是通过使用Hibernate提供的Query By Criteria API来查询对象,这种API封装了SQL语句_通过hibernate条件查询实现两列合并搜索

通过zookeeper实现主从(Master-slave)竞选_devotedwife的博客-程序员宅基地

个人博客原文地址:http://www.ltang.me/2016/08/06/run-for-master-with-zookeeper-md/背景为了提高系统的健壮性,我们常常做出多节点负载均衡的设计,通过zookeeper注册和发现可用服务,调用端通过一定的负载均衡策略决定请求哪一个可用服务节点。然后,在某些情况下,服务的调用并非由客户端发起,而是由这个服务自身发起。比如,一个服...

javax.servlet.jsp.JspException cannot be resolved to a type(JSP页面)解决_l185666的博客-程序员宅基地

右键你的项目–properties选择Targeted Runtimes,选择你的运行环境,我选择Apache Tomcat v8.0,Apply–-->OK。_javax.servlet.jsp.jspexception cannot be

CSS之hover缓慢还原的小细节_hover后缓慢恢复_猜测7的博客-程序员宅基地

之前总喜欢把transition:all 0.2s linear 0s;写在hover的css里,今天才发现这种写法有问题,因为在鼠标移开之后,元素会瞬间变回原状态。之前没有发现是因为变色之类的瞬间变回去也无所谓,而宽度瞬间变回去就感觉太跳脱了。直接写到对象上而不写在它的hover里就正常了。..._hover后缓慢恢复

随便推点

Microsoft Edge拥抱HTML5和JavaScript,不再支持IE上的ActiveX技术_钱曙光的博客-程序员宅基地

微软新浏览器 Edge 将放弃旧有的 IE 浏览器中技术,开始迎接基于 HTML5 和 JavaScript 的 add-ons。新的扩展模式将不会在添加到 Edge 中,相关细节将会和 Windows 10 一起在今年夏天披露出来。此前,微软曾宣布,Edge 将会放弃 Internet Explorer 11 中诸多的传统支持,以及谈及了备用 add-on 模式,该模式可能不再至支持...

jquery实时监控input值的变化、兼容ie9_小菜101的博客-程序员宅基地

jquery实时监控input值的变化、兼容ie9$psdInput.bind("propertychange change click keyup input paste", function() { console.log($(this).val()); // 实时监控值的变化,兼容ie9});...

Dockerfile 部署 nginx + lua + GraphicsMagick 实现缩略图功能_Dragon-1的博客-程序员宅基地

Dockerfile 部署 nginx + lua + GraphicsMagick 实现缩略图功能1.dockerfile 源码FROM hub.c.163.com/library/alpine:3.6MAINTAINER peilong <[email protected]>RUN apk add --no-cache make gcc libc-dev gcc-objc ca-certificates zlib-dev openssh wget libressl2.5-lib

JectPack架构学习系列一_zmybiealex的博客-程序员宅基地

从MVC到MVP再到MVVM, 目前JectPack已经成为安卓退出的针对安卓架构的一种规范. 本系列一学习ViewModel在ViewModel中, 处理数据的逻辑. 在Activity中只负责展现数据和做交互并且绑定其生命周期, 在界面重绘的时候, 不会丢失数据. 界面重绘发生在界面旋转或者更改语言的过程中. 以前的操作是保存在savedInstanceState中..._jectpack

Mysql常见错误_LawsonAbs的博客-程序员宅基地

Mysql常见错误错误1create table mydatabase.statistics(id int(10) primary key not null auto_increment,teleNumber varchar(15) not null,yearMonth varchar(10) not null,callDuration int(10) not null)..._mysql常见错误

Ajax基础:发送jsonp请求(jsonp、jsonCallback)_ajax jsonp_昔冰_G的博客-程序员宅基地

jsonp走的是get请求方式,也就是ajax的默认请求方式;ajax方法中也涵盖了jsonp请求,可以通过ajax方法来发送jsonp请求;<!--客户端代码--><body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt_ajax jsonp

推荐文章

热门文章

相关标签