Android 中使用RadioGroup和Fragment实现底部导航栏的功能

在一些购物商城中经常会遇到这类效果,效果图如下:

先看效果图

步骤一:
完成对主界面main.xml的创建:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragment_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/rg_group"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            style="@style/fragment"
            android:drawableTop="@drawable/rb_home_selector"
            android:text="首页"
            />
        <RadioButton
            android:id="@+id/rb_discover"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            style="@style/fragment"
            android:drawableTop="@drawable/rb_discover_selector"
            android:text="热卖"
            />
        <RadioButton
            android:id="@+id/rb_cart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            style="@style/fragment"
            android:drawableTop="@drawable/rb_cart_selector"
            android:text="购物车"
            />
        <RadioButton
            android:id="@+id/rb_user"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            style="@style/fragment"
            android:drawableTop="@drawable/rb_user_selector"
            android:text="我的"
            />
    </RadioGroup>
</RelativeLayout>

radioButton中重复使用的样式:被抽取出来在style中写出

<style name="fragment">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:padding">5dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/rb_text_color</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">normal</item>
    </style>

点击RadioButton之后,导航栏文字颜色发生改变,声明在drawable中
名字为:rb_text_color代码如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#FF0000"/>
    <item android:color="#808080"/>
</selector>

导航栏图标发生变化这里只写其中一个其他三个都基本一样:

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

完成这些基本步骤之后,接下来就需要写Fragment的布局

<?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="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_cart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="购物车"
        android:textSize="30sp" />
</LinearLayout>

写出其中一个另外三个类似。

之后后台代码中创建Fragment,这里也写其中一个:CartFragment

package com.example.fragmentdemo;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class CartFragment extends Fragment {
    private View view;
    private TextView tv_home;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (view==null){
            view = inflater.inflate(R.layout.cart_fragment,container,false);
        }
        return view;
    }
}

步骤二:在MainActivity中,完成对fragment的切换功能
具体注释已在代码中给出。

package com.example.fragmentdemo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    private RadioButton rb_home,rb_discover,rb_cart,rb_user;
    private RadioGroup rg_group;
    private List<Fragment> fragments;
    private int position=0;
    private static final String TAG = "MainActivity";

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

        rb_home=findViewById(R.id.rb_home);
        rb_discover=findViewById(R.id.rb_discover);
        rb_cart=findViewById(R.id.rb_cart);
        rb_user=findViewById(R.id.rb_user);
        rg_group=findViewById(R.id.rg_group);

        //默认选中第一个
        rb_home.setSelected(true);

        rg_group.setOnCheckedChangeListener(this);

        //初始化fragment
        initFragment();

        //默认布局,选第一个
        defaultFragment();
    }

    private void defaultFragment() {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.fragment_layout,fragments.get(0));
        transaction.commit();
    }

    private void setSelected() {
        rb_home.setSelected(false);
        rb_discover.setSelected(false);
        rb_cart.setSelected(false);
        rb_user.setSelected(false);
    }

    private void initFragment() {
        fragments = new ArrayList<>();
        fragments.add(0,new HomeFragment());
        fragments.add(1,new DiscoverFragment());
        fragments.add(2,new CartFragment());
        fragments.add(3,new UserFragment());

    }

    @Override
    public void onCheckedChanged(RadioGroup group, int i) {
        //获取fragment管理类对象
        FragmentManager fragmentManager = getSupportFragmentManager();
        //拿到fragmentManager的触发器
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        switch (i){
            case R.id.rb_home:
                position=0;
                //调用replace方法,将fragment,替换到fragment_layout这个id所在UI,或者这个控件上面来
                //这是创建replace这个事件,如果想要这个事件执行,需要把这个事件提交给触发器
                //用commit()方法
                transaction.replace(R.id.fragment_layout,fragments.get(0));
                //将所有导航栏设成默认色
                setSelected();
                rb_home.setSelected(true);
                break;
            case R.id.rb_discover:
                position=1;
                transaction.replace(R.id.fragment_layout,fragments.get(1));
                //将所有导航栏设成默认色
                setSelected();
                rb_discover.setSelected(true);
                break;
            case R.id.rb_cart:
                position=2;
                transaction.replace(R.id.fragment_layout,fragments.get(2));
                //将所有导航栏设成默认色
                setSelected();
                rb_cart.setSelected(true);
                break;
            case R.id.rb_user:
                position=3;
                transaction.replace(R.id.fragment_layout,fragments.get(3));
                //将所有导航栏设成默认色
                setSelected();
                rb_user.setSelected(true);
                break;
        }
        //事件的提交
        transaction.commit();
    }
}

这样就完成了一个简单的底部导航栏功能,这个只能通过点击切换fragment,不能通过左右滑动去切换fragment。

以上就是Android 中使用RadioGroup+Fragment实现底部导航栏的功能的详细内容,更多关于android 底部导航栏的资料请关注我们其它相关文章!

时间: 2021-06-07

解决android 显示内容被底部导航栏遮挡的问题

描述: 由于产品需求,要求含有EditText的界面全屏显示,最好的解决方式是使用AndroidBug5497Workaround.assistActivity(this) 的方式来解决,但是华为和魅族手机系统自带的有底部导航栏,会造成一些布局被遮挡. 解决方案:在values-21的style.xml中添加android:windowDrawsSystemBarBackgrounds"并将值设置为false,方式如下 在style引用的主题里面加入android:windowDrawsSyst

Android用Scroller实现一个可向上滑动的底部导航栏

静静等了5分钟竟不知道如何写我这第一篇文章.每次都想好好的学习学习,有时间多敲敲代码,写几篇自己的文章.今天终于开始实行了,还是有点小激动的.哈哈! 好了废话就不多收了.我今天想实现的一个功能就是一个可以上滑底部菜单栏.为什么我会想搞这么个东西呢, 还是源于一年前,我们app 有这么个需求,当时百度也好谷歌也好,都没有找到想要的效果,其实很简单的一个效果.但是当时我也是真的太菜了,所有有关自定义的控件真的是不会,看别人的代码还好,真要是自己写,一点头绪都没有.因为我试着写了,真的不行啊.当时觉得

Android程序开发之Fragment实现底部导航栏实例代码

流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

android 全屏去掉底部虚拟导航栏的方法

如下所示: @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATIO

Android 弹出Dialog时隐藏状态栏和底部导航栏的方法

上代码 dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); dialog.getWindow().getDecorView().setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUi

Android使用RadioGroup实现底部导航栏

RadioGroup实现底部导航栏效果,如图:: 实现可最基本的导航栏功能,不能左右滑动,只能点击 1.内嵌的fragment的布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&q

超简单的几行代码搞定Android底部导航栏功能

超简单,几行代码搞定Android底部导航栏-–应项目需求以及小伙伴的留言,新加了两个方法: 设置底部导航栏背景图片 添加底部导航栏选项卡切换监听事件 底部导航栏的实现也不难,就是下边是几个Tab切换,上边一般是一个FrameLayout,然后FrameLayout中切换fragment. 网上有不少关于Android底部导航栏的文章,不过好像都只是关于下边Tab切的,没有实现Tab与fragment的联动,用的时候还要自己手写这部分代码,对我这个比较懒(据说,懒是程序员的一种美德_#)得程序员

PHP基于关联数组20行代码搞定约瑟夫问题示例

本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题.分享给大家供大家参考,具体如下: 记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的.调侃php应该写这个挺不行的. 于是 呵呵... 洋洋洒洒 20行,写完自己都有些不相信了.哈哈 让不了解php的见识哈php的快捷轻便之处. ps:其实个人挺反感用代码行数来衡量代码数量的,感觉常把代码行数挂嘴边的大多无奈装2.此文仅属闲余娱乐. 回顾一下约瑟夫问题:N个人围成一圈,从第一个开始报数,第M个将被杀掉,最

jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery.tex

神级程序员JavaScript300行代码搞定汉字转拼音

一.汉字转拼音的现状 首先应该说,汉字转拼音是个强需求,比如联系人按拼音字母排序/筛选:比如目的地(典型如机票购买) 按拼音首字母分类等等.但是这个需求的解决方案,但好像没听过什么巧妙的实现(特别是浏览器端),大概都需要一个庞大的字典. 具体到JavaScript,查查github和npm,比较优秀的处理汉字转拼音的库有pinyin 和pinyinjs,可以看到,两者都自带了庞大的字典. 这些字典动辄几十上百KB(有的甚至几MB),想在浏览器端使用还是需要一些勇气的.所以当我们碰到汉字转拼音的需

CMSPRESS 10行代码搞定 PHP无限级分类2

超级无限分类 使用简单 效率极高 核心代码10行不到 另外 求这个分类的不足,和更高效简单的无限分类方法 ^_^ 核心代码如下 class Tool { static public $treeList = array(); //存放无限分类结果如果一页面有多个无限分类可以使用 Tool::$treeList = array(); 清空 /** * 无限级分类 * @access public * @param Array $data //数据库里获取的结果集 * @param Int $pid

3kb jQuery代码搞定各种树形选择的实现方法

自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 (function (j) { j.fn.attrs = function (option) { var root = this, data = []; //默认参数 var def = { url: '/ajax/GetSort/', str: root.attr("str") || '0',

python用10行代码实现对黄色图片的检测功能

本文实例讲述了python用10行代码实现对黄色图片的检测功能.分享给大家供大家参考.具体如下: 原理:将图片转换为YCbCr模式,在图片中寻找图片色值像素,如果在皮肤色值内的像素面积超过整个画面的1/3,就认为是黄色图片. 申明:简单场景还是够用了,稍微复杂一点就不准确了,例如:整幅画面是人的头像,皮肤色值的像素必然超过50%,被误认为黄色图片就太武断了. 需要安装python图片库PIL支持 porn_detect.py如下: import sys,PIL.Image as Image im

C/C++百行代码实现热门游戏消消乐功能的示例代码

游戏设计 首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍 首先准备图片资源 一张背景图片,一张宝石图片 窗口初始化加载图片 Texture t1; t1.loadFromFile("images/bg2.png"); 当鼠标第一次单击时,记录下位置,第二次单击又记录一下位置,如果两个小方块相邻就交换位置,如果不相邻如图c的位置则,不发生变化 判断行或列如果三张一样的图片相邻,清除一下图片,进行刷新 实列 #i

Android 底部导航控件实例代码

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie