首页 > 代码库 > Android学习笔记---使用TabHost实现微信底部导航栏效果

Android学习笔记---使用TabHost实现微信底部导航栏效果

2024-09-02 09:06:47   220人阅读

一. TabHost介绍

 

TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;

 

1. TabHost常用组件

 

TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

-- 添加选项卡 : addTab(tabSpec);

 

2. TabHost使用步骤

 

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

 

3. 将按钮放到下面

 

布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;

设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;

设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;

 

下面上代码先是main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:background="#FFFFFF"
 6     android:orientation="vertical" >
 7 
 8     <TabHost
 9         android:id="@android:id/tabhost"
10         android:layout_width="fill_parent"
11         android:layout_height="fill_parent" >
12 
13         <LinearLayout
14             android:layout_width="fill_parent"
15             android:layout_height="fill_parent"
16             android:orientation="vertical" >
17 
18             <FrameLayout
19                 android:id="@android:id/tabcontent"
20                 android:layout_width="fill_parent"
21                 android:layout_height="0.0dip"
22                 android:layout_weight="1.0" />
23 
24             <TabWidget
25                 android:id="@android:id/tabs"
26                 android:layout_width="fill_parent"
27                 android:layout_height="wrap_content"
28                 android:layout_weight="0.0"
29                 android:visibility="gone" />
30 
31             <FrameLayout
32                 android:layout_width="fill_parent"
33                 android:layout_height="wrap_content" >
34 
35                 <RadioGroup
36                     android:id="@+id/main_tab_group"
37                     android:layout_width="fill_parent"
38                     android:layout_height="wrap_content"
39                     android:layout_gravity="bottom"
40                     android:gravity="bottom"
41                     android:orientation="horizontal" >
42 
43                     <RadioButton
44                         android:id="@+id/guide_home"
45                         style="@style/main_tab_bottom"
46                         android:checked="true"
47                         android:drawableTop="@drawable/guide_home"
48                         android:text="首页" />
49 
50                     <RadioButton
51                         android:id="@+id/guide_store"
52                         style="@style/main_tab_bottom"
53                         android:drawableTop="@drawable/guide_group"
54                         android:text="商城" />
55 
56                     <RadioButton
57                         android:id="@+id/guide_cart"
58                         style="@style/main_tab_bottom"
59 
60                         android:drawableTop="@drawable/guide_cart"
61                         android:text="购物车" />
62 
63                     <RadioButton
64                         android:id="@+id/guide_ww"
65                         style="@style/main_tab_bottom"
66                         android:drawableTop="@drawable/guide_setting"
67                         android:text="我的" />
68                 </RadioGroup>
69             </FrameLayout>
70         </LinearLayout>
71     </TabHost>
72 
73 </LinearLayout>

 

Activity.main.java  代码

 1 package com.example.myapplication;
 2 
 3 import android.app.TabActivity;
 4 import android.content.Intent;
 5 import android.os.Bundle;
 6 import android.view.View;
 7 import android.widget.RadioButton;
 8 import android.widget.TabHost;
 9 
10 public class MainActivity extends TabActivity {
11     private RadioButton guide_home, guide_store, guide_cart,guide_ww;
12     private Intent intent1;
13     private Intent intent2;
14     private Intent intent3;
15     private Intent intent4;
16     private String tab="tab0";
17     private int currIndex = 0;
18     private TabHost tabHost;
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_main);
23         //初始化四个Activity
24         intent1 = new Intent(this, Main2Activity.class);
25         intent2 = new Intent(this, Main3Activity.class);
26         intent3 = new Intent(this, Main4Activity.class);
27         intent4 = new Intent(this, Main5Activity.class);
28         init();
29         inittAB();
30     }
31 
32     /**
33      * 初始化组件
34      */
35     private void init() {
36             guide_home = (RadioButton) findViewById(R.id.guide_home);
37             guide_cart = (RadioButton) findViewById(R.id.guide_cart);
38             guide_ww = (RadioButton) findViewById(R.id.guide_ww);
39             guide_store=(RadioButton) findViewById(R.id.guide_store);
40             //设置点击事件
41             guide_home.setOnClickListener(new MyOnPageChangeListener());
42             guide_store.setOnClickListener(new MyOnPageChangeListener());
43             guide_cart.setOnClickListener(new MyOnPageChangeListener());
44             guide_ww.setOnClickListener(new MyOnPageChangeListener());
45     }
46 
47     //填充TabHost
48     private void inittAB() {
49         tabHost = getTabHost();
50         //这里tab0是第一个，tab1是第二个窗口，以此类推
51         tabHost.addTab(tabHost.newTabSpec("tab0")
52                 .setIndicator("tab0")
53                 .setContent(intent1));
54         tabHost.addTab(tabHost.newTabSpec("tab1")
55                 .setIndicator("tab1")
56                 .setContent(intent2));
57         tabHost.addTab(tabHost.newTabSpec("tab3")
58                 .setIndicator("tab3")
59                 .setContent(intent4));
60         tabHost.addTab(tabHost.newTabSpec("tab2")
61                 .setIndicator("tab2")
62                 .setContent(intent3));
63         if(tab.equalsIgnoreCase("tab0")){
64             tabHost.setCurrentTabByTag("tab0");
65         }
66     }
67 
68     /**
69      * 点击事件类
70      */
71     private class MyOnPageChangeListener implements View.OnClickListener {
72 
73         @Override
74         public void onClick(View v) {
75             switch (v.getId()) {
76                 case R.id.guide_home:
77                     currIndex = 0;
78                     //切换第一个窗口
79                     tabHost.setCurrentTabByTag("tab0");
80                     break;
81                 case R.id.guide_cart:
82                     currIndex = 3;
83                     //切换第二个窗口
84                     tabHost.setCurrentTabByTag("tab2");
85                     break;
86                 case R.id.guide_store:
87                     currIndex = 4;
88                     //切换第三个窗口
89                     tabHost.setCurrentTabByTag("tab1");
90                     break;
91                 case R.id.guide_ww:
92                     currIndex = 5;
93                     //切换第四个窗口
94                     tabHost.setCurrentTabByTag("tab3");
95                     break;
96             }
97         }
98     }
99 }

下面是效果图

技术分享技术分享

 

Android学习笔记---使用TabHost实现微信底部导航栏效果


联系
我们