博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
Android 仿微信底部菜单
阅读量：7108 次
发布时间：2019-06-28

本文共 12217 字，大约阅读时间需要 40 分钟。

hot3.png

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

    

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

    首先是布局main.xml:

01 <?xmlversion="1.0"encoding="UTF-8"?>  
02 <TabHostandroid:id=" :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=" :id/tabcontent"android:layout_width="fill_parent"android:layout_height="0.0dip"android:layout_weight="1.0"/>  
06         <TabWidgetandroid:id=" :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">  
11                     <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>
      其实就是用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就不能做到单个切换。

转载于:https://my.oschina.net/u/870990/blog/142754

你可能感兴趣的文章
Android UI系列-----长度单位和内外边距
查看>>
比Redis更快：Berkeley DB面面观
查看>>
8. 利用反射机制， ListArray，intent来实现多Activity的切换
查看>>
Tomcat 改服务器编码(Java 修改字符串编码格式)
查看>>
bottle-session 0.2 : Python Package Index
查看>>
Android 对话框用法
查看>>
hdu1856
查看>>
Dominoserver 安装
查看>>
手工添加Linux防火墙端口
查看>>
简单模拟Spring的注入
查看>>
【crunch bang】安装firefox，删除iceweasel
查看>>
R programming, In ks.test(x, y) : p-value will be approximate in the presence of ties
查看>>
黄牛是怎样抢票的？——从业务分析师角度看买票难问题
查看>>
平时开发搜集的一些网址
查看>>
电脑拍照
查看>>
Vehicle’s communication protocol
查看>>
WPF控件模板和数据模板
查看>>
C# Lambda表达式
查看>>
[ZZ]计算机视觉、机器学习相关领域论文和源代码大集合
查看>>
如果不用jQuery,Ajax你还能写出多少?
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-09 02:21:04   当前IP: 3.144.76.238   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我