Android 仿微信底部菜单
2013-07-05 00:00
495 查看
今天终于把公司的界面原型做完了，哈哈，提前完成正好趁现在有时间更新下最近学到的一些特殊效果。其中这个仿微信的底部菜单，真的要感谢家辉兄弟，我才得以解决。首先看一下实现后效果。
就下面的那个底部栏，下面看一下实现代码吧！
首先是布局main.xml:
查看源码
打印
?
其实就是用FrameLayout，微信也是这样布局的我反编译过。这样就可以灵活的布局那个红色的图标了。
下面看一下activity切换代码：
查看源码
打印
?
025
setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的，用来替换 android:drawableTop这个属性的背景图，至于为什么那么麻烦每次都要设置背景图片颜色，是因为没用用RadioGroup包含 RadioButton，所以RadioButton就不能做到单个切换。
就下面的那个底部栏，下面看一下实现代码吧！
首先是布局main.xml:
查看源码
打印
?
| 01 | <?xmlversion="1.0"encoding="UTF-8"?> |
| 02 | <TabHostandroid:id="@android :id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent" |
| 03 | xmlns:android="http://schemas.android.com/apk/res/android"> |
| 04 | <LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 05 | <FrameLayoutandroid:id="@android :id/tabcontent"android:layout_width="fill_parent"android:layout_height="0.0dip"android:layout_weight="1.0"/> |
| 06 | <TabWidgetandroid:id="@android :id/tabs"android:visibility="gone"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="0.0"/> |
| 07 |
| 08 | <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"> |
| 09 | <FrameLayoutandroid:background="@null"android:layout_width="0.0dip"android:layout_height="fill_parent"android:layout_weight="1.0"> |
| 10 | <LinearLayoutandroid:id="@+id/main_layout_addExam"android:gravity="bottom|center"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 1 3ff8 1 | <RadioButtonandroid:id="@+id/main_tab_addExam"android:checked="true"android:text="添加考试"android:drawableTop="@drawable/label_1"style="@style/MMTabButton"/> |
| 12 | </LinearLayout> |
| 13 | <LinearLayout android:gravity="top|right|center"android:paddingRight="10.0dip"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 14 | <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" /> |
| 15 | </LinearLayout> |
| 16 | </FrameLayout> |
| 17 | <FrameLayoutandroid:background="@null"android:layout_width="0.0dip"android:layout_height="fill_parent"android:layout_weight="1.0"> |
| 18 | <LinearLayoutandroid:id="@+id/main_layout_myExam"android:gravity="bottom|center"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 19 | <RadioButtonandroid:id="@+id/main_tab_myExam"android:text="我的考试"android:drawableTop="@drawable/label_2"style="@style/MMTabButton"/> |
| 20 | </LinearLayout> |
| 21 | <LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 22 | <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"/> |
| 23 | </LinearLayout> |
| 24 | </FrameLayout> |
| 25 | <FrameLayoutandroid:background="@null"android:layout_width="0.0dip"android:layout_height="fill_parent"android:layout_weight="1.0"> |
| 26 | <LinearLayoutandroid:id="@+id/main_layout_message"android:gravity="bottom|center"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 27 | <RadioButtonandroid:id="@+id/main_tab_message"android:text="考试资讯"android:drawableTop="@drawable/label_3"style="@style/MMTabButton"/> |
| 28 | </LinearLayout> |
| 29 | <LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 30 | <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"/> |
| 31 | </LinearLayout> |
| 32 | </FrameLayout> |
| 33 | <FrameLayoutandroid:background="@null"android:layout_width="0.0dip"android:layout_height="fill_parent"android:layout_weight="1.0"> |
| 34 | <LinearLayoutandroid:id="@+id/main_layout_settings"android:gravity="bottom|center"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 35 | <RadioButtonandroid:id="@+id/main_tab_settings"android:text="设置"android:drawableTop="@drawable/label4"style="@style/MMTabButton"/> |
| 36 | </LinearLayout> |
| 37 | <LinearLayoutandroid:gravity="top|right|center"android:paddingRight="10.0dip"android:layout_width="fill_parent"android:layout_height="fill_parent"> |
| 38 | <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"/> |
| 39 | </LinearLayout> |
| 40 | </FrameLayout> |
| 41 | </LinearLayout> |
| 42 | </LinearLayout> |
| 43 | </TabHost> |
下面看一下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(); |
| 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 | &nb 3ff0 sp; |
| 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 | } |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- <Android 基础（三十三）> TabHost ~ 仿微信底部菜单
- <Android 基础（三十三）> TabHost ~ 仿微信底部菜单
- 【附源码地址】Android高仿QQ及微信底部菜单的多种实现方式
- Android仿微信底部菜单
- android 仿微信底部弹出菜单
- android 中使用TabHost控件实现微信界面的底部菜单效果
- Android高仿qq及微信底部菜单的几种实现方式
- Android仿微信底部导航菜单
- Android高仿qq及微信底部菜单的几种实现方式
- Android高仿QQ及微信底部菜单的多种实现方式【附源码地址】
- Android仿微信底部菜单
- Android仿微信底部菜单
- Android DialogFragment底部弹出菜单
- Android中底部菜单被输入法顶上去的解决方案
- android底部菜单应用
- Android-小巫新闻客户端底部菜单切换实现
- android仿新浪微薄底部菜单
- Android的PopWindow动画实现底部滑出菜单
- Android UI-仿微信底部导航栏布局
- android开发 - 自定义 弹出 底部菜单