Android：viewPage+Fragment实现模拟微信首页

news2025/5/21 13:39:04

一、前言：虽然现在很多已经不这么写了，但是这是最底层的东西，我想我还是要好好理解一下的。这篇代码是模拟微信首页底部按钮和ViewPage的联动。记录一下！！

二、代码理解：

主页面布局

<?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">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:layout_constraintTop_toTopOf="parent" />

    <include layout="@layout/bottom_layout" />


</LinearLayout>

对应的java类

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    public ViewPager2 viewPager;//1.创建viewPage
    private LinearLayout llMessage, llContect, llFind, llMine;
    private ImageView ivMessage, ivContect, ivFind, ivMine, ivCurrent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPage();//2.viewPage不再是单纯的ui而是混合的，因此要专门定义一个方法来管理ui
        initTabView();//初始化tableView控件
    }

    private void initTabView() {
        llMessage = findViewById(R.id.id_tab_weixin);
        llMessage.setOnClickListener(this);
        llContect = findViewById(R.id.id_tab_contact);
        llContect.setOnClickListener(this);
        llFind = findViewById(R.id.id_tab_find);
        llFind.setOnClickListener(this);
        llFind = findViewById(R.id.id_tab_mine);
        llFind.setOnClickListener(this);

        ivMessage = findViewById(R.id.tab_iv_weixin);
        ivContect = findViewById(R.id.tab_iv_contect);
        ivFind = findViewById(R.id.tab_iv_find);
        ivMine = findViewById(R.id.tab_iv_mine);

        ivMessage.setSelected(true);
        ivCurrent = ivMessage;//保存当前按钮

    }

    private void initPage() {
        viewPager = findViewById(R.id.vp);//3.找到viewPage
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        viewPager.setAdapter(myFragmentPagerAdapter);

        //按钮点击触发viewpage页面发生改变
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

    private void changeTab(int position) {
        ivCurrent.setSelected(false);
        switch (position) {
            case R.id.id_tab_weixin:
            case 0:
                viewPager.setCurrentItem(0);
                ivMessage.setSelected(true);
                ivCurrent = ivMessage;
                break;
            case R.id.id_tab_contact:
            case 1:
                viewPager.setCurrentItem(1);
                ivContect.setSelected(true);
                ivCurrent = ivContect;
                break;
            case R.id.id_tab_find:
            case 2:
                viewPager.setCurrentItem(2);
                ivFind.setSelected(true);
                ivCurrent = ivFind;
                break;
            case R.id.id_tab_mine:
            case 3:
                viewPager.setCurrentItem(3);
                ivMine.setSelected(true);
                ivCurrent = ivMine;
                break;
        }
    }

    @Override
    public void onClick(View view) {
        //当点击底部导航按钮的时候改变viewpage的页面，需要把点击的按钮id传入
        changeTab(view.getId());
    }
}

底部导航栏设计

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@color/white"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_iv_weixin"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/message_select" />

        <TextView
            android:id="@+id/text_weixin"
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_contact"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_iv_contect"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/contect_select" />

        <TextView
            android:id="@+id/text_contect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_find"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_iv_find"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/find_select" />

        <TextView
            android:id="@+id/text_find"
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_mine"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab_iv_mine"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/mine_select" />

        <TextView
            android:id="@+id/text_mine"
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我的" />
    </LinearLayout>

</LinearLayout>

需要对应的图片资源

在drawable中新建导航底部按钮选择器

首页消息

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_select_massage" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_normal_massages"/>
</selector>

通讯录按钮选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_select_contect" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_normal_contect"/>
</selector>

发现按钮选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_select_find" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_normal_find"/>
</selector>

我的按钮选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_select_mine" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_normal_mine"/>
</selector>

三、运行效果

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1001279.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

积木报表 JimuReport v1.6.2-GA版本发布—高危SQL漏洞安全加固版本

积木报表 JimuReport v1.6.2-GA版本发布—高危SQL漏洞安全加固版本

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…
阅读更多...
安防监控/视频汇聚/云存储/AI智能视频分析平台EasyCVR显示CPU过载，该如何解决？

安防监控/视频汇聚/云存储/AI智能视频分析平台EasyCVR显示CPU过载，该如何解决？

视频云存储/安防监控/视频汇聚平台EasyCVR基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频监控系统EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云…
阅读更多...
主品牌老化：企业增长面临的关键挑战——《主品牌进化战略》节选

主品牌老化：企业增长面临的关键挑战——《主品牌进化战略》节选

在今天&#xff0c;大部分行业的竞争环境已经从匀速变化迭代为加速变化&#xff0c;主品牌老化成为企业增长面临的重要挑战&#xff0c;这一点已经变得非常明显。技术革新、产业革命以及顾客需求的演变势不可挡&#xff0c;跨周期竞争已经成为常态。在这种情况下&#xff0c;企…
阅读更多...
React 展开运算符

React 展开运算符

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库溯源相关 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 展开运算符 1. 展开数组 <script type"text/javascript">let arr1 [1,3,5,7,9]let arr2 [2,4,6,8,10]console.log(...arr1)&l…
阅读更多...
OSPF协议LSDB同步过程和邻居状态机

OSPF协议LSDB同步过程和邻居状态机

【微|信|公|众|号&#xff1a;厦门微思网络】 华为HCIA试听课程&#xff1a;网络工程师的基本功&#xff1a;网络地址转换NAT https://mp.weixin.qq.com/s/jJRRSj3EdjFHrXCAqRCVeg 华为HCIP试听课程&#xff1a;华为HCIP必考题&#xff1a;DHCP协议原理与配置https://mp.weixi…
阅读更多...
ICC2: ICG clone与ICG merge

ICC2: ICG clone与ICG merge

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 默认情况下，initial_place阶段或者在spg flow的initial_opt阶段工具会自动merge clock gating cell。但是如果在place_opt之前使用merge_clock_gates命令了，place阶段就不会再merge clock gate了。…
阅读更多...
Linux中断底半部机制总结

Linux中断底半部机制总结

linux实现底半部的机制主要有tasklet、workqueue、softirq。 1.tasklet tasklet的使用较为简单&#xff0c;它的执行上下文是软中断&#xff0c;所以在tasklet中不能睡眠&#xff0c;它的执行时机通常是中断顶半部返回的时候。我们只需要定义tasklet及其处理函数&#xff0c;…
阅读更多...
【管理运筹学】第 7 章 | 图与网络分析（4，最大流问题）

【管理运筹学】第 7 章 | 图与网络分析（4，最大流问题）

系列文章目录 【管理运筹学】第 7 章 | 图与网络分析&#xff08;1&#xff0c;图论背景以及基本概念、术语、矩阵表示&#xff09; 【管理运筹学】第 7 章 | 图与网络分析&#xff08;2&#xff0c;最小支撑树问题&#xff09; 【管理运筹学】第 7 章 | 图与网络分析&#xf…
阅读更多...
健身小程序制作流程详解

健身小程序制作流程详解

随着移动互联网的普及&#xff0c;越来越多的人开始关注健康和健身。为了满足这一需求&#xff0c;制作一款健身小程序已经成为一种趋势。本文将详细介绍如何使用第三方制作平台&#xff0c;如乔拓云网&#xff0c;制作健身小程序&#xff0c;让你轻松成为专家。 一、注册与登录…
阅读更多...
CG MAGIC分享3ds Max卡顿未保存处理方法有哪些？

CG MAGIC分享3ds Max卡顿未保存处理方法有哪些？

3ds Max进行建模、渲染这一系列过程中&#xff0c;大家使用中都会遇到各种原因导致软件卡顿或崩溃是很常见的情况。 可以说卡机没关系&#xff0c;可是卡顿发生时&#xff0c;如果之前的工作没有及时保存&#xff0c;可能会导致数据的丢失和时间的浪费。这就是最让人烦躁的了&…
阅读更多...
Pytorch 多卡并行（1）—— 原理简介和 DDP 并行实践

Pytorch 多卡并行（1）—— 原理简介和 DDP 并行实践

近年来&#xff0c;深度学习模型的规模越来越大&#xff0c;需要处理的数据也越来越多&#xff0c;单卡训练的显存空间和计算效率都越来越难以满足需求。因此&#xff0c;多卡并行训练成为了一个必要的解决方案本文主要介绍使用 Pytorch 的 DistributedDataParallel&#xff08…
阅读更多...
Java开发分布式抽奖系统

Java开发分布式抽奖系统

Lottery 基于Springboot&#xff0c;Dubbo 等开发的分布式抽奖系统 1. 环境 配置 规范 2. 搭建(DDD RPC)架构 DDD&#xff08;Domain-Driven Design 领域驱动设计&#xff09;是由Eric Evans最先提出&#xff0c;目的是对软件所涉及到的领域进行建模&#xff0c;以应对系统…
阅读更多...
阿里云轻量应用服务器为什么便宜？CPU性能差吗？

阿里云轻量应用服务器为什么便宜？CPU性能差吗？

阿里云轻量应用服务器2核2G3M带宽优惠价108元一年&#xff0c;轻量应用服务器为什么便宜&#xff1f;是因为性能差吗&#xff1f;并不是&#xff0c;轻量应用服务器不限制CPU基准性能&#xff0c;轻量有月流量限制&#xff0c;轻量不支持指定CPU处理器&#xff0c;阿里云轻量2核…
阅读更多...
研发效能行业发展趋势及人才认证的重要性丨IDCF

研发效能行业发展趋势及人才认证的重要性丨IDCF

在当今的高科技环境下&#xff0c;“研发效能”已成为企业竞争和发展的关键因素。近年来&#xff0c;随着技术的快速发展&#xff0c;研发效能行业也在不断演进&#xff0c;并且将在未来几年内持续发展。本文将探讨研发效能行业的发展趋势以及人才认证的重要性。 一、研发效能…
阅读更多...
便捷查询中通快递，详细物流信息轻松获取

便捷查询中通快递，详细物流信息轻松获取

在如今快节奏的生活中&#xff0c;快递已成为人们生活中不可或缺的一部分。然而&#xff0c;快递查询却常常让人头疼&#xff0c;因为需要分别在不同的快递公司官网上进行查询&#xff0c;耗费时间和精力。为了解决这个问题&#xff0c;固乔科技推出了一款便捷的快递查询助手&a…
阅读更多...
Deepface使用教程

Deepface使用教程

一&#xff1a;github地址 GitHub - iperov/DeepFaceLab: DeepFaceLab is the leading software for creating deepfakes. GitHub - iperov/DeepFaceLive: Real-time face swap for PC streaming or video calls DeepFaceLab为视频处理。 DeepFaceLabLive为直播版本。 此处C…
阅读更多...
vue3中css使用script中定义的变量

vue3中css使用script中定义的变量

代码 <template><div class"box">haha</div> </template><script setup lang"ts"> const boxWidth 500px </script><style lang"scss"> .box {width: v-bind(boxWidth);height: 200px;background-c…
阅读更多...
Allegro166版本如何在颜色管理器中实时显示层面操作指导

Allegro166版本如何在颜色管理器中实时显示层面操作指导

Allegro166版本如何在颜色管理器中实时显示层面操作指导 在用Allegro166进行PCB设计的时候，需要在颜色管理器中频繁的开关层面。但是166不像172一样在颜色管理器中可以实时的开关层面，如下图 需要打开Board Geometry/Soldermask_top层，首先需要勾选这个层面，再点击Apply即…
阅读更多...
2023年车载超声波雷达行业研究报告

2023年车载超声波雷达行业研究报告

第一章 行业概况 车载超声波雷达&#xff0c;通常在英文中被称为“Automotive Ultrasonic Radar”或“Automotive Ultrasonic Sensor”&#xff0c;是一种使用超声波来检测车辆周围物体的距离的传感器。这个行业主要关注的是为汽车提供停车辅助、防撞和其他安全功能。 图 超声…
阅读更多...
GDB调试方法汇总

GDB调试方法汇总

gcc常用选项 选项含义描述-o filename指定输出文件名&#xff0c;在编译目标代码时&#xff0c;可不选&#xff0c;不指定filename时&#xff0c;默认文件名是a.out-c只编译不链接&#xff0c;生成目标文件.o-S只编译不汇编&#xff0c;生成汇编代码-E只进行预编译&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023