Fragment 实现微信Tab主界面

作者: sea_baby | 来源:发表于2016-09-25 01:22 被阅读0次

我们实现的是一个微信tab主界面，效果如下：

页面布局

由上面效果图展示可以得知，该布局最终可由三部分组成，顶部、中间可变内容区域、底部

1.顶部布局，顶部布局非常简单，就是一个LinearLayout，为其设置一个背景图，然后里面包含一个TextView，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@drawable/title_bar"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        />

</LinearLayout>

2.第一步，首先要在主界面布局activity_main.xml中添加FrameLayout代码如下：

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

这里只是给FrameLayout的id设置成id_container，并没有在里面添加任何具体的内容，因为具体的内容要在后面动态的添加的。这里设置android:layout_weight="1"意思是，除了顶部和底部（因为顶部和底部高度都设定好了）的高度外，其余的高度都被FramLayout占有。

3.底部设计，我们可以这样设计底部：可以将底部（水平的LinearLayout）分成四块（四个垂直的LinearLayout），每一块（LinearLayout）包含一个ImageView和一个TextView.ImageView用来显示当前Tab图标，TextView用来显示当前Tab的标题，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#fff" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#fff" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#fff" />

    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
           android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#fff" />

    </LinearLayout>

</LinearLayout>

代码实现控制

1.Fragment的实现
因为我们有四个Tab，正常来说，我们要实现四个Fragment和他们的布局，如下（以第一个微信Tab为例）：

public class WeixinFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.tab01, container, false);

    }
}

其他三个也依次创建其他三个布局的Fragment，这是一般做法。因为这四个布局的Fragment的代码基本一致，所以我考虑能不能只写一个Fragment就可以实现这四个Fragment的功能，最终写下以下代码，敬请指导：

public class WeixinFragment extends Fragment {

    private int layoutID;
    //优化后的HashMap
    SparseArray<View> views;
    View rootView;

    /**
     * 构造带参构造函数
     * @param layoutID  布局的ID
     * @param context   传入上下文
     */
    public WeixinFragment(int layoutID, Context context) {
        this.layoutID = layoutID;
        views = new SparseArray<>();
        rootView = LayoutInflater.from(context).inflate(layoutID,null);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        return rootView;

    }
}

2.在MainACtivity中首先初始化4个Fragment

fragments是HashMap<Integer, WeixinFragment> 类型，初始化4个Fragment，就是将这个4个Tab对应的布局加入到HashMap中。

private void initFragments() {
        fragments.put(R.layout.tab01, new WeixinFragment(R.layout.tab01, this));
        fragments.put(R.layout.tab02, new WeixinFragment(R.layout.tab02, this));
        fragments.put(R.layout.tab03, new WeixinFragment(R.layout.tab03, this));
        fragments.put(R.layout.tab04, new WeixinFragment(R.layout.tab04, this));
    }

3.初始化控件

private void initView() {
//这四个是底部的四个LinearLayout初始化
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAdress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
//下面四个是底部图标初始化
        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);
        mSettingnImg = (ImageButton) findViewById(R.id.id_tab_setting_img);

    }

4.设置点击事件

为底部四个LinearLayout设置点击事件，这样不管时点击底部的图标还是底部的文字部分都会触发图标和内容区域的变化。代码如下：

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

    }

5.onClick方法实现

该方法是设置点击事件自动生成的，在这里需要我们判断是哪个触发了事件，然后执行相应的操作。比如，如果是点击了底部微信的图标（或文字）时，则应将微信的图标变亮，并将中间内容区域变成相应区域，如刚开始的效果展示图。代码如下：

 @Override
    public void onClick(View view) {

//在触发相应事件之前，应先将所有图标变暗，该函数就是实现该功能
        resetImg();

        switch (view.getId()) {
            case R.id.id_tab_weixin:
           //如果点击的是微信图标，就跳转到第一个tab
                setSelect(0);
                break;

            case R.id.id_tab_frd:
                setSelect(1);
                break;

            case R.id.id_tab_address:
                setSelect(2);
                break;

            case R.id.id_tab_setting:
                setSelect(3);
                break;
            default:
                break;
        }
    }
    
     /**
     * 将所有的图片切换为暗色
     */
    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);
        mSettingnImg.setImageResource(R.drawable.tab_settings_normal);

    }

6.setSelect函数实现

该函数是用来实现根据点击底部图标进行中间FramLayout内容变化的控制部分

 private void setSelect(int i) {
        //将所选图片变为亮色
        //切换对应的内容区域

        //首先拿到Fragment的内容管理器
        FragmentManager fm = getSupportFragmentManager();
        //开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        //i代表要填充的是哪个页面
        switch (i) {
            case 0:   
//将FramLayout的内容填充为Tab01            transaction.replace(R.id.id_container,fragments.get(R.layout.tab01));
            //将图标微信变成亮色
 mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.replace(R.id.id_container,fragments.get(R.layout.tab02));
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;

            case 2:

                //如果mTab01没有初始化，则进行初始化
                transaction.replace(R.id.id_container,fragments.get(R.layout.tab03));
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;

            case 3:

                transaction.replace(R.id.id_container,fragments.get(R.layout.tab04));
                mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
                break;

            default:
                break;
        }
        //最后事务进行提交
        transaction.commit();
    }

Fragment 实现微信Tab主界面

页面布局

代码实现控制

源码下载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读