Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言
大家好,我是 Vic,今天給大家帶來AndroidStudio制作底部導航欄以及用Fragment實現切換功能的概述,希望你們喜歡
學習目標
AndroidStudio制作底部導航欄以及用Fragment實現切換功能,用戶點擊底部導航欄可以實現三個模塊的跳轉。
圖片資源
需要底部導航欄三個點擊按鈕的圖片資源
main_button_1.png,main_button_2.png,main_button_3.png
以及點擊變換的圖片資源
main_button_1_selected.png,
main_button_2_selected.png,
main_button_3_selected.png.
以上圖片資源都放進drawable文件夾中
activity_main 布局
在 MainActivity 頁面中主要有兩個區域:
一個是放 Fragment 的 main_body
一個是放底部導航欄的 main_bottom_bar
主要的Fragment代碼塊:
android:orientation="vertical"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/main_body"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
主要的底部導航欄的代碼塊:
android:id="@+id/main_bottom_bar"
android:layout_alignParentBottom="true"
android:background="#F2F2F2"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="55dp">
android:layout_weight="1"
android:id="@+id/bottom_bar_1_btn"
android:layout_width="0dp"
android:layout_height="match_parent">
android:id="@+id/bottom_bar_text_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="3dp"
android:gravity="center"
android:singleLine="true"
android:text="button_1"
android:textColor="#666666"
android:textSize="14sp"/>
android:layout_width="27dp"
android:layout_height="27dp"
android:layout_above="@+id/bottom_bar_text_1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="3dp"
android:id="@+id/bottom_bar_image_1"
android:src="@drawable/main_button_1"/>
....
實例化控件
實例化控件一些瑣碎的代碼:
//先實例化控件,那我給出自己打的實例化代碼
//來自main_title_bar.xml
private TextView tv_main_title;//標題
private TextView tv_back;//返回按鈕
private RelativeLayout title_bar;
//來自activity_main.xml
private RelativeLayout main_body;
private TextView bottom_bar_text_1;
private ImageView bottom_bar_image_1;
...
private LinearLayout main_bottom_bar;
private RelativeLayout bottom_bar_1_btn;
private RelativeLayout ...;
然后
initView();
//實例化
private void initView(){
//標題顯示
tv_back=findViewById(R.id.tv_back);
tv_main_title=findViewById(R.id.tv_main_title);
title_bar=findViewById(R.id.title_bar);
//底部導航欄
main_body=findViewById(R.id.main_body);
bottom_bar_text_1=findViewById(R.id.bottom_bar_text_1);
bottom_bar_image_1=findViewById(R.id.bottom_bar_image_1);
...
//包含底部 android:id="@+id/main_bottom_bar"
main_bottom_bar=findViewById(R.id.main_bottom_bar);
//private RelativeLayout bottom_bar_1_btn;
bottom_bar_1_btn=findViewById(R.id.bottom_bar_1_btn);
//添加點擊事件
bottom_bar_1_btn.setOnClickListener(this);
...
//技巧
//tv_back.setVisibility(View.GONE);
tv_main_title.setText("課程");
title_bar.setBackgroundColor(Color.parseColor("#30B4FF"));
}
底部導航欄狀態的切換方法
給MainActivity加一個setSelectStatus() 方法,方法里用參數index來判斷當前選的按鈕
示例代碼
private void setSelectStatus(int index) {
switch (index){
case 0:
//圖片點擊選擇變換圖片,顏色的改變,其他變為原來的顏色,并保持原有的圖片
bottom_bar_image_1.setImageResource(R.drawable.main_button_1_selected);
bottom_bar_text_1.setTextColor(Color.parseColor("#0097F7"));
//其他的文本顏色不變
bottom_bar_text_2.setTextColor(Color.parseColor("#666666"));
bottom_bar_text_3.setTextColor(Color.parseColor("#666666"));
//圖片也不變
bottom_bar_image_2.setImageResource(R.drawable.main_button_2);
bottom_bar_image_3.setImageResource(R.drawable.main_button_3);
break;
case 1://同理如上
...
break;
case 2://同理如上
...
break;
}
}
實現底部導航欄的響應
導航欄文本顏色和圖片切換效果的方法寫好了,接下來是點擊響應的方法
給MainActivity加上View.OnClickListener接口
在生成的 onClick() 方法中加上導航欄區域的響應
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.bottom_bar_1_btn:
setSelectStatus(0);
break;
case R.id.bottom_bar_2_btn:
setSelectStatus(1);
break;
case R.id.bottom_bar_3_btn:
setSelectStatus(2);
break;
}
}
別忘了在initView() 中添加監聽器
bottom_bar_1_btn.setOnClickListener(this);
三個 fragment 的創建
就是簡單的創建三個布局,展現Fragment_1/2/3 即可
示例代碼塊
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
android:text="Fragment_1"
android:textColor="@android:color/black"
android:textSize="50sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
然后通過我之前寫的插件自動生成三個Fragemnt ,就可以了不用管生成的Fragement_1/2/3.java文件了,
插件文章
《 Android開發的插件Code Generator與LayoutCreator的安裝與使用,提升你的開發效率 》
三個fragment的顯示和切換
在MainActivity里把AppCompatActivity改為FragmentActivity
把Fragment加到Activity里的代碼
通常用這個來展示,但是代碼過長,我們來簡化一下
/*
* FragmentManager manager = getSupportFragmentManager();
* FragmentTransaction transaction = manager.beginTransaction();
* transaction.add(R.id.main_body,new CourseFragment()).commit();
* */
我們先來添加一個setMain() 方法,來顯示打開界面時,顯示的初始頁面
/用于打開初始頁面
private void setMain() {
//getSupportFragmentManager() -> beginTransaction() -> add -> (R.id.main_boy,顯示課程 new CourseFragment()
this.getSupportFragmentManager().beginTransaction().add(R.id.main_body,new CourseFragment()).commit();
}
上面的代碼中可以看到相對來說比較少,那我們就用這個,然后我們來實現點擊底部導航欄來切換響應的fragment,我們在onClick()中添加即可。
case R.id.bottom_bar_1_btn:
//添加
getSupportFragmentManager().beginTransaction().replace(R.id.main_body,new Button_1Fragment()).commit();
setSelectStatus(0);
break;
如果覺得不錯,那就點個贊吧!??
總結
本文講了AndroidStudio制作底部導航欄以及用Fragment實現切換功能,界面的布局介紹,如果您還有更好地理解,歡迎溝通
定位:分享 Android&Java知識點,有興趣可以繼續關注
總結
以上是生活随笔為你收集整理的Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 用VSCode写IEEE论文
- 下一篇: Windows系统下oracle数据库每