Android超簡單底部導航ImageView TextView FramLayout(一)

NO IMAGE

廢話前言
剛工作的時候就事採用這種方式實現的底部導航,方便快捷,重要的是好理解。
我將採用我覺得最清晰的思路實現這種方式

一、建立主頁面

為了便於檢視,我只寫了兩個tab,其他多的照葫蘆畫瓢就行了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--用來顯示切換的Fragment-->
<FrameLayout
android:id="@ id/fl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<!-- 分割線 -->
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/colorPrimary" />
<!-- 導航按鈕  -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="56dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- 選項卡一  -->
<LinearLayout
android:id="@ id/tab_home"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@ id/iv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_home_iv" />
<TextView
android:id="@ id/text_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:lineSpacingMultiplier="0"
android:textColor="@drawable/tab_home_text"
android:text="首頁" />
</LinearLayout>
<!--選項卡二-->
<LinearLayout
android:id="@ id/tab_my"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@ id/iv_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_my_iv" />
<TextView
android:id="@ id/text_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:textColor="@drawable/tab_my_text"
android:text="我的" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

可直接複製使用。沒什麼難度

二、為tab中的圖片文字建立不同狀態的檔案

1.首先是圖片的,不同狀態的兩個圖片
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/home_yes" android:state_selected="true"/>
<item android:drawable="@mipmap/home_no"/>
</selector>
2.文字的,不同狀態的顏色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/selected" android:state_selected="true"/>
<item android:color="@color/unselect" />
</selector>

文字顏色只有一個檔案即可,圖片的分別對應。

三、準備Fragment檔案

1.FragmentHome
public class FragmentHome extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layout_fragment_home, container, false);
return view;
}
}
2.對應xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首頁" />
</LinearLayout>

其他頁面仿照即可。很簡單的

四、主Activity

前面都是準備工作。接下來才是重頭戲,不過也很簡單啦。
思路真的很清晰
列提綱

  1. 獲取主頁面xml的控制元件
  2. 點選事件觸發
  3. 先把所有tab變成不被選中,然後把點選的變為選中效果
  4. 初始化APP預設點選第一個tab。

提綱在這,直接上程式碼了,簡單直接,咱們程式碼中說話

public class BottomCard extends Activity implements View.OnClickListener {
private TextView tab_home_text;
private TextView tab_my_text;
private ImageView tab_home_iv;
private ImageView tab_my_iv;
private FrameLayout fl_content;
private LinearLayout tab_home;
private LinearLayout tab_my;
private FragmentHome fragmentHome;
private FragmentMy fragmentMy;
private Fragment fragment_now = null;//用於儲存正在顯示的頁面,隱藏這個
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_bottomcard);
bindView();
}
private void bindView() {
tab_home_iv = this.findViewById(R.id.iv_home);
tab_home_text = this.findViewById(R.id.text_home);
tab_my_iv = this.findViewById(R.id.iv_my);
tab_my_text = this.findViewById(R.id.text_my);
fl_content = this.findViewById(R.id.fl_content);
tab_home = this.findViewById(R.id.tab_home);
tab_my = this.findViewById(R.id.tab_my);
tab_my.setOnClickListener(this);
tab_home.setOnClickListener(this);
onClick(tab_home);//初始化的時候預設點選第一個tab
}
@Override
public void onClick(View view) {
FragmentTransaction transaction = getFragmentManager().beginTransaction();
switch (view.getId()) {
case R.id.tab_home:
TabAllUnSelect();
TabSelect(tab_home_iv,tab_home_text);
if (fragmentHome == null) {
//如果為空,則new物件,新增到transaction,並展示出來
fragmentHome = new FragmentHome();
if(fragment_now != null){
// 如果當前正在顯示Fragment,則隱藏掉
transaction.hide(fragment_now);
}
transaction.add(R.id.fl_content, fragmentHome).show(fragmentHome).commit();
} else {
//不為空,則不新增直接展示當前
if(fragment_now != null){
transaction.hide(fragment_now);
}
// 隱藏當前的fragment,add下一個fragment到Activity中並顯示
transaction.show(fragmentHome).commitAllowingStateLoss();
}
fragment_now = fragmentHome;
break;
case R.id.tab_my:
TabAllUnSelect();
TabSelect(tab_my_iv,tab_my_text);
if (fragmentMy == null) {
fragmentMy = new FragmentMy();
if(fragment_now != null){
transaction.hide(fragment_now);
}
transaction.add(R.id.fl_content, fragmentMy).show(fragmentMy).commit();
} else {
if(fragment_now != null){
transaction.hide(fragment_now);
}
transaction.show(fragmentMy).commitAllowingStateLoss();
}
fragment_now = fragmentMy;
break;
}
}
/**
* 選中的tab 的圖示和字型顏色
*/
public void TabSelect(View iv, View text) {
iv.setSelected(true);
text.setSelected(true);
}
/**
* 所有的tab 的圖示和字型顏色
*/
public void TabAllUnSelect() {
tab_home_iv.setSelected(false);
tab_home_text.setSelected(false);
tab_my_iv.setSelected(false);
tab_my_text.setSelected(false);
}
}

到這裡就完成了。思路清晰,看似慌中帶急,實則穩中帶皮。我去研究RadioButton方式了

補充 常用方式比較
1.在我學習RadioButton方式後,發現與單獨TextView一樣,都是使用drawableTop這個屬性,但是這種屬性不易控制導航內部的文字與圖片的間距。所以我覺得ImageView TextView的方式靈活性最高。而且思路也挺清晰的
2.還有google提供的bottomnevagition方式,封裝的挺好的,但是我使用又換掉了,好像是因為沒有辦法控制導航和正文的分割線,具體忘了,所有也就放棄了這種。