多种多样的App主界面Tab实现方法——单独利用Fragment实现Tab

视频地址：http://www.imooc.com/video/5903

在单独利用ViewPager实现Tab中，会发现这种方法有不好的方面。这次，换一种实现方法，看看效果怎么样？

不过得事先说明一下，虽然这次实现的方法不同，但是布局文件以及图片资源等还是可以重复利用的，当然在这需要修改

activity_main

中的内容：

<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"
tools:context=".MainActivity">

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

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

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

</LinearLayout>

只需要将ViewPager替换成FrameLayout即可。

之后，就需要定义四个Fragment（WeixinFragment，FrdFragment，AddressFragment，SettingsFragmentm），来分别对应四个Tab所需要的内容。因为这里只是简单的模仿一下需要的功能，就没有实现过多的逻辑功能。也许有人会说，单独定义四个差不多的Fragment会不会显得代码的累赘？有这种想法是不错的，因为这这里的实例这样做确实是增加了不必要的代码量，但是，在实际开发中，这样是必须的。关于这点会在后面再补充说明一下。

public class WeixinFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01,container,false);
}
}

这里只展示了WeixinFragment的内容，其余三个都差不多，需要修改一下inflate方法的第一个参数即可。

需要注意的是：可以使用android.support.v4.app.Fragment，也可以使用android.app.Fragment，但是不能交替使用，也就是说如果用到的是android.support.v4.app.Fragment，则一些其它有关的类也只能用到v4包下的

接着就是MainActivity中需要实现的代码了：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;

private Fragment mFragmentWeixin;
private Fragment mFragmentFrd;
private Fragment mFragmentAddress;
private Fragment mFragmentSetting;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
initView();
initEvent();
setSelect(0);
}

private void initEvent() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}

private void initView() {
// tabs
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
// ImageButton
mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);
}

@Override
public void onClick(View v) {
resetImg();

switch (v.getId()) {
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_frd:
setSelect(1);
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_settings:
setSelect(3);
break;
default:
break;
}
}

private void setSelect(int i)
{
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
//3.0以后的版本可以直接使用getFragmentManager(),但要引入android.app.Fragament
//用getSupportFragmentManager(v4包下)是为了兼容3.0一下的版本
//注意Activity中没有getSupportFragmentManager方法
//但是可以直接在Activity中调用getFragmentManager方法

hideAllFragment(transaction);

switch (i) {
// 设置内容区域的Fragment
// 把图片设置为亮的
case 0:
if(mFragmentWeixin==null) {
mFragmentWeixin=new WeixinFragment();
transaction.add(R.id.id_content,mFragmentWeixin);
}
else transaction.show(mFragmentWeixin);
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
if(mFragmentFrd==null) {
mFragmentFrd=new FrdFragment();
transaction.add(R.id.id_content,mFragmentFrd);
}
else transaction.show(mFragmentFrd);
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
if(mFragmentAddress==null) {
mFragmentAddress=new AddressFragment();
transaction.add(R.id.id_content,mFragmentAddress);
}
else transaction.show(mFragmentAddress);
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
if(mFragmentSetting==null) {
mFragmentSetting=new SettingsFragment();
transaction.add(R.id.id_content,mFragmentSetting);
}
else transaction.show(mFragmentSetting);
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();//提交事务
}

/**
* 隐藏所有的Fragment
*/
private void hideAllFragment(FragmentTransaction transaction) {
if(mFragmentWeixin!=null) transaction.hide(mFragmentWeixin);
if(mFragmentFrd!=null) transaction.hide(mFragmentFrd);
if(mFragmentAddress!=null) transaction.hide(mFragmentAddress);
if(mFragmentSetting!=null) transaction.hide(mFragmentSetting);
}

private void resetImg()
{
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}
}

实现方法的大致思想很简单，就是有四个Fragment，点击某个Tab的时候，就只显示对应的Fragment，而其余三个Fragment都隐藏起来。

而中间的内容区域是由Fragment显示的,和Activity基本上没有关系

缺陷：因为是用的Fragment，而且占用的是一个FrameLayout的布局，所以无法实现像单独利用ViewPager实现Tab中左右拖动的效果。

但是刚才所说的缺陷也有一个好处，比如说QQ的消息界面，就不会与显示联系人的ListView中的item的左滑右滑相冲突。

下面，将会与单独利用ViewPager实现Tab中的实现方法想比较一下：

当用到Fragment的时候，只需要在相应的自定义的Fragment并且管理相应的布局，而内部的控件也有自己管理，需要的事件也有自己处理，MainActivity只起到调度的作用，MainActivity的代码会比较的清晰，有利于后期的维护，并且Fragment在做不同屏幕的适配时也有一定的优势。这也就解释了前面说的为什么要定义四个单独的Fragment。

而当只用一个ViewPager实现的时候，每个Tab对应的布局都会在MainActivity中进行初始化，因为也需要在MainActivity中实现每个Tab对应的布局中某些控件的事件以及一些操作，会造成mainActivity冗长，不宜代码的改善以及维护。

源码：http://download.csdn.net/download/qq_22804827/9457899