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

最新推荐文章于 2019-05-21 17:14:23 发布

一个昵称而已T

最新推荐文章于 2019-05-21 17:14:23 发布

阅读量1k

点赞数

分类专栏：实战学习文章标签： Tab Fragment

实战学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

视频地址：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