Android 仿微信底部菜单
fmms
13年前
今天终于把公司的界面原型做完了，哈哈，提前完成正好趁现在有时间更新下最近学到的一些特殊效果。其中这个仿微信的底部菜单，真的要感谢家辉兄弟，我才得以解决。首先看一下实现后效果。
就下面的那个底部栏，下面看一下实现代码吧！
首先是布局main.xml:
<?xml version="1.0" encoding="UTF-8"?> <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" /> <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" /> <LinearLayout android:gravity="bottom" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@+id/main_tab_group" android:background="@drawable/bottom1" android:paddingTop="2.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content"> <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0"> <LinearLayout android:id="@+id/main_layout_addExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioButton android:id="@+id/main_tab_addExam" android:checked="true" android:text="添加考试" android:drawableTop="@drawable/label_1" style="@style/MMTabButton" /> </LinearLayout> <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:textSize="10.0dip" android:text="1" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_unread_tv" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </FrameLayout> <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0"> <LinearLayout android:id="@+id/main_layout_myExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioButton android:id="@+id/main_tab_myExam" android:text="我的考试" android:drawableTop="@drawable/label_2" style="@style/MMTabButton" /> </LinearLayout> <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_address" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" /> </LinearLayout> </FrameLayout> <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0"> <LinearLayout android:id="@+id/main_layout_message" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioButton android:id="@+id/main_tab_message" android:text="考试资讯" android:drawableTop="@drawable/label_3" style="@style/MMTabButton" /> </LinearLayout> <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:textSize="12.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_new_tv" android:background="@drawable/new_icon_2" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" /> </LinearLayout> </FrameLayout> <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0"> <LinearLayout android:id="@+id/main_layout_settings" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioButton android:id="@+id/main_tab_settings" android:text="设置" android:drawableTop="@drawable/label4" style="@style/MMTabButton" /> </LinearLayout> <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_setting_new_tv" android:background="@drawable/new_icon_2" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" /> </LinearLayout> </FrameLayout> </LinearLayout> </LinearLayout> </TabHost>其实就是用FrameLayout，微信也是这样布局的我反编译过。这样就可以灵活的布局那个红色的图标了。
下面看一下activity切换代码：
import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.LinearLayout; import android.widget.RadioButton; import android.widget.TabHost; import android.widget.TextView; public class MainTabActivity extends TabActivity { TabHost tabHost; private TextView main_tab_unread_tv; private RadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings; private LinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); initTab(); init(); } private void init() { main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam); main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam); main_tab_message=(RadioButton) findViewById(R.id.main_tab_message); main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings); main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam); main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam); main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message); main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings); main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null); main_layout_addExam.setBackgroundResource(R.drawable.labelbg); main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv); //main_tab_unread_tv.setVisibility(View.VISIBLE); //main_tab_unread_tv.setText("3"); main_tab_addExam.setOnClickListener(new OnClickListener() { public void onClick(View arg0) { tabHost.setCurrentTabByTag("first"); /*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one); main_tab_myExam.setBackgroundResource(R.drawable.label_2); main_tab_message.setBackgroundResource(R.drawable.label_3);*/ //main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null); main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null); main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null); main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null); main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null); main_layout_addExam.setBackgroundResource(R.drawable.labelbg); main_layout_myExam.setBackgroundResource(R.drawable.mm_trans); main_layout_message.setBackgroundResource(R.drawable.mm_trans); main_layout_settings.setBackgroundResource(R.drawable.mm_trans); } }); main_tab_myExam.setOnClickListener(new OnClickListener() { public void onClick(View arg0) { tabHost.setCurrentTabByTag("second"); /*main_tab_addExam.setBackgroundResource(R.drawable.label_1); main_tab_myExam.setBackgroundResource(R.drawable.label_two_one); main_tab_message.setBackgroundResource(R.drawable.label_3);*/ main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null); main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null); main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null); main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null); main_layout_addExam.setBackgroundResource(R.drawable.mm_trans); main_layout_myExam.setBackgroundResource(R.drawable.labelbg); main_layout_message.setBackgroundResource(R.drawable.mm_trans); main_layout_settings.setBackgroundResource(R.drawable.mm_trans); } }); main_tab_message.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub tabHost.setCurrentTabByTag("third"); /*main_tab_addExam.setBackgroundResource(R.drawable.label_1); main_tab_myExam.setBackgroundResource(R.drawable.label_2); main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/ main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null); main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null); main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one), null, null); main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null); main_layout_addExam.setBackgroundResource(R.drawable.mm_trans); main_layout_myExam.setBackgroundResource(R.drawable.mm_trans); main_layout_message.setBackgroundResource(R.drawable.labelbg); main_layout_settings.setBackgroundResource(R.drawable.mm_trans); } }); main_tab_settings.setOnClickListener(new OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub tabHost.setCurrentTabByTag("four"); main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null); main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null); main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null); main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_four_one), null, null); main_layout_addExam.setBackgroundResource(R.drawable.mm_trans); main_layout_myExam.setBackgroundResource(R.drawable.mm_trans); main_layout_message.setBackgroundResource(R.drawable.mm_trans); main_layout_settings.setBackgroundResource(R.drawable.labelbg); } }); } private void initTab(){ tabHost=getTabHost(); tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent( new Intent(this, AddExamActivity.class))); tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent( new Intent(this, MyExamActivity.class))); tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent( new Intent(this, MessageActivity.class))); tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent( new Intent(this, SettingActivity.class))); } } setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的，用来替换 android:drawableTop这个属性的背景图，至于为什么那么麻烦每次都要设置背景图片颜色，是因为没用用RadioGroup包含 RadioButton，所以RadioButton就不能做到单个切换。