多种多样的App主界面Tab实现方法（二）：Fragment

hyman老师慕课网视频连接  http://www.imooc.com/learn/264

上一篇博文说了利用ViewPager实现Tab的方法，每个tab页面的内容只有一个TextView，但是如果页面中的逻辑和控件更加复杂，那么可以想象MainActivity会多么的臃肿。下面介绍另一个方法，利用碎片（Fragment）实现主页面Tab布局。

我自己写的和视频中hyman老师讲的有一点不一样。

1.我所有Fragment引用的都是最原始的包，如果你想引用V4包的话需要注意几点：所有的fregment相关的包全部统一；MainActivity的基类改为FragmentActivity；FragmentManager实例初始化的方法由getFragmentManager()改为getSupportFragmentManager()。

2.我直接用的FragmentTransaction实例的replace方法，我感觉这样比视频中稍微简单一点。

看到这里可能有些晕，没有关系，下面我们就结合着代码看一下：

top.xml和botton.xml，以及weixin_tab.xml,frd_tab.xml,add_tab.xml,setting_tab.xml我们都可以用上一个例子的。

创建四个自定义碎片继承Fragment，分别重写OnCreateView方法，分别传入内容布局weixin_tab.xml,frd_tab.xml,add_tab.xml,setting_tab.xml，下面就以微信页面为例：

WeiXinFragment.javapackage com.example.fragment;

import com.example.tab02.R;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class WeiXinFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.weixin_tab, container, false);
}

}

activity_main.xml
<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/top" />

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >

</FrameLayout>

<include layout="@layout/bottom" />

</LinearLayout>

MainActivity.java
package com.example.tab02;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.example.fragment.AddFragment;
import com.example.fragment.FrdFragment;
import com.example.fragment.SettingFragment;
import com.example.fragment.WeiXinFragment;

public class MainActivity extends Activity implements OnClickListener{

public LinearLayout weixin_tab;
public LinearLayout frd_tab;
public LinearLayout add_tab;
public LinearLayout setting_tab;

public ImageButton weixin_img;
public ImageButton frd_img;
public ImageButton add_img;
public ImageButton setting_img;

public WeiXinFragment weixin_fragment;
public FrdFragment frd_fragment;
public AddFragment add_fragment;
public SettingFragment setting_fragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

intViews();
intEvents();
setContent(0);
}

private void intViews() {
weixin_tab=(LinearLayout) findViewById(R.id.weixin_tab);
frd_tab=(LinearLayout) findViewById(R.id.frd_tab);
add_tab=(LinearLayout) findViewById(R.id.add_tab);
setting_tab=(LinearLayout) findViewById(R.id.setting_tab);

weixin_img=(ImageButton) findViewById(R.id.weixin_img);
frd_img=(ImageButton) findViewById(R.id.frd_img);
add_img=(ImageButton) findViewById(R.id.add_img);
setting_img=(ImageButton) findViewById(R.id.setting_img);

weixin_fragment=new WeiXinFragment();
frd_fragment=new FrdFragment();
add_fragment=new AddFragment();
setting_fragment=new SettingFragment();
}

private void intEvents() {
weixin_tab.setOnClickListener(this);
frd_tab.setOnClickListener(this);
add_tab.setOnClickListener(this);
setting_tab.setOnClickListener(this);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {
resetImage();
switch(v.getId()){
case R.id.weixin_tab:
setContent(0);
break;
case R.id.frd_tab:
setContent(1);
break;
case R.id.add_tab:
setContent(2);
break;
case R.id.setting_tab:
setContent(3);
break;
default:
break;
}

}

private void setContent(int item) {
//创建碎片管理器实例
FragmentManager fm=getFragmentManager();
//开启事务
FragmentTransaction transaction=fm.beginTransaction();
switch(item){
case 0:
transaction.replace(R.id.content,weixin_fragment);
weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.replace(R.id.content,frd_fragment);
frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.replace(R.id.content,add_fragment);
add_img.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.replace(R.id.content,setting_fragment);
setting_img.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
//结束事务
transaction.commit();
}

//将所有图片都设暗
private void resetImage() {
weixin_img.setImageResource(R.drawable.tab_weixin_normal);
frd_img.setImageResource(R.drawable.tab_find_frd_normal);
add_img.setImageResource(R.drawable.tab_address_normal);
setting_img.setImageResource(R.drawable.tab_settings_normal);

}
}


源码下载：http://pan.baidu.com/s/1pKnplGJ
提取码：xjwb

若连接被和谐，可通过邮箱联系我。chunxiao123ouc@163.com