基礎佈局
其中主要低 底部導航欄，其他都沒有什麼，上面是一個Fragment自己替換一下即可，關於Fragment的使用可參考本人之前的博客;
activity_main.xml中的佈局文件，由於樣式比較多可以單獨的放在style中的，鑑於方便查看，直接放在佈局文件中，activity_main中的代碼:
|
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
|
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" tools:context="com.example.googlebottomfragment.MainActivity"> <FrameLayout android:id="@+id/main_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/> <RadioGroup
android:id="@+id/tab_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/mmfooter_bg"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rbChat"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tab_selector_weixing"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="微信"
android:textColor="@color/tab_selector_tv_color"/>
<RadioButton
android:id="@+id/rbAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_tongxunlu"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="通訊錄"
android:textColor="@color/tab_selector_tv_color"/>
<RadioButton
android:id="@+id/rbFind"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_faxian"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="發現"
android:textColor="@color/tab_selector_tv_color"/>
<RadioButton
android:id="@+id/rbMe"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:background="@drawable/tab_selector_checked_bg"
android:button="@null"
android:drawableTop="@drawable/tab_selector_wo"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="我"
android:textColor="@color/tab_selector_tv_color"/> </RadioGroup> </LinearLayout> |
看下新建的佈局和資源文件：
其中tab_selector_tv_color.xml主要是用於控制切換的時候顯示下面字體的顏色:
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0"encoding="utf-8"?> <item android:state_checked="true"android:color="@android:color/white"/> <item android:state_checked="false"android:color="@android:color/darker_gray"/> <item android:color="@android:color/darker_gray"/></selector> |
其中tab_selector_checked_bg.xml佈局文件選中的時候每個RadioButtton的背景顏色:
|
1
2
3
4
5
6
7
8
|
<?xml version="1.0"encoding="utf-8"?> <item android:state_checked="true" android:drawable="@drawable/tab_bg_halo"/> </selector> |
其中tab_selector_weixing.xml主要是點擊的時候顯示不同的圖片，一個是綠色的，一個是白色:
|
1
2
3
4
5
6
|
<?xml version="1.0"encoding="utf-8"?> <item android:state_checked="false"android:drawable="@drawable/tab_weixin_normal"></item> <item android:state_checked="true"android:drawable="@drawable/tab_weixin_pressed"></item></selector> |
其中需要切換的chat.xml，address.xml，find.xml，me.xml都是一樣的，其中chat.xml代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?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"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="微信"
android:textSize="20sp" /> <TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp" /> </LinearLayout> |
實現Demo
MainActivity.java中的代碼，主要的就是設置一下OnCheckedChangeListener,注意MainActivity中需要繼承FragmentActivity:
|
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
|
public
void initView() { chat =new
FragmentChat(); getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat).commit(); myTabRg = (RadioGroup) findViewById(R.id.tab_menu); myTabRg.setOnCheckedChangeListener(newOnCheckedChangeListener() { @Override publicvoid
onCheckedChanged(RadioGroup group,int
checkedId) {
// TODO Auto-generated method stub
switch (checkedId) {
case R.id.rbChat: chat =
newFragmentChat(); getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat) .commit(); break;
case R.id.rbAddress: if
(address==null) { address =newFragmentAddress(); } Log.i("MyFragment","FragmentAddress"); getSupportFragmentManager().beginTransaction().replace(R.id.main_content, address).commit(); break;
case R.id.rbFind: find =
newFragmentFind(); getSupportFragmentManager().beginTransaction().replace(R.id.main_content, find) .commit(); break;
case R.id.rbMe: me =
newFragmentMe(); getSupportFragmentManager().beginTransaction().replace(R.id.main_content, me) .commit(); break;
default: break;
}
} }); |
FragmentChat中的代碼，其餘的三個FragmentAddress，FragmentFind,FragmentMe類似，就不貼代碼了，主要是繼承Fragment 即可:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public
class FragmentChat extendsFragment { @Override publicvoid
onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); } @Override publicView onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,@Nullable
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.chat,null); }} |
最後看張通訊錄的截圖吧:
