Android自定义控件—-RadioGroup达成APP首页底部Tab的切换

【声明】 

欢迎转发,但请保留小说原来出处→_→ 

生命壹号:http://www.cnblogs.com/smyhvae/

小说来源:http://www.cnblogs.com/smyhvae/p/4463931.html

 

【正文】

落到实处APP首页底部Tab的切换已经见过四三种艺术了,先来看运转的机能图吧:

图片 1

今天我们就用RadioGroup的措施来落实以下。

 

【开发环境】

物理机版本:win 7豪华型(陆十一位)

IDE版本:Android Studio 1.2 preview

工程文件结构:(本文最终有源码)

图片 2

  • HomeActivity.java:整个首页的界面
  • 四个Fragment.java:对应的八个Fragment界面
  • drawable文件夹中是对应tab和文字切换的气象
  • 剩余的xml文件便是应和的Activity和Fragment的布局文件了。

 

① 、布局文件:

(1)activity_home.xml:HomeActivity的布局文件

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5 
 6     tools:context=".MainActivity">
 7 
 8     <!--tab上方的显示区域-->
 9     <FrameLayout
10         android:id="@+id/mHomeContent"
11         android:layout_width="match_parent"
12         android:layout_height="match_parent"
13         android:layout_above="@+id/mHomeRadioGroup">
14 
15         </FrameLayout>
16 
17     <!--底下的四个tab-->
18     <RadioGroup
19         android:id="@+id/mHomeRadioGroup"
20         android:layout_width="match_parent"
21         android:layout_height="56dp"
22         android:orientation="horizontal"
23         android:layout_alignParentBottom="true"
24         android:background="@color/tab_bg"  >
25 
26         <RadioButton
27             android:id="@+id/mHomeHomeRb"
28             android:layout_width="0dp"
29             android:layout_height="wrap_content"
30             android:layout_weight="1"
31             android:button="@null"
32             android:gravity="center"
33             android:text="@string/home_home"
34             android:textColor="@drawable/selector_tab_text_color"
35             android:background="@color/tab_bg"
36             android:drawableTop="@drawable/selector_tab_home"
37            />
38 
39         <RadioButton
40             android:id="@+id/mHomeFindRb"
41             android:layout_width="0dp"
42             android:layout_height="wrap_content"
43             android:layout_weight="1"
44             android:button="@null"
45             android:gravity="center"
46             android:text="@string/home_find"
47             android:textColor="@drawable/selector_tab_text_color"
48             android:background="@color/tab_bg"
49             android:drawableTop="@drawable/selector_tab_find"
50             />
51 
52         <RadioButton
53             android:id="@+id/mHomeSearchRb"
54             android:layout_width="0dp"
55             android:layout_height="wrap_content"
56             android:layout_weight="1"
57             android:button="@null"
58             android:gravity="center"
59             android:text="@string/home_search"
60             android:textColor="@drawable/selector_tab_text_color"
61             android:background="@color/tab_bg"
62             android:drawableTop="@drawable/selector_tab_search"
63            />
64 
65         <RadioButton
66             android:id="@+id/mHomeProfileRb"
67             android:layout_width="0dp"
68             android:layout_height="wrap_content"
69             android:layout_weight="1"
70             android:button="@null"
71             android:gravity="center"
72             android:text="@string/home_profile"
73             android:textColor="@drawable/selector_tab_text_color"
74             android:background="@color/tab_bg"
75             android:drawableTop="@drawable/selector_tab_profile"
76             android:checked="true"
77            />
78     </RadioGroup>
79 </RelativeLayout>

代码有点多,无非正是二个FrameLayout对应的是tab上方的来得区域,然后多少个RadioButton凑成一组单选按钮放在RadioGroup个中。

13行:可以有限支持FrameLayout占据除开Tab之后的剩下的整套空间。

76行:android:checked=”true”其一很首要,稍后在java代码中讲。

RadioButton的属性有点多,我们采取就选用第3个RadioButton进行讲解,上面的第②个RadioButton的性质摘抄如下:

 1         <RadioButton
 2             android:id="@+id/mHomeHomeRb"
 3             android:layout_width="0dp"
 4             android:layout_height="wrap_content"
 5             android:layout_weight="1"
 6             android:button="@null"
 7             android:gravity="center"
 8             android:text="@string/home_home"
 9             android:textColor="@drawable/selector_tab_text_color"
10             android:background="@color/tab_bg"
11             android:drawableTop="@drawable/selector_tab_home"
12            />

上边代码的表明如下:

05行:weight为1,并且width为0dp,是保障多少个tab能均分宽度。

06行:去掉RadioButton的样式,也等于去掉那么些小图标,然后radiobutton就只剩余文字了。

07行:让里面包车型客车剧情居中

08行:显示的文字

10行:设置这几个tab的背景观和万事radioGroup的背景象一样,可是,也得以删掉(删掉之后,在笔者的荣耀手提式有线电话机手提式有线电话机上的排版会有标题)

10行:在那些tab的下边添加对应的icon图标(很要紧,正是有了这脾本性,每种tab的图标才会分化啊)。

 

(2)fragment_home.xml:fragment的布局文件

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5 
 6     tools:context=".MainActivity">
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="HomeFragment"
12         android:textSize="20sp"/>
13 
14 </LinearLayout>

其余三个fragment的布局文件都一模一样,代码就不贴出来了,本文最后有源码下载。

 

(3)selector_tab_home.xml:tab被入选时对应icon的情状

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3 
4     <item android:drawable="@mipmap/tab_home_selected" android:state_pressed="false" android:state_selected="true" />
5     <item android:drawable="@mipmap/tab_home_selected" android:state_checked="true" android:state_pressed="false" />
6     <item android:drawable="@mipmap/tab_home_nomal" />
7 
8 
9 </selector>

06行是暗许的情事。

其余八个tab的境况都差不离,代码就不贴出来了,本文最后有源码下载。

 

(4)selector_tab_text_color.xml:tab中的文字被选中时的场地

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3 
4 <item android:color="@color/white" android:state_pressed="false" android:state_selected="true" />
5 <item android:color="@color/white" android:state_checked="true" android:state_pressed="false" />
6 <item android:color="@color/black" />
7 
8 
9 </selector>

06行:暗中认可的文字颜色是黄褐,被切换时是暗黑。

 

二、Java代码:

(1)HomeActivity.java:

  1 package com.smyhvae.radiogrouptabdemo;
  2 
  3 import android.os.Bundle;
  4 import android.support.v4.app.Fragment;
  5 import android.support.v4.app.FragmentActivity;
  6 import android.support.v4.app.FragmentStatePagerAdapter;
  7 import android.view.Window;
  8 import android.widget.FrameLayout;
  9 import android.widget.RadioButton;
 10 import android.widget.RadioGroup;
 11 
 12 import com.smyhvae.radiogrouptabdemo.fragment.FindFagment;
 13 import com.smyhvae.radiogrouptabdemo.fragment.HomeFagment;
 14 import com.smyhvae.radiogrouptabdemo.fragment.ProfileFagment;
 15 import com.smyhvae.radiogrouptabdemo.fragment.SearchFagment;
 16 
 17 
 18 /**
 19  * Created by smyhvae on 2015/4/28.
 20  *
 21  */
 22 
 23 public class HomeActivity extends FragmentActivity {
 24     private FrameLayout mHomeContent;
 25     private RadioGroup mHomeRadioGroup;
 26     private RadioButton mHomeHomeRb;
 27     private RadioButton mHomeFindRb;
 28     private RadioButton mHomeSearchRb;
 29     private RadioButton mHomeProfileRb;
 30 
 31     static final int NUM_ITEMS = 4;//一共四个fragment
 32 
 33     @Override
 34     protected void onCreate(Bundle savedInstanceState) {
 35         super.onCreate(savedInstanceState);
 36         requestWindowFeature(Window.FEATURE_NO_TITLE);
 37         setContentView(R.layout.activity_home);
 38         initView();
 39         initData();
 40     }
 41 
 42     protected void initView() {
 43         mHomeContent = (FrameLayout) findViewById(R.id.mHomeContent); //tab上方的区域
 44         mHomeRadioGroup = (RadioGroup) findViewById(R.id.mHomeRadioGroup);  //底部的四个tab
 45         mHomeHomeRb = (RadioButton) findViewById(R.id.mHomeHomeRb);
 46         mHomeFindRb = (RadioButton) findViewById(R.id.mHomeFindRb);
 47         mHomeSearchRb = (RadioButton) findViewById(R.id.mHomeSearchRb);
 48         mHomeProfileRb = (RadioButton) findViewById(R.id.mHomeProfileRb);
 49 
 50         //监听事件:为底部的RadioGroup绑定状态改变的监听事件
 51         mHomeRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
 52             @Override
 53             public void onCheckedChanged(RadioGroup group, int checkedId) {
 54                 int index = 0;
 55                 switch (checkedId) {
 56                     case R.id.mHomeHomeRb:
 57                         index = 0;
 58                         break;
 59                     case R.id.mHomeFindRb:
 60                         index = 1;
 61                         break;
 62                     case R.id.mHomeSearchRb:
 63                         index = 2;
 64                         break;
 65                     case R.id.mHomeProfileRb:
 66                         index = 3;
 67                         break;
 68                 }
 69                 //通过fragments这个adapter还有index来替换帧布局中的内容
 70                 Fragment fragment = (Fragment) fragments.instantiateItem(mHomeContent, index);
 71                 //一开始将帧布局中 的内容设置为第一个
 72                 fragments.setPrimaryItem(mHomeContent, 0, fragment);
 73                 fragments.finishUpdate(mHomeContent);
 74 
 75             }
 76         });
 77     }
 78 
 79 
 80     //第一次启动时,我们让mHomeHomeRb这个radiobutton处于选中状态。
 81     // 当然了,在这之前,先要在布局文件中设置其他的某一个radiobutton(只要不是mHomeHomeRb就行)
 82     // 的属性为android:checked="true",才会出发下面的这个check方法切换到mHomeHomeRb
 83     @Override
 84     protected void onStart() {
 85         super.onStart();
 86         mHomeRadioGroup.check(R.id.mHomeHomeRb);
 87     }
 88 
 89     //用adapter来管理四个Fragment界面的变化。注意,我这里用的Fragment都是v4包里面的
 90     FragmentStatePagerAdapter fragments = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
 91 
 92         @Override
 93         public int getCount() {
 94             return NUM_ITEMS;//一共有四个Fragment
 95         }
 96 
 97         //进行Fragment的初始化
 98         @Override
 99         public Fragment getItem(int i) {
100             Fragment fragment = null;
101             switch (i) {
102                 case 0://首页
103                     fragment = new HomeFagment();
104                     break;
105                 case 1://发现
106                     fragment = new FindFagment();
107                     break;
108 
109                 case 2://搜索
110                     fragment = new SearchFagment();
111                     break;
112 
113                 case 3://我的
114                     fragment = new ProfileFagment();
115                     break;
116                 default:
117                     new HomeFagment();
118                     break;
119             }
120 
121             return fragment;
122         }
123     };
124 
125     protected void initData() {
126 
127     }
128 
129 }

代码注释已经很详细了。

更进一步要留意的是第⑧0行的笺注,为了让app第①回启动时,默许就让第⑥个tab处于选中状态,大家未来activity_home.xml(76行)中让多余的不论哪个radioButton的性质为checked,然后再重写上方java代码中的onStart方法(86行)。

 

(2)HomeFragment.java:

 1 package com.smyhvae.radiogrouptabdemo.fragment;
 2 
 3 import android.os.Bundle;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 
 9 import com.smyhvae.radiogrouptabdemo.R;
10 
11 
12 /**
13  * Created by smyh on 2015/4/28.
14  */
15 public class HomeFagment extends Fragment {
16     @Override
17     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
18         View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, null);
19         return view;
20     }
21 
22     //重写setMenuVisibility方法,不然会出现叠层的现象
23     @Override
24     public void setMenuVisibility(boolean menuVisibile) {
25         super.setMenuVisibility(menuVisibile);
26         if (this.getView() != null) {
27             this.getView().setVisibility(menuVisibile ? View.VISIBLE : View.GONE);
28         }
29     }
30 
31 }

结余八个Fragment的java代码是一模一样的,就不贴出来了,详见本文最后的源码。

 

【工程文件】

2015-04-28-RadioGroupTabDemo

 

相关文章