学习内容来自“慕课网”
这里用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>
<?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> 104 105 bottom.xml
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 } 202 203 MainActivity
1 package fragments; 2 3 import com.example.licai.R; 4 import android.app.Fragment; 5 import android.os.Bundle; 6 import android.view.LayoutInflater; 7 import android.view.View; 8 import android.view.ViewGroup; 9 10 public class Zhichu_fragment extends Fragment { 11 12 13 @Override 14 public View onCreateView(LayoutInflater inflater, ViewGroup container, 15 Bundle savedInstanceState) { 16 // TODO Auto-generated method stub 17 View v=inflater.inflate(R.layout.zhichu_fragment, null); 18 return v; 19 } 20 21 }