通过实训案例来掌握
1.创建安卓项目
2.准备图片资源
3.创建背景选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/music_pressed" android:state_checked="false"/>
<item android:drawable="@mipmap/music_normal" android:state_checked="false"/>
<selector>
4.创建
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/datepicker_pressed" android:state_checked="false"/>
<item android:drawable="@mipmap/datepicker_normal" android:state_checked="false"/>
<selector>
5.创建
<?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="false"/>
<selector>
6.创建
<?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>
7.主布局资源文件
<?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_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>
8.字符串资源文件定义变量 string.xnl
<resources>
<string name="app_name">底部导航条</sring>
<string name="welcome">底部导航条</sring>
<string name="datepicker">底部导航条</sring>
<string name="timepicker">底部导航条</sring>
</resources>
9.运行看此时的效果
10.创建三个碎片(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" />
</FrameLayout>
- 修改碎片界面
package net.yuanjing.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:textSize="20sp"
android:text="@string/select_date"/>
</LinearLayout>
- 选择碎片界面类
package net.yuanjing.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/timepicker"
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:textSize="20sp"
android:text="@string/select_time"/>
</LinearLayout>
- 选择碎片界面类
package net.yuanjing.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.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();
}
});
}
}
- 注意:这里会出现一个版本的错误,需要在下图下面讲21改为23,这样就可以了。
11.修改主界面类
package net.yuanjing.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_select_date);
rbSelectTime = findViewById(R.id.rb_select_time);
// 创建三个碎片实例
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_select_date: // 选择日期
showFragment(datePickerFragment);
break;
case R.id.rb_select_time: // 选择时间
showFragment(timePickerFragment);
break;
}
}
});
}
}
12.最后运行,看一下效果