Android仿微信底部菜单

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

     

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

    首先是布局main.xml:

[html]  view plain copy
  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 plain copy
  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就不能做到单个切换。
      

猜你喜欢

转载自lishuaishuai.iteye.com/blog/1767061
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022