安卓学习 Day18：利用单选按钮实现底部导航条

越来越不懂！

已于 2022-07-03 21:54:04 修改

阅读量164

点赞数

分类专栏：安卓编程基础文章标签：学习 android android studio

于 2022-07-03 19:46:09 首次发布

本文链接：https://blog.csdn.net/zs18384022951/article/details/125586765

版权

安卓编程基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

案例演示

1、创建安卓应用

选择模板

完善项目信息

2、添加图片

3、创建背景选择器

创建背景选择器 - welcome_selector.xml

创建背景选择器 - datepicker_selector.xml

创建背景选择器 - timepicker_selector.xml

创建文本选择器

4、编写主布局资源文件

源代码

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

5、编写字符串资源文件

运行程序，查看效果

创建三个碎片，用于底部导航按钮切换

6、创建碎片

（1）创建欢迎碎片

修改欢迎碎片布局文件

<?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:text="@string/welcome_to_lzy"
        android:textColor="#ff0000"
        android:textSize="20sp" />
</FrameLayout>

修改字符串资源文件

<resources>
    <string name="app_name">底部导航栏</string>
    <string name="welcome">欢迎</string>
    <string name="datepicker">选择日期</string>
    <string name="timepicker">选择时间</string>
    <string name="welcome_to_lzy">泸职院欢迎你~</string>
</resources>

修改碎片界面类

package net.zs.bottomnavigationbar;

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）创建选择日期碎片

编写布局资源文件

<?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:text="@string/select_date"
        android:textSize="20sp" />

</LinearLayout>

修改字符串资源文件

<resources>
    <string name="app_name">底部导航栏</string>
    <string name="welcome">欢迎</string>
    <string name="datepicker">选择日期</string>
    <string name="timepicker">选择时间</string>
    <string name="welcome_to_lzy">泸职院欢迎你~</string>
    <string name="select_date">选择日期</string>
</resources>

编写选择日期碎片界面类

package net.zs.bottomnavigationbar;

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）创建选择时间碎片

编写布局资源文件

<?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=".TimePickerFragment">

    <TimePicker
        android:id="@+id/datepicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_select_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/select_time"
        android:textSize="20sp" />

</LinearLayout>

修改字符串资源文件

<resources>
    <string name="app_name">底部导航栏</string>
    <string name="welcome">欢迎</string>
    <string name="datepicker">选择日期</string>
    <string name="timepicker">选择时间</string>
    <string name="welcome_to_lzy">泸职院欢迎你~</string>
    <string name="select_date">选择日期</string>
    <string name="select_time">选择时间</string>
</resources>

编写选择时间界面类

package net.zs.bottomnavigationbar;

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.TimePicker;
import android.widget.Toast;

public class TimePickerFragment extends Fragment {

    private Button btnSelectTime;
    private TimePicker timePicker;

    @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_time_picker, null);
        // 通过资源标识符获取控件实例
        btnSelectTime = view.findViewById(R.id.btn_select_time);
        timePicker = view.findViewById(R.id.timepicker);
        // 进行事件处理
        eventHandling();
        // 返回碎片视图
        return view;

    }

    private void eventHandling() {
        // 对现选择时间按钮进行事件处理
        btnSelectTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int hour = timePicker.getHour();
                int minute = timePicker.getMinute();
                Toast.makeText(getActivity(), hour + "时" + minute + "分", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

需要在模块的构建文件里修改minSdk 23

7、修改主界面类

package net.zs.bottomnavigationbar;

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.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends AppCompatActivity {
    private RadioGroup rgBottomBar;
    private RadioButton rbWelcome;
    private RadioButton rbSelectDate;
    private RadioButton rbSelectTime;
    private WelcomeFragment welcomeFragment;
    private DatePickerFragment datePickerFragment;
    private TimePickerFragment timePickerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);
        // 通过资源标识符获取控件实例
        rgBottomBar = findViewById(R.id.rg_bottom_bar);
        rbWelcome = findViewById(R.id.rb_welcome);
        rbSelectDate = findViewById(R.id.rb_datepicker);
        rbSelectTime = findViewById(R.id.rb_timepicker);
        // 创建三个碎片实例
        welcomeFragment = new WelcomeFragment();
        datePickerFragment = new DatePickerFragment();
        timePickerFragment = new TimePickerFragment();
        // 进行事件处理
        eventHandling();
        // 显示欢迎碎片
        showFragment(welcomeFragment);
    }

    /**
     * 显示碎片
     * @param fragment
     */
    private void showFragment(Fragment fragment) {
        // 创建碎片管理器
        FragmentManager fm = getSupportFragmentManager();
        // 创建碎片事务
        FragmentTransaction ft = fm.beginTransaction();
        // 在容器里显示碎片
        ft.replace(R.id.container, fragment);
        // 提交碎片事务
        ft.commit();
    }

    private void eventHandling() {
        rgBottomBar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb_welcome: // 欢迎
                        showFragment(welcomeFragment);
                        break;
                    case R.id.rb_datepicker: // 选择日期
                        showFragment(datePickerFragment);
                        break;
                    case R.id.rb_timepicker: // 选择时间
                        showFragment(timePickerFragment);
                }
            }
        });
    }
}