模拟Android微信APK底部的TabHost选项卡
jopen
11年前
资源准备
下载一个微信apk,解压,并找出所需的资源图片。
<?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>
<!-- 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>
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); } }