学习内容来自“慕课网”
这里用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>
然后是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 }
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 }
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 }
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 }
除了MainActivity.java的其他四个java文件都是相似的
效果图：
然后说下Fragment实现Tab与ViewPager实现Tab的不同点
1、用ViewPage的时候所有的布局都写在MainActivity.java，导致代码过长，不易写和修改
2、用Fragment的时候MainActivity只起到调用各布局的作用，具体（比如设置功能）的布局，响应事件，控件都由各自的Fragment处理，方便后期代码的维护
3、用ViewPage实现Tab可以使得中间内容部分左右滑动，而Fragment实现Tab则不能实现中间内容部分的左右滑动
时间： 2024-08-03 07:12:52