底部菜单栏(一) TabHost实现

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

效果图:

实现分析:

1.目录结构:

代码实现:

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

时间: 2024-10-13 17:07:15

底部菜单栏(一) TabHost实现的相关文章

底部菜单栏(二) TabHost &amp; RadioGroup 实现

需求:使用TabHost & RadioGroup实现底部菜单栏: 效果图: 实现分析: 1.目录结构: 代码实现: 1. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android

Android底部菜单栏(用TabHost一次性加载耗内存)

上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

安卓开发笔记——多种方式实现底部菜单栏(仿微信界面)

关于底部菜单是什么,我想没必要介绍了,在市场上的APP里太常见了,这里提供两种方式来实现. 记得之前写过几篇关于底部菜单实现的方法,有兴趣的朋友可以看看: 1.<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)> 2.<安卓开发复习笔记——TabHost组件(二)(实现底部菜单导航)> 3.<安卓开发笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)> 今天带来种相对更通俗易懂的写法,不再和过去一样去沿用TabHost了

关于安卓开发实现底部菜单栏

将TabHost的标签放在底部 直接上代码 主代码: 1 package sdut; 2 3 import com.example.sdutfriends.R; 4 5 import android.app.AlertDialog; 6 import android.app.TabActivity; 7 import android.content.DialogInterface; 8 import android.content.Intent; 9 import android.os.Bund

【Android UI设计与开发】第06期:底部菜单栏(一)使用TabActivity实现底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8989063       从这一篇文章开始,我们将进入到一个应用程序主界面UI的开发和设计中了,底部菜单栏在Android的应用开发当中占有非常重要的地位.几乎所有的手机应用程序都有底部菜单栏这样的控件,主要是因为手机的屏幕大小有限,这样一种底部菜单栏实现起来的效果可以很方便的为用户切换自己所需要的界面,具有更强的交互性.底部菜单栏的样式和效果也是五花八门,多的数不胜数,但是

【Android开发笔记】底部菜单栏 FragmentTabHost

公司项目,需求本来是按照谷歌官方指南写的,菜单栏设计成在导航栏下方 结果呢,审评时,BOSS为了和iOS统一,改成了底部菜单栏(标准结局),我只能呵呵呵呵呵呵呵 查了查资料发现实现底部菜单栏用的是FragmentTabHost,下面记录下具体如何实现的 首先,假设我有3个菜单栏,对应3个Fragment:FragmentA.FragmentB.FragmentC 这3个Fragment将由3个一个Activity控制:TabHostActivity TabHostActivity对应的xml文件

TabActivity实现底部菜单栏(六)

滴水穿石不是靠力,而是因为不舍昼夜. 本讲内容:TabActivity实现底部菜单栏 TabActivity这个类已经在Android4.0的系统中被弃用了,新的应用程序应该使用Fragment来代替该类的开发 示例效果图      (一)第一种实现方式:隐藏TabWidget,通过RadioGroup和RadioButton实现底部菜单栏.这种方式更漂亮,也更灵活,大部分的应用程序基本都是使用这种方式,通过setCurrentTabByTag()方法来切换不同的选项卡. 下面是res/layo

Android仿微信底部菜单栏+顶部菜单栏(附源码)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度. 最终效果:源码免费下载 一.布局 1.顶部菜单布局,命名为top_layout.xml

炫酷的底部菜单栏BottomBar

开源项目分析BottomBar 今天分析一个炫酷的底部菜单栏开源项目,先说明下用法,再分析一下源码的实现. GitHub地址 https://github.com/roughike/BottomBar 先上个效果图 使用 添加依赖 compile 'com.roughike:bottom-bar:1.3.3' 创建menu资源文件 res/menu/bottombar_menu.xml: <menu xmlns:android="http://schemas.android.com/apk