Android仿微信底部菜单

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

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

首先是布局main.xml:

[html] view plain copy

<?xmlversion="1.0"encoding="UTF-8"?>
<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"/>
</LinearLayout>
<LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout_width="fill_parent"android:layout_height="fill_parent">
<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"/>
</LinearLayout>
</FrameLayout>
<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"/>
</LinearLayout>
<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"/>
</LinearLayout>
</FrameLayout>
<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"/>
</LinearLayout>
<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"/>
</LinearLayout>
</FrameLayout>
<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"/>
</LinearLayout>
<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"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
</TabHost>

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

下面看一下activity切换代码：

[html] view plain copy

importandroid.app.TabActivity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.view.Window;
importandroid.widget.LinearLayout;
importandroid.widget.RadioButton;
importandroid.widget.TabHost;
importandroid.widget.TextView;
publicclassMainTabActivityextendsTabActivity{
TabHosttabHost;
privateTextViewmain_tab_unread_tv;
privateRadioButtonmain_tab_addExam,main_tab_myExam,main_tab_message,main_tab_settings;
privateLinearLayoutmain_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
initTab();
init();
}
privatevoidinit(){
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(newOnClickListener(){
publicvoidonClick(Viewarg0){
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(newOnClickListener(){
publicvoidonClick(Viewarg0){
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(newOnClickListener(){
publicvoidonClick(Viewv){
//TODOAuto-generatedmethodstub
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(newOnClickListener(){
publicvoidonClick(Viewv){
//TODOAuto-generatedmethodstub
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);
}
});
}
privatevoidinitTab(){
tabHost=getTabHost();
tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(
newIntent(this,AddExamActivity.class)));
tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(
newIntent(this,MyExamActivity.class)));
tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(
newIntent(this,MessageActivity.class)));
tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(
newIntent(this,SettingActivity.class)));
}
}

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

更多相关文章

随机推荐