android RadioButton + ViewPager+fragment

news/2024/12/24 0:21:26/

RadioGroup + viewpage + fragment 组合显示导航栏

1、首先主界面的布局控件就是RadioGroup + viewpage

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.mmsx.MainActivity"><androidx.viewpager.widget.ViewPagerandroid:id="@+id/main_viewpager"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1" /><RadioGroupandroid:id="@+id/rg"android:layout_width="match_parent"android:layout_height="60dp"android:layout_alignParentBottom="true"android:background="#FDFDFD"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_wallet"style="@style/main_rb_style"android:drawableTop="@drawable/button_style_1" /><RadioButtonandroid:id="@+id/rb_treasure"style="@style/main_rb_style"android:drawableTop="@drawable/button_style_2" /><RadioButtonandroid:id="@+id/rb_home"style="@style/main_rb_style"android:drawableTop="@drawable/button_style_3" /><RadioButtonandroid:id="@+id/rb_otc"style="@style/main_rb_style"android:drawableTop="@drawable/button_style_4" />/></RadioGroup>
</LinearLayout>

这样式可以统一定义好style样式,直接调用

图标的样式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/home" android:state_checked="true" />
<item android:drawable="@mipmap/home_1" android:state_checked="false" />
</selector>

2、MainActivity实现

首先写一个fragment适配器

public class MainFragmentPagerAdapter extends FragmentPagerAdapter {List<Fragment> mFragmentList;public MainFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {super(fm);mFragmentList=list;}@Overridepublic Fragment getItem(int i) {return mFragmentList.get(i);}@Overridepublic int getCount() {return mFragmentList!=null?mFragmentList.size():0;}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
//        super.destroyItem(container, position, object);}
}
MainActivity代码实现,实现滑动切换,点击导航栏切换。
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {List<Fragment> fragmentList = new ArrayList<>();MainFragmentPagerAdapter adapter;ViewPager viewPager;RadioGroup rg;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化控件initView();//绑定RadioButtoninitViewPager();}private void initView() {viewPager = findViewById(R.id.main_viewpager);rg = findViewById(R.id.rg);rg.setOnCheckedChangeListener(this);rg.getChildAt(0).performClick();}private void initViewPager() {//添加碎片fragmentList.add(new HomeFragment());fragmentList.add(new MessageFragment());fragmentList.add(new CustomFragment());fragmentList.add(new LoginFragment());adapter = new MainFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);viewPager.setAdapter(adapter);viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int i, float v, int i1) {}@Overridepublic void onPageSelected(int i) {switch (i) {case 0:rg.check(R.id.rb_wallet);break;case 1:rg.check(R.id.rb_treasure);break;case 2:rg.check(R.id.rb_home);break;case 3:rg.check(R.id.rb_otc);break;}}@Overridepublic void onPageScrollStateChanged(int i) {}});}@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int checkedId) {switch (checkedId) {case R.id.rb_wallet:viewPager.setCurrentItem(0);break;case R.id.rb_treasure:viewPager.setCurrentItem(1);break;case R.id.rb_home:viewPager.setCurrentItem(2);break;case R.id.rb_otc:viewPager.setCurrentItem(3);break;}}
}

创建四个fragment代码这里就不贴了。会有点多。四个fragment还有功能实现。

看一下项目结构图

具体实现的界面如下


http://www.ppmy.cn/news/1557591.html

相关文章

React 组件中 State 的定义、使用及正确更新方式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式 前言 在 React 应用开发中&#xff0c;state …

uniapp中的uni-file-picker组件上传多张图片到服务器

由于在uniapp官方文档中的uni-file-picker组件可实现图片上传功能&#xff0c;默认的是上传到自带的服务&#xff0c;所以我们要修改成自己的服务器 1. 添加 :auto-upload"false" 加上这个取消自动上传 <uni-file-picker v-model"jobAddUpdateForm.imag…

使用Node.js搭配express框架快速构建后端业务接口模块Demo

使用Node.js搭配express框架快速构建后端业务接口模块Demo&#xff01;实际开发中&#xff0c;有很多项目&#xff0c;其实都是可以使用node.js来完成对接mysql数据库的&#xff0c;express确实使用起来非常简单&#xff0c;入手快&#xff0c;效率非常高。下面是一个简单的案例…

数据可视化-4. 漏斗图

目录 1. 漏斗图适用场景分析 1.1 业务流程分析 1.2 营销活动分析 1.3 客户生命周期管理 2. 漏斗图局限性 2.1 数据量限制 2.2 信息丢失 2.3 静态展示 2.4 过于简化 2.5 转化窗口期的影响 2.6 用户细分限制 3. 漏斗图代码实现 3.1 Python 代码实现 3.2 漏斗图效果…

Unity 圆形循环复用滚动列表

一.在上一篇垂直循环复用滚动列表的基础上&#xff0c;扩展延申了圆形循环复用滚动列表。实现此效果需要导入垂直循环复用滚动列表里面的类。 1.基础类 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using …

Deepin和Windows传文件(Xftp,WinSCP)

在Linux系统和Windows系统传输文件&#xff0c;通常通过Windows系统中安装的Xftp和WinSCP访问Linux系统&#xff0c;在访问前需要安装配置SSH-Server 安装SSH-Server 安装SSH-Server sudo apt-get install openssh-server ssh -v 启动SSH服务 sudo systemctl start ssh //也…

Telegram bot Mini-App开发实践---Telegram简单介绍与初始化小程序获取window.Telegram.WebApp对象并解析

➡️【好看的灵魂千篇一律,有趣的鲲志一百六七!】- 欢迎认识我~~ 作者:鲲志说 (公众号、B站同名,视频号:鲲志说996) 科技博主:极星会 星辉大使 后端研发:java、go、python、TS,前电商、现web3 主理人:COC杭州开发者社区主理人 、周周黑客松杭州主理人、 AI爱好…

react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由

使用BrowserRouter package 配置 &#xff08;这部分代码可以不做配置也能实现&#xff09; {"homepage": "/admin",}vite.config 配置 export default defineConfig({base: /admin])BrowserRouter 添加配置项 <BrowserRouter basename/admin>&l…