安卓开发_慕课网_Fragment实现Tab(App主界面)
安卓开发_慕课网_Fragment实现Tab(App主界面)
听着music睡
发布于 2018-05-18 13:21:40
发布于 2018-05-18 13:21:40
学习内容来自“慕课网”
这里用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>底部部分：
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>四个功能点击布局(这里只贴一个，都一样的，只是显示的文字不同方便效果演示而已)：
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 }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则不能实现中间内容部分的左右滑动
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014-10-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读