目录
案例演示
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);
}
}
});
}
}