模拟Android微信APK底部的TabHost选项卡

jopen 10年前

资源准备

下载一个微信apk,解压,并找出所需的资源图片。
20130920001352859.jpeg

layout中XML布局
    <?xml version="1.0" encoding="UTF-8"?>        <!-- Tab导航 最新版 -->        <TabHost xmlns:android="http://schemas.android.com/apk/res/android"            android:id="@android:id/tabhost"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >                    <RelativeLayout                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:orientation="vertical">                        <FrameLayout                    android:id="@android:id/tabcontent"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:background="#FFF" >                        </FrameLayout>                        <!-- TabWidget管理所有的选项卡,id名是android指定的 -->                <TabWidget                    android:id="@android:id/tabs"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:visibility="gone" />                        <!-- Frame下放置单选群组替代TAB效果 -->                <RadioGroup                    android:id="@+id/main_radio"                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:background="#ccc"                    android:gravity="center_vertical"                    android:orientation="horizontal"                    android:layout_alignParentBottom="true" >                            <RadioButton                        android:id="@+id/tab_icon_weixin"                        style="@style/main_tab_bottom"                        android:checked="true"                        android:drawableTop="@drawable/tab_weixin_normal"                        android:text="微信" />                            <RadioButton                        android:id="@+id/tab_icon_address"                        style="@style/main_tab_bottom"                        android:checked="false"                        android:drawableTop="@drawable/tab_address_normal"                        android:text="通讯录" />                            <RadioButton                        android:id="@+id/tab_icon_find"                        style="@style/main_tab_bottom"                        android:drawableTop="@drawable/tab_find_frd_normal"                        android:text="发现" />                            <RadioButton                        android:id="@+id/tab_icon_myself"                        style="@style/main_tab_bottom"                        android:drawableTop="@drawable/tab_settings_normal"                        android:text="我" />                </RadioGroup>            </RelativeLayout>        </TabHost>  

style中XML文档
     <!-- MainTab选项卡中单选按钮的样式,其中包括了文本、selector、padding、宽高、权重等的设置 -->         <style name="main_tab_bottom">             <item name="android:textSize">13sp</item>             <item name="android:textColor">#666666</item>             <item name="android:gravity">center_horizontal</item>        <!-- 该处引用drawable下面的一个xml文档(selector) -->             <item name="android:paddingTop">5dp</item>             <item name="android:layout_width">fill_parent</item>             <item name="android:layout_height">wrap_content</item>             <item name="android:layout_weight">1.0</item>        <!-- 每个按钮的权重,相等则平分尺寸 -->             <item name="android:button">@null</item>        <!-- 隐藏单选按钮 -->             <item name="android:layout_marginTop">1.0dip</item>             <item name="android:paddingBottom">5.0dip</item>         </style>  

Activity中Java文件
    package com.app;                import android.app.AlertDialog;        import android.app.TabActivity;        import android.content.DialogInterface;        import android.content.Intent;        import android.os.Bundle;        import android.view.KeyEvent;        import android.view.View;        import android.widget.RadioButton;        import android.widget.RadioGroup;        import android.widget.TabHost;        import android.widget.TextView;        import android.widget.Toast;        import android.widget.TabWidget;                /**        * Tab导航        */        //public class Tabs extends TabActivity implements View.OnClickListener{        public class Tabs extends TabActivity{            public static TabHost mTabHost;            public static TabHost getmTabHost() {                return mTabHost;            }                    private RadioGroup main_radio;            private RadioButton tab_icon_weixin, tab_icon_address, tab_icon_find,tab_icon_myself;                    /** Called when the activity is first created. */            @Override            public void onCreate(Bundle savedInstanceState) {                super.onCreate(savedInstanceState);                setContentView(R.layout.tabs);                mTabHost = getTabHost();                final TabWidget tabWidget = mTabHost.getTabWidget();                tabWidget.setStripEnabled(false);// 圆角边线不启用                //添加n个tab选项卡,定义他们的tab名,指示名,目标屏对应的类                mTabHost.addTab(mTabHost.newTabSpec("TAG1").setIndicator("0").setContent(new Intent(this, WeixinActivity.class)));                mTabHost.addTab(mTabHost.newTabSpec("TAG2").setIndicator("1").setContent(new Intent(this, AddressActivity.class)));                mTabHost.addTab(mTabHost.newTabSpec("TAG3").setIndicator("2").setContent(new Intent(this, FindActivity.class)));                mTabHost.addTab(mTabHost.newTabSpec("TAG4").setIndicator("3").setContent(new Intent(this, MyselfActivity.class)));                // 视觉上,用单选按钮替代TabWidget                main_radio = (RadioGroup) findViewById(R.id.main_radio);                tab_icon_weixin = (RadioButton) findViewById(R.id.tab_icon_weixin);                tab_icon_address = (RadioButton) findViewById(R.id.tab_icon_address);                tab_icon_find = (RadioButton) findViewById(R.id.tab_icon_find);                tab_icon_myself = (RadioButton) findViewById(R.id.tab_icon_myself);                main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {                            @Override                            public void onCheckedChanged(RadioGroup group, int id) {                                if (id == tab_icon_weixin.getId()) {                                    mTabHost.setCurrentTab(0);                                } else if (id == tab_icon_address.getId()) {                                    mTabHost.setCurrentTab(1);                                } else if (id == tab_icon_find.getId()) {                                    mTabHost.setCurrentTab(2);                                } else if (id == tab_icon_myself.getId()) {                                    mTabHost.setCurrentTab(3);                                }                            }                        });                        // 设置当前显示哪一个标签                mTabHost.setCurrentTab(0);                // 遍历tabWidget每个标签,设置背景图片 无                for (int i = 0; i < tabWidget.getChildCount(); i++) {                    View vv = tabWidget.getChildAt(i);                    vv.getLayoutParams().height = 45;                    // vv.getLayoutParams().width = 65;                    vv.setBackgroundDrawable(null);                }        //      findViewById(R.id.tab_icon_brand).setOnClickListener(this);            }        }  

效果图

20130920001922656.jpeg

</div>