RadioGroup與RadioButton快速實現底部導航
阿新 • • 發佈:2019-02-04
閱讀與使用此文知識,僅需5-20分鐘
大多專案之初,我們都需要搭建UI介面,而底部導航的承載效果是不可或缺的。
在我認知中有三種方式:
1.Tablayout+ViewPager+Fragment
2.LinearLayout+TextView+ImageView
3.RadioGroup+RadioButton
Effect:
注意點:
Xml屬性Icon位於文字上方
//請注意圖片大小,如果圖片太大,圖片本身與文字都會顯示不全
android:drawableTop="@drawable/這裡呼叫圖"
但是查詢之後可能有四種方式去實現這樣的一個效果,大家都可以輕鬆的百度到,只不過因為講解的多而有些朋友連貫不起來,所以我特此寫了一個Demo用於使用,下面進入程式碼時間(程式碼中已經註釋)。
MainActivity :
package com.example.dow.radiogroup;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private FrameLayout mFragment;
private RadioGroup mGroup;
private RadioButton mR1;
private RadioButton mR2;
private RadioButton mR3;
private RadioButton mR4;
private UsFragment rb1,rb2,rb3,rb4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mFragment = (FrameLayout) findViewById(R.id.fl);
mGroup = (RadioGroup) findViewById(R.id.ra_group);
mR1 = (RadioButton) findViewById(R.id.ra_1);
mR2 = (RadioButton) findViewById(R.id.ra_2);
mR3 = (RadioButton) findViewById(R.id.ra_3);
mR4 = (RadioButton) findViewById(R.id.ra_4);
//設定Group監聽,也就是下方的RadioButton的狀態監聽
mGroup.setOnCheckedChangeListener(this);
//初始化預設第一個RadioButton為選中狀態
mR1.setChecked(true);
}
//此下介紹:
//rb 的變數為我們要切換的Fragment,這裡因為是共用了同一個Fragment,只用於簡單展示,
// 如果在我們的專案中的話,建議建立對應的Frgament
//問題點:
// 有時候在走onCheckedChanged方法的hideAllFragment()方法的時候,並沒有實現隱藏之前的Fragment,
// 如果出現這個問題,嘗試在else的判斷中加入 hideAllFragment(transaction);方法
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
//Fragment的簡單使用,獲取管理者,開啟事務,對應使用replace或hind,show方法
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
hideAllFragment(transaction);
switch (checkedId){
case R.id.ra_1:
if(rb1==null){
rb1 = new UsFragment("第一個Fragment-首頁");
transaction.add(R.id.fl,rb1);
}else{
transaction.show(rb1);
}
break;
case R.id.ra_2:
if(rb2==null){
rb2= new UsFragment("第二個Fragment-經營");
transaction.add(R.id.fl,rb2);
}else{
transaction.show(rb2);
}
break;
case R.id.ra_3:
if(rb3==null){
rb3 = new UsFragment("第三個Fragment-管理");
transaction.add(R.id.fl,rb3);
}else{
transaction.show(rb3);
}
break;
case R.id.ra_4:
if(rb4==null){
rb4 = new UsFragment("第四個Fragment-中心");
transaction.add(R.id.fl,rb4);
}else{
transaction.show(rb4);
}
break;
}
transaction.commit();
}
public void hideAllFragment(FragmentTransaction transaction){
if(rb1!=null){
transaction.hide(rb1);
}
if(rb2!=null){
transaction.hide(rb2);
}
if(rb3!=null){
transaction.hide(rb transaction.hide(rb2);
}
if(rb3!=null){
transaction.hide(r`
3);
}
if(rb4!=null){
transaction.hide(rb4);
}
}
}
UsFragment(這個是我們用於切換的Fragment,在實際專案中就是幾大模組):
package com.example.dow.radiogroup;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class UsFragment extends Fragment {
private String context;
private TextView mTV;
public UsFragment(String context){
this.context = context;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.us_fragment,container,false);
mTV = (TextView)view.findViewById(R.id.textView);
mTV.setText(context);
return view;
}
}
MainActivity Xml:
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="com.example.dow.radiogroup.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/fl"
/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#2B2B2B"
/>
<RadioGroup
android:orientation="horizontal"
android:layout_width="match_parent"
android:id="@+id/ra_group"
android:layout_height="70dp">
<RadioButton
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:button="@null"
android:id="@+id/ra_1"
android:drawableTop="@drawable/checket_box"
android:gravity="center"
android:text="首頁"
android:drawablePadding="3dp"
android:textColor="@drawable/home_tab"
android:layout_gravity="center"
/>
<RadioButton
android:layout_width="0dp"
android:button="@null"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:id="@+id/ra_2"
android:text="經營"
android:drawablePadding="3dp"
android:drawableTop="@drawable/checket_box"
android:layout_gravity="center"
android:textColor="@drawable/home_tab"
/>
<RadioButton
android:layout_width="0dp"
android:button="@null"
android:layout_weight="1"
android:gravity="center"
android:text="管理"
android:drawablePadding="3dp"
android:layout_height="wrap_content"
android:id="@+id/ra_3"
android:drawableTop="@drawable/checket_box"
android:layout_gravity="center"
android:textColor="@drawable/home_tab"
/>
<RadioButton
android:layout_width="0dp"
android:button="@null"
android:drawableTop="@drawable/checket_box"
android:layout_weight="1"
android:text="中心"
android:drawablePadding="3dp"
android:gravity="center"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:id="@+id/ra_4"
android:textColor="@drawable/home_tab"
/>
</RadioGroup>
</LinearLayout>
UsFragment Xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:gravity="center"
android:text="所需模組"/>
</LinearLayout>
這位朋友寫的也蠻好的,大家可以借鑑下:
http://blog.csdn.net/jxq1994/article/details/52573506