Android经典底部选项卡集成方式之一

时间:2021-02-19 06:26:50

先上效果图:
Android经典底部选项卡集成方式之一
许多应用都会带有这种底部选项卡,应用非常广泛,所以现总结一套模式,方便以后使用:
其设计模式非常简单:RadioGroup+RadioButton+FrameLayout+Fragment
1.MainActivity的布局:

<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:orientation="vertical"
tools:context=".MainActivity" >

<FrameLayout
android:id="@+id/fl"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>

<RadioGroup
android:id="@+id/rg
"
android:layout_width="
fill_parent"
android:layout_height="
wrap_content"
android:background="
@drawable/bottom_tab_bg"
android:gravity="
center_vertical"
android:orientation="
horizontal" >

<RadioButton
android:id="
@+id/rb1"
android:layout_width="
0dp"
android:layout_height="
wrap_content"
android:layout_weight="
1"
android:button="
@null"
android:drawableTop="
@drawable/selector_home"
android:gravity="
center"
android:text="
选项1"
android:textColor="
@color/selector_color_text" />

<RadioButton
android:id="
@+id/rb2"
android:layout_width="
0dp"
android:layout_height="
wrap_content"
android:layout_weight="
1"
android:button="
@null"
android:drawableTop="
@drawable/selector_center"
android:gravity="
center"
android:text="
选项2"
android:textColor="
@color/selector_color_text" />

<RadioButton
android:id="
@+id/rb3"
android:layout_width="
0dp"
android:layout_height="
wrap_content"
android:layout_weight="
1"
android:button="
@null"
android:drawableTop="
@drawable/selector_smartservice"
android:gravity="
center"
android:text="
选项3"
android:textColor="
@color/selector_color_text" />

<RadioButton
android:id="
@+id/rb4"
android:layout_width="
0dp"
android:layout_height="
wrap_content"
android:layout_weight="
1"
android:button="
@null"
android:drawableTop="
@drawable/selector_gov"
android:gravity="
center"
android:text="
选项4"
android:textColor="
@color/selector_color_text" />

<RadioButton
android:id="
@+id/rb5"
android:layout_width="
0dp"
android:layout_height="
wrap_content"
android:layout_weight="
1"
android:button="
@null"
android:drawableTop="
@drawable/selector_setting"
android:gravity="
center"
android:text="
选项5"
android:textColor="
@color/selector_color_text" />
</RadioGroup>

</LinearLayout>

注意:RadioButton 中有一个属性:android:button=”@null” 可以去掉RadioButton上的一个小圈圈

2.MainActivity中的代码:

public class MainActivity extends FragmentActivity {

private ArrayList<Fragment> fragmentsList = new ArrayList<Fragment>();
private RadioGroup group;

@Override
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
setContentView(R.layout.activity_main);
group = (RadioGroup) findViewById(R.id.rg);

// 给group设置监听事件,在监听事件实现fragment之间的切换
OnCheckedChangeListener listener = new MyOnCheckedChangeListener();
group.setOnCheckedChangeListener(listener);

// 选中首页,否则开始启动的时候画面展示白板
group.check(R.id.rb1);
}

private class MyOnCheckedChangeListener implements OnCheckedChangeListener {
// 在构造方法中创造fragment
public MyOnCheckedChangeListener() {
// 将new出来的fragment放置在集合中,以便后续取用
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
fragmentsList.add(new Fragment4());
fragmentsList.add(new Fragment5());
}

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// 当选中某一个radio的时候,就展现某一个fragment,用到fragment的事务
FragmentTransaction ft = getSupportFragmentManager()
.beginTransaction();
switch (checkedId) {
case R.id.rb1:
ft.replace(R.id.fl, fragmentsList.get(0));
break;
case R.id.rb2:
ft.replace(R.id.fl, fragmentsList.get(1));
break;
case R.id.rb3:
ft.replace(R.id.fl, fragmentsList.get(2));
break;
case R.id.rb4:
ft.replace(R.id.fl, fragmentsList.get(3));
break;
case R.id.rb5:
ft.replace(R.id.fl, fragmentsList.get(4));
break;
default:
break;
}
// 最后事务一定要提交
ft.commit();
}

}
}