Android新手开发之旅-FragmentTabHost + Fragment 实现底部菜单

liu

FragmentTabHost + Fragment 实现底部菜单




没什么说的，直接上代码：

新建四个Fragment，这里就不贴代码了，分别是HomeFragment.class, ContactsFragment.class, DiscoverFragment.class,
MyFragment.class，都是只在布局中放入了一个TextView用来显示信息，其他都没设置
activity_main.xml：

[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="match_parent"
    android:orientation="vertical">

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

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#e5e5e5" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f8f8f8">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

MainActivity;

[Java] 纯文本查看 复制代码

package com.company.helloworld.firstapplication;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity implements View.OnClickListener {
    // Tab选项卡的文字
    private String mTextviewArray[] = {"首页", "消息", "发现", "我"};
    // Tab选项卡的图片
    private int mImageArrayOff[] = {R.drawable.home_off, R.drawable.contacts_off, R.drawable.discover_off,
            R.drawable.my_off};
    private int mImageArrayOn[] = {R.drawable.home_on, R.drawable.contacts_on, R.drawable.discover_on,
            R.drawable.my_on};
    private int mTextviewColorArray[] = {R.color.select, R.color.unselect};
    private LayoutInflater layoutInflater;
    // 定义数组存放fragment界面
    private Class fragmentArray[] = {HomeFragment.class, ContactsFragment.class, DiscoverFragment.class,
            MyFragment.class};
    private List<View> TabViews = new ArrayList<View>();
    private FragmentTabHost mTabHost;

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

        initTabView();
        initTabHostView();
        changeView(0);
    }

    /**
     * 初始化底部布局
     */
    private void initTabView() {
        // TODO Auto-generated method stub
        layoutInflater = LayoutInflater.from(this);
        int count = fragmentArray.length;
        for (int i = 0; i < count; i++) {
            View view = layoutInflater.inflate(R.layout.tab_item_view, null);
            ImageView tab_icon = view.findViewById(R.id.tab_icon);
            TextView textView = view.findViewById(R.id.tab_textView);
            textView.setText(mTextviewArray[i]);
            view.setTag(i);
            tab_icon.setTag(i);
            textView.setTag(i);
            view.setOnClickListener(this);
            textView.setOnClickListener(this);
            tab_icon.setOnClickListener(this);
            TabViews.add(view);
        }
    }


    /**
     * 该监听是只有当你切换tab时才会发生动作事件。
     */
    public void initTabHostView() {
        mTabHost = findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
        final int count = fragmentArray.length;
        for (int i = 0; i < count; i++) {
            final int index = i;
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(TabViews.get(i));
            mTabHost.addTab(tabSpec, fragmentArray[i], null);
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
            mTabHost.getTabWidget().setDividerDrawable(R.color.white);
            mTabHost.getTabWidget().getChildAt(i).setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    //点击的第几个tab
                    mTabHost.setCurrentTab(index);
                    //分别设置选中tab和未选中tab的显示
                    for (int j = 0; j < count; j++) {
                        View view = TabViews.get(j);
                        ImageView tab_icon = view.findViewById(R.id.tab_icon);
                        TextView textView = view.findViewById(R.id.tab_textView);
                        if (j == index) {
                            tab_icon.setImageResource(mImageArrayOn[j]);
                            textView.setTextColor(ContextCompat.getColor(MainActivity.this, mTextviewColorArray[0]));
                        } else {
                            tab_icon.setImageResource(mImageArrayOff[j]);
                            textView.setTextColor(ContextCompat.getColor(MainActivity.this, mTextviewColorArray[1]));
                        }
                    }
                }
            });
        }
    }

    //根据选中的tab改变状态  参数是选中的tab的索引
    private void changeView(int index) {
        int count = TabViews.size();
        for (int i = 0; i < count; i++) {
            View view = TabViews.get(i);
            ImageView tab_icon = view.findViewById(R.id.tab_icon);
            TextView textView =  view.findViewById(R.id.tab_textView);
            if ((Integer) view.getTag() == index) {
                tab_icon.setImageResource(mImageArrayOn[i]);
                textView.setTextColor(ContextCompat.getColor(this, mTextviewColorArray[0]));
            } else {
                tab_icon.setImageResource(mImageArrayOff[i]);
                textView.setTextColor(ContextCompat.getColor(this, mTextviewColorArray[1]));
            }
        }
    }

    @Override
    public void onClick(View view) {
        if (view.getTag() == null) {
            return;
        }
        int index = (Integer) view.getTag();
        mTabHost.setCurrentTab(index);
        changeView(index);
    }
}

selector_tab_background.xml:

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/host_bg" android:state_pressed="true"/>
    <item android:drawable="@color/host_bg" android:state_selected="true"/>

</selector>

res/color.xml:

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="select">#00c800</color>
    <color name="unselect">#000000</color>
    <color name="white">#ffffff</color>
    <!-- 底部导航栏底部颜色 -->
    <color name="host_bg">#f8f8f8</color>
</resources>

看下运行效果：

        

Amy

强烈支持楼主ing……

竹林风

感恩无私的分享与奉献