安卓开发_慕课网_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与ViewPager实现Tab的不同点

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景