`
mixer_a
  • 浏览: 342436 次
社区版块
存档分类
最新评论

Android仿微信底部菜单

android 
阅读更多

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

     

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

    首先是布局main.xml:

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  5.         <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />  
  6.         <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />  
  7.   
  8.         <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">  
  9.             <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">  
  10.                 <LinearLayout android:id="@+id/main_layout_addExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  11.                     <RadioButton android: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.                     <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"  />  
  15.                 </LinearLayout>  
  16.             </FrameLayout>  
  17.              <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">  
  18.                 <LinearLayout android:id="@+id/main_layout_myExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  19.                      <RadioButton android:id="@+id/main_tab_myExam" android:text="我的考试" android:drawableTop="@drawable/label_2" style="@style/MMTabButton" />  
  20.                 </LinearLayout>  
  21.                 <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  22.                     <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" />  
  23.                 </LinearLayout>  
  24.             </FrameLayout>  
  25.             <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">  
  26.                 <LinearLayout android:id="@+id/main_layout_message" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  27.                     <RadioButton android:id="@+id/main_tab_message" android:text="考试资讯" android:drawableTop="@drawable/label_3" style="@style/MMTabButton" />  
  28.                 </LinearLayout>  
  29.                 <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  30.                     <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" />  
  31.                 </LinearLayout>  
  32.             </FrameLayout>  
  33.             <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">  
  34.                 <LinearLayout android:id="@+id/main_layout_settings" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  35.                     <RadioButton android:id="@+id/main_tab_settings" android:text="设置" android:drawableTop="@drawable/label4" style="@style/MMTabButton" />  
  36.                 </LinearLayout>  
  37.                 <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  38.                     <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" />  
  39.                 </LinearLayout>  
  40.             </FrameLayout>  
  41.         </LinearLayout>  
  42.     </LinearLayout>  
  43. </TabHost>  

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

 

      下面看一下activity切换代码：

 

[html] view plaincopy
  1. import android.app.TabActivity;  
  2. import android.content.Intent;  
  3. import android.os.Bundle;  
  4. import android.view.View;  
  5. import android.view.View.OnClickListener;  
  6. import android.view.Window;  
  7. import android.widget.LinearLayout;  
  8. import android.widget.RadioButton;  
  9. import android.widget.TabHost;  
  10. import android.widget.TextView;  
  11.   
  12. public class MainTabActivity extends TabActivity {  
  13.   
  14.     TabHost tabHost;  
  15.     private TextView main_tab_unread_tv;  
  16.     private RadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings;  
  17.     private LinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;  
  18.   
  19.     public void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
  22.         setContentView(R.layout.main);  
  23.   
  24.         initTab();  
  25.           
  26.         init();  
  27.           
  28.     }  
  29.   
  30.     private void init() {  
  31.   
  32.         main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam);  
  33.   
  34.         main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam);  
  35.           
  36.         main_tab_message=(RadioButton) findViewById(R.id.main_tab_message);  
  37.           
  38.         main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings);  
  39.           
  40.         main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam);  
  41.         main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam);  
  42.         main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message);  
  43.         main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings);  
  44.           
  45.         main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);  
  46.         main_layout_addExam.setBackgroundResource(R.drawable.labelbg);  
  47.           
  48.         main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv);  
  49.         //main_tab_unread_tv.setVisibility(View.VISIBLE);  
  50.         //main_tab_unread_tv.setText("3");  
  51.           
  52.         main_tab_addExam.setOnClickListener(new OnClickListener() {  
  53.               
  54.             public void onClick(View arg0) {  
  55.                 tabHost.setCurrentTabByTag("first");  
  56.                 /*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one);  
  57.                 main_tab_myExam.setBackgroundResource(R.drawable.label_2);  
  58.                 main_tab_message.setBackgroundResource(R.drawable.label_3);*/  
  59.                 //main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null);  
  60.                 main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);  
  61.                 main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);  
  62.                 main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);  
  63.                 main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);  
  64.                 main_layout_addExam.setBackgroundResource(R.drawable.labelbg);  
  65.                 main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);  
  66.                 main_layout_message.setBackgroundResource(R.drawable.mm_trans);  
  67.                 main_layout_settings.setBackgroundResource(R.drawable.mm_trans);  
  68.             }  
  69.         });  
  70.           
  71.         main_tab_myExam.setOnClickListener(new OnClickListener() {  
  72.               
  73.             public void onClick(View arg0) {  
  74.                 tabHost.setCurrentTabByTag("second");  
  75.                 /*main_tab_addExam.setBackgroundResource(R.drawable.label_1);  
  76.                 main_tab_myExam.setBackgroundResource(R.drawable.label_two_one);  
  77.                 main_tab_message.setBackgroundResource(R.drawable.label_3);*/  
  78.                 main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);  
  79.                 main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null);  
  80.                 main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);  
  81.                 main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);  
  82.                 main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);  
  83.                 main_layout_myExam.setBackgroundResource(R.drawable.labelbg);  
  84.                 main_layout_message.setBackgroundResource(R.drawable.mm_trans);  
  85.                 main_layout_settings.setBackgroundResource(R.drawable.mm_trans);  
  86.             }  
  87.         });  
  88.         main_tab_message.setOnClickListener(new OnClickListener() {  
  89.               
  90.             public void onClick(View v) {  
  91.                 // TODO Auto-generated method stub  
  92.                 tabHost.setCurrentTabByTag("third");  
  93.                 /*main_tab_addExam.setBackgroundResource(R.drawable.label_1);  
  94.                 main_tab_myExam.setBackgroundResource(R.drawable.label_2);  
  95.                 main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/  
  96.                 main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);  
  97.                 main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);  
  98.                 main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one), null, null);  
  99.                 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(new OnClickListener() {  
  108.               
  109.             public void onClick(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.     private void initTab(){  
  126.         tabHost=getTabHost();  
  127.         tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(  
  128.                 new Intent(this, AddExamActivity.class)));  
  129.   
  130.         tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(  
  131.                 new Intent(this, MyExamActivity.class)));  
  132.           
  133.         tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(  
  134.                 new Intent(this, MessageActivity.class)));  
  135.           
  136.         tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(  
  137.                 new Intent(this, SettingActivity.class)));  
  138.   
  139.     }  
  140.   
  141. }  
        setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的，用来替换android:drawableTop这个属性的背景图，至于为什么那么麻烦每次都要设置背景图片颜色，是因为没用用RadioGroup包含RadioButton，所以RadioButton就不能做到单个切换。
      

 

 

分享到：
| java5线程并发库的应用
评论
3 楼 Judy123456 2012-07-23  
希望可以提供源代码噢，我最近正好在学这个底部菜单，非常希望楼主可以为我提供源代码，谢谢啦！希望能有完整的代码还有图片，非常感谢，我的邮箱的907365056@qq.com
2 楼 sogura 2012-07-06  
LZ 可否提供源码学习啊？
1 楼 xmllong 2012-05-21  
非常不错，能把你用到的图片资源发上来吗？非常想学习
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics