TabHost实现底部导航栏

1.实现的效果图

2.MainActivity中继承于TabActivity,其布局如下:

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:layout_weight="0"
          />
    </LinearLayout>

</TabHost>

3.MainActivity实现代码如下:

package myapplication.com.myapplicationforexample;

import android.app.TabActivity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import myapplication.com.myapplicationforexample.Constant.Constant;

/***
 * TabHost的使用
 * */
public class MainActivity extends TabActivity {


    private TabHost mTabHost;
    private LayoutInflater mInflater;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    /**
     * 初始化
     */
    private void initView() {

        mTabHost=getTabHost();
       /**
        * 实例化布局对象
        * */
        mInflater = LayoutInflater.from(this);

        /**
         * 获取activity个数
         * */
        int count = Constant.ConValue.mTabClassArray.length;

        for (int i = 0; i < count; i++) {
           /**
            * 给每个tba设置图片,文字
            * */
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(Constant.ConValue.mTextViewArray[i])
                    .setIndicator(getTabItemView(i))
                    .setContent(getTabItemIntent(i));
            /**
             * 加入Tab选项中
             * */
            mTabHost.addTab(tabSpec);
            /**
             * 设置tab背景,样式
             * */
            //  mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_background_selector);
        }
    }

    /**
     *
     * 给Tab按钮设置图标和文字
     *
     */
    private View getTabItemView(int index) {
        View view = mInflater.inflate(R.layout.item_tab_view, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image_icon);
        if (imageView != null) {
            imageView.setImageResource(Constant.ConValue.mImageViewArray[index]);
        }
        TextView textView = (TextView) view.findViewById(R.id.text_name);
        textView.setText(Constant.ConValue.mTextViewArray[index]);
        return view;
    }

    /**
     * 给Tab选项卡设置内容(每个内容是一个Activity)
     */
    private Intent getTabItemIntent(int index) {
        Intent intent = new Intent(this, Constant.ConValue.mTabClassArray[index]);
        return intent;
    }
}

4.Activity_one到Four其布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity__three"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="myapplication.com.myapplicationforexample.activity.Activity_One">

    <ImageView
        android:id="@+id/image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/page_a"
        android:scaleType="centerCrop"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_marginTop="15dp"
        android:layout_below="@+id/image"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:text="音乐界面"/>
</RelativeLayout>

5.item_tab_view即是tab:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" />

    <TextView
        android:id="@+id/text_name"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>

6.其Constan则是

public class Constant {

    public static final class ConValue{

        /**
         * Tab选项卡的图标
         */
        public static int mImageViewArray[] = {
                R.mipmap.music,
                R.mipmap.dynamic,
                R.mipmap.settings,
                R.mipmap.user


        };

        /**
         * Tab选项卡的文字
         */
        public static String mTextViewArray[] = {"音乐", "刷新", "设置", "关于"};

        /**
         * 每一个Tab界面
         */
        public static Class<?> mTabClassArray[] = {
                Activity_One.class,
                Activity_Two.class,
                Activity_Three.class,
                Activity_Four.class,
        };
    }
}

 

posted @ 2017-01-23 11:06  咖喱不见不散啊  阅读(452)  评论(0编辑  收藏  举报