码迷,mamicode.com
首页 > 其他好文 > 详细

底部菜单栏(一) TabHost实现

时间:2014-09-10 15:42:00      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   color   os   io   使用   java   

需求:使用TabHost实现底部菜单栏;

效果图:

bubuko.com,布布扣

实现分析:

1.目录结构:

bubuko.com,布布扣

bubuko.com,布布扣

代码实现:

1.activity_main.xml

<?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"
            android:background="@drawable/tab_widget_background" />
    </LinearLayout>

</TabHost>

2 activity_one.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/image_01" >

</FrameLayout>

3 item_tab_view.xml

<?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"
        style="@style/item_tab_text_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

4 tab_background_selector.xml

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

    <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_item_d" android:state_selected="true"/>

</selector>

5 style.xml

    <style name="item_tab_text_style">
        <item name="android:textSize">10.0dip</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:singleLine">true</item>
    </style>

6 Constant.java

package com.jjc.demo;

/**
 * @author ThinkPad
 *    功能描述:常量工具类
 */
public class Constant {
    
    public static final class ConValue{
        
        /**
         * Tab选项卡的图标
         */
        public static int mImageViewArray[] = {
            R.drawable.tab_icon1,
            R.drawable.tab_icon2,
            R.drawable.tab_icon3,
            R.drawable.tab_icon4,
            R.drawable.tab_icon5
        };
        
        /**
         * Tab选项卡的文字
         */
        public static String mTextViewArray[] = {"主页", "关于", "设置", "搜索", "更多"};
        
        /** 
         * 每一个Tab界面 
         */ 
        public static Class<?> mTabClassArray[] = {
            ActivityOne.class,
            ActivityTwo.class,
            ActivityThree.class,
            ActivityFour.class,
            ActivityFive.class
        };
    }
}

7 ActivityOne.java

package com.jjc.demo;

import android.app.Activity;
import android.os.Bundle;

public class ActivityOne extends Activity{

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

8 MainActivity.java

package com.jjc.demo;

import com.jjc.demo.Constant.ConValue;

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

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() {
        // 实例化TabHost对象,得到TabHost
        mTabHost = getTabHost();

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

        // 得到Activity的个数
        int count = ConValue.mTabClassArray.length;

        for (int i = 0; i < count; i++) {
            // 为每一个Tab按钮设置图标、文字和内容
            TabSpec tabSpec = mTabHost.newTabSpec(ConValue.mTextViewArray[i])
                    .setIndicator(getTabItemView(i))
                    .setContent(getTabItemIntent(i));
            // 将Tab按钮添加进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(ConValue.mImageViewArray[index]);
        }
        TextView textView = (TextView) view.findViewById(R.id.text_name);
        textView.setText(ConValue.mTextViewArray[index]);
        return view;
    }

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

 

代码:http://pan.baidu.com/s/1lLFx8

底部菜单栏(一) TabHost实现

标签:android   style   blog   http   color   os   io   使用   java   

原文地址:http://www.cnblogs.com/sishuiliuyun/p/3964418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!