RadioGroup和Fragment相结合实现点击下部RadioButton进行Fragment的切换
页面布局文件
<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=".activity.MainActivity">
//要切换的布局占位
<FrameLayout
android:id="@+id/fl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
//底部导航的问题
<FrameLayout
android:layout_width="match_parent"
//高度设置为固定的高度,位置放在bottom底部
android:layout_height="50dp"
android:layout_gravity="bottom">
<!--底部导航-->
<RadioGroup
android:id="@+id/rg_home"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="@drawable/bar_bg"
android:orientation="horizontal"
//这个是总共的个数 用来平均分配
android:weightSum="5">
<RadioButton
android:id="@+id/rb_home"
//这个实在style中的一个设置 见下面
style="@style/tab_style"
android:layout_height="match_parent"
//下面这属性是在上边有一个图片做成的状态选择器
android:drawableTop="@drawable/tab_home_bg"
android:text="@string/home" />
<RadioButton
android:id="@+id/rb_search"
style="@style/tab_style"
android:layout_height="match_parent"
android:drawableTop="@drawable/tab_search_bg"
android:text="@string/search" />
<RadioButton
android:id="@+id/rb_bonnd"
style="@style/tab_style"
android:layout_height="match_parent"
android:drawableTop="@drawable/tab_brand_bg"
android:text="@string/brand" />
<RadioButton
android:id="@+id/rb_shopping"
style="@style/tab_style"
android:layout_height="match_parent"
android:drawableTop="@drawable/tab_shopping_bg"
android:text="@string/shopping" />
<RadioButton
android:id="@+id/rb_more"
style="@style/tab_style"
android:layout_height="match_parent"
android:drawableTop="@drawable/tab_more_bg"
android:text="@string/more" />
</RadioGroup>
</FrameLayout>
</LinearLayout>
上文中style的分析
<style name="tab_style">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
//shape的设置
<item name="android:background">@drawable/bg_tab_shape</item>
<item name="android:button">@null</item>
<item name="android:drawablePadding">-13dp</item>
<item name="android:gravity">center</item>
//字体颜色设置
<item name="android:textColor">@color/tab_text_color</item>
</style>
上文中的shape分析:
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
</shape>
上文中的color分析 color和图片设置的状态选择器是不一样的 (注意点)
实质上是一个状态选择器 不同的状态显示两种 不同的颜色
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/tab_checked_color"/>
<item android:color="@color/tab_unchecked_color"/>
</selector>
上文是整个界面的初步的布局 总共分上部分的设置的用来显示fragment部分和下半部分固定高度的显示的RadioButton部分 有几个特殊的方法要记住 还有 就是设置透明度和不可见的内容。
代码部分
代码部分包含fragment的初始化 RadioGroup的每个按钮的点击事件和相关的切换的相关联。
设置一个fragment的集合 用来提供给切换时操作:
private List<Fragment> fragments = new ArrayList<>();
fragments.add(new HomeFragment());
fragments.add(new SearchFragment());
fragments.add(new BoundFragment());
fragments.add(new ShoppingFragment());
fragments.add(new MoreFragment());
下一句是默认的初始设置Fragment为homeFragment。
getSupportFragmentManager().beginTransaction().replace (R.id.fl_content, fragments.get(0)).commit();
所有的相关的的Fragment都在一个集合中,可以通过集合进行相关的操作
通过点击RadioButton进行切换Fregment
private RadioGroup.OnCheckedChangeListener rgCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
int currentPosition = 0;
switch (checkedId) {
case R.id.rb_home:
currentPosition = 0;
break;
case R.id.rb_search:
currentPosition = 1;
break;
case R.id.rb_bonnd:
currentPosition = 2;
break;
case R.id.rb_shopping:
bv.hide();
currentPosition = 3;
break;
case R.id.rb_more:
currentPosition = 4;
break;
}
//上文通过获得不同的点击的位置来设置currentPosition的值,下文通过将该值传递给数组进行相关的Fragment的切换。
getSupportFragmentManager().beginTransaction().replace(R.id.fl_content, fragments.get(currentPosition)).commit();
}
};
说明:
(1)这个框架支持点击切换Fragment 不支持左右的滑动来切换Fragment。一般的金融类商场类的应用也不支持相关的左右的切换。
(2)这个框架可尝试工厂模式。