在开发中,我们经常碰到这样的控件,用来切换不同的Fragment
这里写图片描述

这种控件的实现的效果有多种多样,一般来说我们都是使用一个LinearLayout嵌套几个Button来实现,然后通过for循环来实现单一的选择。

虽然代码量不多,但对于我们这样有追求的人来说,是不会屑于使用方式了。因为android上已经有了个RadioGroup了,为毛还要写个for循环来控制单一的选择状态呢。

废话少说,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.yuyu.navigationbardemo.MainActivity"
tools:showIn="@layout/activity_main">

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/navigation" />

<RadioGroup
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
android:orientation="horizontal">
<!--android:drawableTop="@mipmap/ic_launcher"-->
<!--top的图片直接设置选择器的了,选择器状态state-->
<RadioButton
style="@style/MainRadioButtonStyle"
android:tag="0"
android:text="红色" />

<RadioButton
style="@style/MainRadioButtonStyle"
android:tag="1"
android:text="蓝色" />

<RadioButton
style="@style/MainRadioButtonStyle"
android:tag="2"
android:text="绿色" />

<RadioButton
style="@style/MainRadioButtonStyle"
android:tag="3"
android:text="黄色" />
</RadioGroup>

</RelativeLayout>

没啥好说的,这就一个简单的布局代码,要注意的是,在RadioButton里面我使用了自定义的风格。

这是RadioButton自定义风格,也没啥好说的

1
2
3
4
5
6
7
8
9
10
11
12
<style name="MainRadioButtonStyle">
<item name="android:layout_marginTop">8dp</item>
<item name="android:drawablePadding">2dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:textSize">12sp</item>
<item name="android:layout_weight">1</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@drawable/selector_navigation_text_bg</item>
</style>

同时为了能让被选择的字体变色,我们需要一个字体选择器和一个图标的选择器,选择器依然没什么好说的..
唯一需要注意的是:两个选择器的状态需要一致

字体颜色选择器:

1
2
3
4
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorPrimary" android:state_checked="true" />
<item android:color="@android:color/black" android:state_checked="false" />
</selector>

图标选择器:

1
2
3
4
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_selected" android:state_checked="true" />
<item android:drawable="@mipmap/icon_un_selected" android:state_checked="false" />
</selector>

布局文件什么的已经上完,是时候来搞java代码了,不废话,还是直接上java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private String TAG = "MainActivity";
private RadioGroup mNavigationBar;
private FragmentManager mFm;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}

private void init() {
mFm = getSupportFragmentManager();
mNavigationBar = (RadioGroup) findViewById(R.id.navigation);

//设置图标
int size = (int) getResources().getDimension(R.dimen.navigation_top_icon_size);
for (int i = 0, count = mNavigationBar.getChildCount(); i < count; i++) {
RadioButton rb = (RadioButton) mNavigationBar.getChildAt(i);
Drawable topIcon = getResources().getDrawable(R.drawable.selector_navigation_bg);
topIcon.setBounds(0, 0, size, size);
rb.setCompoundDrawables(null, topIcon, null, null);
rb.setId(i);
}
mNavigationBar.setOnCheckedChangeListener(this);
((RadioButton) mNavigationBar.getChildAt(0)).setChecked(true);
}

//进行Fragment切换
private void chooseFragment(String tag) {
int color = Color.RED;
switch (tag) {
case "0":
color = Color.RED;
break;
case "1":
color = Color.BLUE;
break;
case "2":
color = Color.GREEN;
break;
case "3":
color = Color.YELLOW;
break;
}
Fragment fragment = DummyFragment.newInstance(color);
FragmentTransaction ft = mFm.beginTransaction();
ft.replace(R.id.content, fragment);
ft.commit();
}

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb = (RadioButton) group.getChildAt(checkedId);
if (rb.isChecked()) {
chooseFragment(String.valueOf(rb.getTag()));
}
}

@SuppressLint("ValidFragment")
public static class DummyFragment extends Fragment {
int color;

public static DummyFragment newInstance(@ColorInt int color) {
return new DummyFragment(color);
}

private DummyFragment() {
}


private DummyFragment(int color) {
this.color = color;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.test_game_detail_fragment, container, false);
view.setBackgroundColor(color);
return view;
}
}

}

简单吧,这就是全部的控制代码了,虽然有几十行,但是核心的代码也就那么几行,核心方法就是onCheckedChanged回调函数,在最开始初始化控件的时候,我们按照排列顺序依次给没一个RadioButton设置了递增的id,所以在RadioGroup被选中时,便可以直接获取到被点中的子控件。

这里还有个坑需要注意!!!
那便是设置图标的时候,不能直接把下面这代码提到循环外

1
Drawable topIcon = getResources().getDrawable(R.drawable.selector_navigation_bg);

如果提到循环外,那他便是一个局部变量,会同时被所有RadioButton共用,到时候进行状态选择时,图标的状态将完全混乱!!

好了,最后是效果图:
这里写图片描述

最后的最后便是源代码快,点击我