Android 仿微信底部菜单 - HelloWorld开发者社区

今天终于把公司的界面原型做完了，哈哈，提前完成正好趁现在有时间更新下最近学到的一些特殊效果。其中这个仿微信的底部菜单，真的要感谢家辉兄弟，我才得以解决。首先看一下实现后效果。

就下面的那个底部栏，下面看一下实现代码吧！

首先是布局main.xml:

<TabHostandroid:id="@android :id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

LinearLayoutandroid:orientation="vertical"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

<FrameLayoutandroid:id="@android :id/tabcontent"android:layout_width="fill_parent"android:layout_height="0.0dip"android:layout_weight="1.0"/>

<TabWidgetandroid:id="@android :id/tabs"android:visibility="gone"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="0.0"/>

LinearLayoutandroid: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"

FrameLayoutandroid:background="@null"android:layout\_width="0.0dip"android:layout\_height="fill\_parent"android:layout\_weight="1.0"

LinearLayoutandroid:id="@+id/main\_layout\_addExam"android:gravity="bottom|center"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

RadioButtonandroid:id="@+id/main\_tab\_addExam"android:checked="true"android:text="添加考试"android:drawableTop="@drawable/label\_1"style="@style/MMTabButton"/

<TextViewandroid: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" />

FrameLayoutandroid:background="@null"android:layout\_width="0.0dip"android:layout\_height="fill\_parent"android:layout\_weight="1.0"

LinearLayoutandroid:id="@+id/main\_layout\_myExam"android:gravity="bottom|center"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

RadioButtonandroid:id="@+id/main\_tab\_myExam"android:text="我的考试"android:drawableTop="@drawable/label\_2"style="@style/MMTabButton"/

LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

TextViewandroid: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"/

FrameLayoutandroid:background="@null"android:layout\_width="0.0dip"android:layout\_height="fill\_parent"android:layout\_weight="1.0"

LinearLayoutandroid:id="@+id/main\_layout\_message"android:gravity="bottom|center"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

RadioButtonandroid:id="@+id/main\_tab\_message"android:text="考试资讯"android:drawableTop="@drawable/label\_3"style="@style/MMTabButton"/

LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

TextViewandroid: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"/

FrameLayoutandroid:background="@null"android:layout\_width="0.0dip"android:layout\_height="fill\_parent"android:layout\_weight="1.0"

LinearLayoutandroid:id="@+id/main\_layout\_settings"android:gravity="bottom|center"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

RadioButtonandroid:id="@+id/main\_tab\_settings"android:text="设置"android:drawableTop="@drawable/label4"style="@style/MMTabButton"/

LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout\_width="fill\_parent"android:layout\_height="fill\_parent"

TextViewandroid: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"/

其实就是用FrameLayout，微信也是这样布局的我反编译过。这样就可以灵活的布局那个红色的图标了。

下面看一下activity切换代码：

查看源码

打印 ?

001

importandroid.app.TabActivity;

002

importandroid.content.Intent;

003

importandroid.os.Bundle;

004

importandroid.view.View;

005

importandroid.view.View.OnClickListener;

006

importandroid.view.Window;

007

importandroid.widget.LinearLayout;

008

importandroid.widget.RadioButton;

009

importandroid.widget.TabHost;

010

importandroid.widget.TextView;

011

012

publicclassMainTabActivityextendsTabActivity {

013

014

TabHost tabHost;

015

privateTextView main_tab_unread_tv;

016

privateRadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings;

017

privateLinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;

018

019

publicvoidonCreate(Bundle savedInstanceState) {

020

super.onCreate(savedInstanceState);

021

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

022

setContentView(R.layout.main);

023

024

initTab();

025

026

init();

027

028

}

029

030

privatevoidinit() {

031

032

main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam);

033

034

main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam);

035

036

main_tab_message=(RadioButton) findViewById(R.id.main_tab_message);

037

038

main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings);

039

040

main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam);

041

main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam);

042

main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message);

043

main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings);

044

045

main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one),null,null);

046

main_layout_addExam.setBackgroundResource(R.drawable.labelbg);

047

048

main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv);

049

//main_tab_unread_tv.setVisibility(View.VISIBLE);

050

//main_tab_unread_tv.setText("3");

051

052

main_tab_addExam.setOnClickListener(newOnClickListener() {

053

054

publicvoidonClick(View arg0) {

055

tabHost.setCurrentTabByTag("first");

056

/*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one);

057

main_tab_myExam.setBackgroundResource(R.drawable.label_2);

058

main_tab_message.setBackgroundResource(R.drawable.label_3);*/

059

//main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null);

060

main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);

061

main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);

062

main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);

063

main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);

064

main_layout_addExam.setBackgroundResource(R.drawable.labelbg);

065

main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);

066

main_layout_message.setBackgroundResource(R.drawable.mm_trans);

067

main_layout_settings.setBackgroundResource(R.drawable.mm_trans);

068

}

069

});

070

071

main_tab_myExam.setOnClickListener(new OnClickListener() {

072

073

public void onClick(View arg0) {

074

tabHost.setCurrentTabByTag("second");

075

/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);

076

main_tab_myExam.setBackgroundResource(R.drawable.label_two_one);

077

main_tab_message.setBackgroundResource(R.drawable.label_3);*/

078

main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);

079

main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null);

080

main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);

081

main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);

082

main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);

083

main_layout_myExam.setBackgroundResource(R.drawable.labelbg);

084

main_layout_message.setBackgroundResource(R.drawable.mm_trans);

085

main_layout_settings.setBackgroundResource(R.drawable.mm_trans);

086

}

087

});

088

main_tab_message.setOnClickListener(new OnClickListener() {

089

090

public void onClick(View v) {

091

// TODO Auto-generated method stub

092

tabHost.setCurrentTabByTag("third");

093

/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);

094

main_tab_myExam.setBackgroundResource(R.drawable.label_2);

095

main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/

096

main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1),null,null);

097

main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2),null,null);

098

main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one),null,null);

099

main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4),null,null);

100

main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);

101

main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);

102

main_layout_message.setBackgroundResource(R.drawable.labelbg);

103

main_layout_settings.setBackgroundResource(R.drawable.mm_trans);

104

}

105

});

106

107

main_tab_settings.setOnClickListener(newOnClickListener() {

108

109

publicvoidonClick(View v) {

110

// TODO Auto-generated method stub

111

tabHost.setCurrentTabByTag("four");

112

main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1),null,null);

113

main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2),null,null);

114

main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3),null,null);

115

main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_four_one),null,null);

116

main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);

117

main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);

118

main_layout_message.setBackgroundResource(R.drawable.mm_trans);

119

main_layout_settings.setBackgroundResource(R.drawable.labelbg);

120

}

121

});

122

}

123

124

125

privatevoidinitTab(){

126

tabHost=getTabHost();

127

tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(

128

newIntent(this, AddExamActivity.class)));

129

130

tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(

131

newIntent(this, MyExamActivity.class)));

132

133

tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(

134

newIntent(this, MessageActivity.class)));

135

136

tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(

137

newIntent(this, SettingActivity.class)));

138

139

}

140

141

}

setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的，用来替换 android:drawableTop这个属性的背景图，至于为什么那么麻烦每次都要设置背景图片颜色，是因为没用用RadioGroup包含 RadioButton，所以RadioButton就不能做到单个切换。

Android进阶之旅-(NDK实战篇之OpenCV）

Android进阶之旅-(Framework源码分析)

热门文章