纵观现在大部分Android客户端界面框架基本都是TitleBar+内容区域+TabBar的模式。其中TabBar用来切换对应的内容区域。
今天我们用Fragment的方式实现Tab的切换
不多说~上图:
点击底部的Tab,中间的Fragment内容区域就会相应的切换。
这里的Fragment只是简单的显示一个TextView。
Title的布局title_ui.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@android:color/holo_orange_dark" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="客户端"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/holo_blue_dark"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_dark"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/tab01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tabImage01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/tab_weixin_normal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textColor="@android:color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tabImage02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/tab_address_normal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="地址"
android:textColor="@android:color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab03"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tabImage03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/tab_settings_normal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="设置"
android:textColor="@android:color/black" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab04"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tabImage04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/tab_find_frd_normal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="朋友"
android:textColor="@android:color/black" />
</LinearLayout>
</LinearLayout>
主界面布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include layout="@layout/title_ui"/>
<LinearLayout
android:id="@+id/fragment_ui"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
></LinearLayout>
<include layout="@layout/tab_ui"/>
</LinearLayout>
Fragment代码(其中之一,其他都一样):
package com.example.tabfragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FragmenAddr extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater
.inflate(R.layout.fragment_addrs, container, false);
return view;
}
}
主Activity代码:
package com.example.tabfragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends FragmentActivity implements OnClickListener {
private LinearLayout layoutTab01;//Tab四个按钮之一
private LinearLayout layoutTab02;
private LinearLayout layoutTab03;
private LinearLayout layoutTab04;
private ImageView imageView01; //Tab图片
private ImageView imageView02;
private ImageView imageView03;
private ImageView imageView04;
private FragmentManager manager;
private FragmentTransaction transaction;
private FragmenWeixin weixin; //内容区域
private FragmenAddr addr;
private FragmenSetting setting;
private FragmenFriend friend;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(0);
}
private void setSelect(int i) {
clearImageView();
manager = getSupportFragmentManager();
transaction = manager.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
imageView01.setImageResource(R.drawable.tab_weixin_pressed);
if(weixin == null){
weixin = new FragmenWeixin();
transaction.add(R.id.fragment_ui,weixin);
}else {
transaction.show(weixin);
}
break;
case 1:
imageView02.setImageResource(R.drawable.tab_address_pressed);
if(addr == null){
addr = new FragmenAddr();
transaction.add(R.id.fragment_ui,addr);
}else {
transaction.show(addr);
}
break;
case 2:
imageView03.setImageResource(R.drawable.tab_settings_pressed);
if(setting == null){
setting = new FragmenSetting();
transaction.add(R.id.fragment_ui,setting);
}else {
transaction.show(setting);
}
break;
case 3:
imageView04.setImageResource(R.drawable.tab_find_frd_pressed);
if(friend == null){
friend = new FragmenFriend();
transaction.add(R.id.fragment_ui,friend);
}else {
transaction.show(friend);
}
break;
default:
break;
}
transaction.commit();
}
private void hideFragment(FragmentTransaction transaction2) {
// TODO Auto-generated method stub
if(weixin != null){
transaction2.hide(weixin);
}
if(addr != null){
transaction2.hide(addr);
}
if(setting != null){
transaction2.hide(setting);
}
if(friend != null){
transaction2.hide(friend);
}
}
private void clearImageView() {
imageView01.setImageResource(R.drawable.tab_weixin_normal);
imageView02.setImageResource(R.drawable.tab_address_normal);
imageView03.setImageResource(R.drawable.tab_settings_normal);
imageView04.setImageResource(R.drawable.tab_find_frd_normal);
}
private void initEvent() {
layoutTab01.setOnClickListener(this);
layoutTab02.setOnClickListener(this);
layoutTab03.setOnClickListener(this);
layoutTab04.setOnClickListener(this);
}
private void initView() {
layoutTab01 = (LinearLayout) findViewById(R.id.tab01);
layoutTab02 = (LinearLayout) findViewById(R.id.tab02);
layoutTab03 = (LinearLayout) findViewById(R.id.tab03);
layoutTab04 = (LinearLayout) findViewById(R.id.tab04);
imageView01 = (ImageView) findViewById(R.id.tabImage01);
imageView02 = (ImageView) findViewById(R.id.tabImage02);
imageView03 = (ImageView) findViewById(R.id.tabImage03);
imageView04 = (ImageView) findViewById(R.id.tabImage04);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab01:
setSelect(0);
break;
case R.id.tab02:
setSelect(1);
break;
case R.id.tab03:
setSelect(2);
break;
case R.id.tab04:
setSelect(3);
break;
default:
break;
}
}
}
主要流程:点击Tab中的按钮,将该按钮的ImageView颜色变为选中状态,同时切换相应的Fragment。
此方法使用了目前较推荐的Fragment,减少了代码的耦合程度。下一篇将介绍Tab切换的另一种方法,利用ViewPager+FragmentPageAdapter的方式实现Tab的切换