安卓案例：利用单选按钮实现底部导航栏

Posted howard2005

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了安卓案例：利用单选按钮实现底部导航栏相关的知识，希望对你有一定的参考价值。

文章目录

一、运行效果

二、涉及知识点

  1. 活动（Activity）
  2. 碎片（Fragment）
  3. 标签（TextView）
  4. 按钮（Button）
  5. 单选按钮组（RadioGroup）
  6. 单选按钮（RadioButton）
  7. 日期选择器（DatePicker）
  8. 时间选择器（TimePicker）
  9. 背景选择器

三、实现步骤

（一）创建安卓应用

  • 基于Empty Activity创建安卓应用 - BottomNavigationBar
  • 单击【Finish】按钮

（二）准备图片素材

  • 将项目所需图片拷贝到mipmap-mdpi目录

（三）创建背景选择器

1、创建背景选择器 - welcome_selector.xml

  • 在drawable目录里创建welcome_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/welcome_normal" android:state_checked="false"/>
    <item android:drawable="@mipmap/welcome_pressed" android:state_checked="true"/>
</selector>

2、创建背景选择器 - datepicker_selector.xml

  • 在drawable目录里创建datepicker_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/datepicker_normal" android:state_checked="false"/>
    <item android:drawable="@mipmap/datepicker_pressed" android:state_checked="true"/>
</selector>

3、创建背景选择器 - timepicker_selector.xml

  • 在drawable目录里创建timepicker_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/timepicker_normal" android:state_checked="false"/>
    <item android:drawable="@mipmap/timepicker_pressed" android:state_checked="true"/>
</selector>

4、创建背景选择器 - text_selector.xml

  • 在drawable目录里创建text_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_pressed="false" android:color="#009900"/>
    <item android:drawable="@mipmap/ic_launcher" android:color="#000000"/>
</selector>

（四）主布局资源文件

  • 主布局资源文件 - activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/rl_bottom_bar"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/background">
    </FrameLayout>

    <RelativeLayout
        android:id="@+id/rl_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#fff">

        <RadioGroup
            android:id="@+id/rg_bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:orientation="horizontal"
            android:padding="5dp">

            <RadioButton
                android:id="@+id/rb_welcome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/welcome_selector"
                android:gravity="center"
                android:text="@string/welcome"
                android:textColor="@drawable/text_selector"
                android:textSize="15sp" />

            <RadioButton
                android:id="@+id/rb_select_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/datepicker_selector"
                android:gravity="center"
                android:text="@string/datepicker"
                android:textColor="@drawable/text_selector"
                android:textSize="15sp" />

            <RadioButton
                android:id="@+id/rb_select_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/timepicker_selector"
                android:gravity="center"
                android:text="@string/timepicker"
                android:textColor="@drawable/text_selector"
                android:textSize="15sp" />
        </RadioGroup>
    </RelativeLayout>
</RelativeLayout>

（五）字符串资源文件

  • 在字符串资源文件 - strings.xml里定义变量
<resources>
    <string name="app_name">底部导航栏</string>
    <string name="welcome">欢迎</string>
    <string name="datepicker">选择日期</string>
    <string name="timepicker">选择时间</string>
</resources>
  • 运行程序，查看效果
  • 单击【选择日期】按钮
  • 单击【选择时间】按钮
  • 下面我们就要创建三个碎片（Fragment），用底部导航按钮来切换。

（六）创建碎片

1、创建欢迎碎片

  • 基于模板创建WelcomeFragment


  • 修改欢迎碎片布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@mipmap/background"
    tools:context=".WelcomeFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#ff0000"
        android:text="@string/welcome_to_lzy" />
</FrameLayout>
  • 修改字符串资源文件 - strings.xml
  • 修改碎片界面类 - WelcomeFragment
package net.huawei.navigation;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class WelcomeFragment extends Fragment 
   
    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);        
    

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState)         
        return initView();
    

    private View initView() 
        // 获取布局打气筒
        LayoutInflater inflater = LayoutInflater.from(getActivity());
        // 获取碎片视图
        View view = inflater.inflate(R.layout.fragment_welcome, null);
        // 返回视图
        return view;

2、创建选择日期碎片

  • 基于模板创建 - DatePickerFragment

  • 选择日期碎片布局文件
<?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:background="@mipmap/background"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".DatePickerFragment">

    <DatePicker
        android:id="@+id/datepicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    
    <Button
        android:id="@+id/btn_select_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="@string/select_date"/>
</LinearLayout>
  • 字符串资源文件
  • 选择日期碎片界面类
package net.huawei.navigation;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.Toast;

public class DatePickerFragment extends Fragment 
    private Button btnSelectDate;
    private DatePicker datePicker;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) 
        return initView();
    

    private View initView() 
        // 获取布局打气筒
        LayoutInflater inflater = LayoutInflater.from(getActivity());
        // 获取碎片视图
        View view = inflater.inflate(R.layout.fragment_date_picker, null);
        // 通过资源标识符获取控件实例
        btnSelectDate = view.findViewById(R.id.btn_select_date);
        datePicker = view.findViewById(R.id.datepicker);
        // 进行事件处理
        eventHandling();
        // 返回碎片视图
        return view;
    

    private void eventHandling() 
        // 对选择日期按钮进行事件处理
        btnSelectDate.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                int year = datePicker.getYear();
                int month = datePicker.getMonth() + 1;
                int day = datePicker.getDayOfMonth();
                Toast.makeText(getActivity(), year + "年" + month + "月" + day + "日", Toast.LENGTH_SHORT).show();
            
        );

3、创建选择时间碎片

  • 基于模板创建 - TimePickerFragment

  • 选择时间碎片布局文件
<?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:background="@mipmap/background"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="20dp"
    android 底部导航栏


 android关于底部导航栏的点击事件问题。


 android关掉导航栏后怎么


 Android如何隐藏底部虚拟按键


 Android Android studio 底部导航栏的基本实现


 Android Android studio 底部导航栏的基本实现