安卓开发_慕课网_Fragment实现Tab(App主界面)

学习内容来自“慕课网”

这里用Fragment来实现APP主界面

思路:

底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字

1、默认显示第一个功能(微信)的图标为亮,其他三个为暗

2、点击相应的按钮,首先将所有的图标变暗,接着隐藏所有Fragment,再把点击的对应的Fragment显示出来,并把相应的图标显示亮

 

首先布局文件

activity_main.xml与ViewPager实现Tab的是不一样的

 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     android:orientation="vertical"

 6      >    

 7     <include layout="@layout/top"/>

 8     

 9      <FrameLayout                                    //与Viewpager实现Tab的不同点在这里

10          android:id="@+id/id_content"

11          android:layout_width="fill_parent"

12          android:layout_height="0dp"

13          android:layout_weight="1"

14          ></FrameLayout>

15     

16     <include layout="@layout/bottom"/>

17 </LinearLayout>

18     

其他布局文件都是一样的

头部部分:

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="match_parent"

 4     android:background="@drawable/title_bar"

 5     android:layout_height="45dp"

 6     android:gravity="center"

 7     android:orientation="vertical" >

 8     <TextView 

 9         android:layout_height="wrap_content"

10         android:layout_width="wrap_content"

11         android:layout_gravity="center"

12         android:text="微信"

13         android:textColor="#ffffff"

14         android:textSize="20sp"

15         android:textStyle="bold"

16         

17         />

18 

19 </LinearLayout>
top.xml

底部部分:

  1 <?xml version="1.0" encoding="utf-8"?>

  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  3     android:layout_width="match_parent"

  4     android:layout_height="55dp"

  5     android:background="@drawable/bottom_bar"

  6     android:orientation="horizontal" >

  7     

  8     <LinearLayout 

  9        android:id="@+id/id_tab_weixin"

 10        android:layout_width="0dp"

 11        android:gravity="center"

 12        android:layout_height="fill_parent"

 13        android:layout_weight="1"

 14        android:orientation="vertical"

 15        >

 16         <ImageButton 

 17            android:id="@+id/id_tab_weixin_image"

 18            android:layout_width="wrap_content"

 19            android:layout_height="wrap_content"

 20            android:src="@drawable/tab_weixin_pressed"

 21            android:clickable="false"

 22            android:background="#00000000"

 23            />

 24         <TextView 

 25             android:layout_width="wrap_content"

 26             android:layout_height="wrap_content"

 27             android:text="微信"

 28             android:textColor="#ffffff"

 29             />

 30     </LinearLayout>

 31     

 32     <LinearLayout 

 33        android:id="@+id/id_tab_add"

 34        android:layout_width="0dp"

 35        android:gravity="center"

 36        android:layout_height="fill_parent"

 37        android:layout_weight="1"

 38        android:orientation="vertical"

 39        >

 40         <ImageButton 

 41            android:id="@+id/id_tab_add_image"

 42            android:layout_width="wrap_content"

 43            android:layout_height="wrap_content"

 44            android:clickable="false"

 45            android:src="@drawable/tab_address_normal"

 46            android:background="#00000000"

 47            />

 48         <TextView 

 49             android:layout_width="wrap_content"

 50             android:layout_height="wrap_content"

 51             android:text="通信录"

 52             android:textColor="#ffffff"

 53             />

 54     </LinearLayout>

 55     

 56    <LinearLayout 

 57        android:id="@+id/id_tab_frd"

 58        android:layout_width="0dp"

 59        android:gravity="center"

 60        android:layout_height="fill_parent"

 61        android:layout_weight="1"

 62        android:orientation="vertical"

 63        >

 64         <ImageButton 

 65            android:id="@+id/id_tab_frd_image"

 66            android:layout_width="wrap_content"

 67            android:clickable="false"

 68            android:layout_height="wrap_content"

 69            android:src="@drawable/tab_find_frd_normal"

 70            android:background="#00000000"

 71            />

 72         <TextView 

 73             android:layout_width="wrap_content"

 74             android:layout_height="wrap_content"

 75             android:text="朋友"

 76             android:textColor="#ffffff"

 77             />

 78     </LinearLayout>

 79     

 80     <LinearLayout 

 81        android:id="@+id/id_tab_set"

 82        android:layout_width="0dp"

 83        android:gravity="center"

 84        android:layout_height="fill_parent"

 85        android:layout_weight="1"

 86        android:orientation="vertical"

 87        >

 88         <ImageButton 

 89            android:id="@+id/id_tab_set_image"

 90            android:layout_width="wrap_content"

 91            android:clickable="false"

 92            android:layout_height="wrap_content"

 93            android:src="@drawable/tab_settings_normal"

 94            android:background="#00000000"

 95            />

 96         <TextView 

 97             android:layout_width="wrap_content"

 98             android:layout_height="wrap_content"

 99             android:text="设置"

100             android:textColor="#ffffff"

101             />

102     </LinearLayout>

103 </LinearLayout>
bottom.xml

四个功能点击布局(这里只贴一个,都一样的,只是显示的文字不同方便效果演示而已):

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="match_parent"

 4     android:layout_height="match_parent"

 5     android:orientation="vertical" >

 6 

 7     <TextView

 8         android:id="@+id/textView1"

 9         android:layout_width="wrap_content"

10         android:layout_height="wrap_content"

11         android:layout_gravity="center_horizontal"

12         android:text="微信"

13         android:textAppearance="?android:attr/textAppearanceMedium" />

14 

15 </LinearLayout>
View Code

 

然后是java文件

MainActivity.java

  1 package com.example.fragment_tab;

  2 

  3 import android.os.Bundle;

  4 import android.app.Activity;

  5 import android.support.v4.app.Fragment;

  6 import android.support.v4.app.FragmentActivity;

  7 import android.support.v4.app.FragmentManager;

  8 import android.support.v4.app.FragmentTransaction;

  9 import android.text.method.HideReturnsTransformationMethod;

 10 import android.view.Menu;

 11 import android.view.View;

 12 import android.view.View.OnClickListener;

 13 import android.view.Window;

 14 import android.widget.ImageButton;

 15 import android.widget.LinearLayout;

 16 

 17 public class MainActivity extends FragmentActivity implements OnClickListener{

 18 

 19     private LinearLayout mTabWeixin;

 20     private LinearLayout mTabFrd;

 21     private LinearLayout mTabAdd;

 22     private LinearLayout mTabSet;

 23     

 24     //imagebutton

 25     private ImageButton mImgWeixin;

 26     private ImageButton mImgFrd;

 27     private ImageButton mImgAdd;

 28     private ImageButton mImgSet;

 29     

 30     //fragment

 31     private Fragment mTab_1;

 32     private Fragment mTab_2;

 33     private Fragment mTab_3;

 34     private Fragment mTab_4;

 35     

 36     @Override

 37     protected void onCreate(Bundle savedInstanceState) {

 38         super.onCreate(savedInstanceState);

 39         requestWindowFeature(Window.FEATURE_NO_TITLE);

 40         setContentView(R.layout.activity_main);

 41         

 42         //初始化

 43         init();

 44         initEvent();

 45         //默认显示第一个功能的界面(微信界面)

 46         setSelect(0);

 47     }

 48 

 49 

 50     private void initEvent() {

 51         // TODO Auto-generated method stub

 52         mTabWeixin.setOnClickListener(this);

 53         mTabAdd.setOnClickListener(this);

 54         mTabFrd.setOnClickListener(this);

 55         mTabSet.setOnClickListener(this);

 56         

 57     }

 58 

 59 

 60     private void init() {

 61         // TODO Auto-generated method stub

 62         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);

 63         mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);

 64         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);

 65         mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);

 66         

 67         mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);

 68         mImgAdd = (ImageButton) findViewById(R.id.id_tab_add_image);

 69         mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);

 70         mImgSet = (ImageButton) findViewById(R.id.id_tab_set_image);

 71         

 72         

 73     }

 74 

 75     //响应事件

 76     @Override

 77     public void onClick(View v) {

 78         // TODO Auto-generated method stub

 79         //先切换图片至暗色

 80         resetImage();

 81         switch (v.getId()) {

 82         case R.id.id_tab_weixin:

 83             setSelect(0);

 84             break;

 85         case R.id.id_tab_add:

 86             setSelect(1);

 87             break;

 88         case R.id.id_tab_frd:

 89             setSelect(2);

 90             break;

 91         case R.id.id_tab_set:

 92             setSelect(3);

 93             break;

 94 

 95         default:

 96             break;

 97         }

 98     }

 99 

100     private void setSelect(int i){

101         FragmentManager fm = getSupportFragmentManager();

102         FragmentTransaction transaction = fm.beginTransaction();

103         //隐藏所有

104         hidFragment(transaction);

105         

106         //把图片设置为亮的

107         

108         //设置内容区域

109         switch (i) {

110         case 0:

111             if(mTab_1 == null)

112             {

113                 mTab_1 = new WeixinFragment();

114                 transaction.add(R.id.id_content, mTab_1);

115             }

116             else

117             {

118                 transaction.show(mTab_1);

119                 

120             }

121             mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);

122             break;

123         case 1:

124             if(mTab_2 == null)

125             {

126                 mTab_2 = new AddFragment();

127                 transaction.add(R.id.id_content, mTab_2);

128             }

129             else

130             {

131                 transaction.show(mTab_2);

132                 

133             }

134             mImgAdd.setImageResource(R.drawable.tab_address_pressed);

135             break;

136         case 2:

137             if(mTab_3 == null)

138             {

139                 mTab_3 = new FrdFragment();

140                 transaction.add(R.id.id_content, mTab_3);

141             }

142             else

143             {

144                 transaction.show(mTab_3);

145                 

146             }

147             mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);

148             break;

149         case 3:

150             if(mTab_4 == null)

151             {

152                 mTab_4 = new SetFragment();

153                 transaction.add(R.id.id_content, mTab_4);

154             }

155             else

156             {

157                 transaction.show(mTab_4);

158                 

159             }

160             mImgSet.setImageResource(R.drawable.tab_settings_pressed);

161             break;

162 

163         default:

164             break;

165             

166         }

167         transaction.commit();

168     }

169     private void hidFragment(FragmentTransaction transaction) {

170         // TODO Auto-generated method stub

171         if(mTab_1 != null)

172         {

173             transaction.hide(mTab_1);

174         }

175         if(mTab_2 != null)

176         {

177             transaction.hide(mTab_2);

178         }

179         if(mTab_3 != null)

180         {

181             transaction.hide(mTab_3);

182         }

183         if(mTab_4 != null)

184         {

185             transaction.hide(mTab_4);

186         }

187         

188     }

189 

190     //将所有功能图标的界面设为暗色

191     private void resetImage() {

192         // TODO Auto-generated method stub

193         mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);

194         mImgAdd.setImageResource(R.drawable.tab_address_normal);

195         mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);

196         mImgSet.setImageResource(R.drawable.tab_settings_normal);

197         

198     }

199 

200     

201 }
MainActivity

AddFragment.java

 1 package com.example.fragment_tab;

 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 public class AddFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_2, container,false);

18     }

19 }
View Code

SetFragment.java

 1 package com.example.fragment_tab;

 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 public class SetFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_4, container,false);

18     }

19 }
View Code

WeixinFragment.java

 1 package com.example.fragment_tab;

 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 public class WeixinFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_1, container,false);

18     }

19 }
View Code

FrdFragment.java

 1 package com.example.fragment_tab;

 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 public class FrdFragment extends Fragment{

10     @Override

11     public View onCreateView(LayoutInflater inflater, ViewGroup container,

12             Bundle savedInstanceState) {

13         // TODO Auto-generated method stub

14         return inflater.inflate(R.layout.tab_3, container,false);

15     }

16 

17 }
View Code

除了MainActivity.java的其他四个java文件都是相似的

效果图:

安卓开发_慕课网_Fragment实现Tab(App主界面)

 

然后说下Fragment实现Tab与ViewPager实现Tab的不同点

1、用ViewPage的时候所有的布局都写在MainActivity.java,导致代码过长,不易写和修改

2、用Fragment的时候MainActivity只起到调用各布局的作用,具体(比如设置功能)的布局,响应事件,控件都由各自的Fragment处理,方便后期代码的维护

3、用ViewPage实现Tab可以使得中间内容部分左右滑动,而Fragment实现Tab则不能实现中间内容部分的左右滑动

你可能感兴趣的:(Fragment)