Android 仿微信底部菜單

時間  2019-11-17
標籤 android 微信 底部 菜單 欄目 Android 简体版
原文   原文鏈接

今天終於把公司的界面原型作完了，哈哈，提早完成正好趁如今有時間更新下最近學到的一些特殊效果。其中這個仿微信的底部菜單，真的要感謝家輝兄弟，我才得以解決。首先看一下實現後效果。 html

    

    就下面的那個底部欄，下面看一下實現代碼吧！ android

    首先是佈局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">  
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切換代碼： app

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就不能作到單個切換。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程