锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识Android学习底部导航栏

会挽雕弓如满月，西北望，射天狼。这篇文章主要讲述Android学习笔记---使用TabHost实现微信底部导航栏效果相关的知识，希望能为你提供帮助。
一. TabHost介绍 
TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;
【Android学习笔记---使用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" 3android:layout_width="fill_parent" 4android:layout_height="fill_parent" 5android:background="#FFFFFF" 6android:orientation="vertical" > 7 8< TabHost 9android:id="@android:id/tabhost" 10android:layout_width="fill_parent" 11android:layout_height="fill_parent" > 12 13< LinearLayout 14android:layout_width="fill_parent" 15android:layout_height="fill_parent" 16android:orientation="vertical" > 17 18< FrameLayout 19android:id="@android:id/tabcontent" 20android:layout_width="fill_parent" 21android:layout_height="0.0dip" 22android:layout_weight="1.0" /> 23 24< TabWidget 25android:id="@android:id/tabs" 26android:layout_width="fill_parent" 27android:layout_height="wrap_content" 28android:layout_weight="0.0" 29android:visibility="gone" /> 30 31< FrameLayout 32android:layout_width="fill_parent" 33android:layout_height="wrap_content" > 34 35< RadioGroup 36android:id="@+id/main_tab_group" 37android:layout_width="fill_parent" 38android:layout_height="wrap_content" 39android:layout_gravity="bottom" 40android:gravity="bottom" 41android:orientation="horizontal" > 42 43< RadioButton 44android:id="@+id/guide_home" 45style="@style/main_tab_bottom" 46android:checked="true" 47android:drawableTop="@drawable/guide_home" 48android:text="首页" /> 49 50< RadioButton 51android:id="@+id/guide_store" 52style="@style/main_tab_bottom" 53android:drawableTop="@drawable/guide_group" 54android:text="商城" /> 55 56< RadioButton 57android:id="@+id/guide_cart" 58style="@style/main_tab_bottom" 59 60android:drawableTop="@drawable/guide_cart" 61android:text="购物车" /> 62 63< RadioButton 64android:id="@+id/guide_ww" 65style="@style/main_tab_bottom" 66android:drawableTop="@drawable/guide_setting" 67android: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 { 11private RadioButton guide_home, guide_store, guide_cart,guide_ww; 12private Intent intent1; 13private Intent intent2; 14private Intent intent3; 15private Intent intent4; 16private String tab="tab0"; 17private int currIndex = 0; 18private TabHost tabHost; 19@Override 20protected void onCreate(Bundle savedInstanceState) { 21super.onCreate(savedInstanceState); 22setContentView(R.layout.activity_main); 23//初始化四个Activity 24intent1 = new Intent(this, Main2Activity.class); 25intent2 = new Intent(this, Main3Activity.class); 26intent3 = new Intent(this, Main4Activity.class); 27intent4 = new Intent(this, Main5Activity.class); 28init(); 29inittAB(); 30} 31 32/** 33* 初始化组件 34*/ 35private void init() { 36guide_home = (RadioButton) findViewById(R.id.guide_home); 37guide_cart = (RadioButton) findViewById(R.id.guide_cart); 38guide_ww = (RadioButton) findViewById(R.id.guide_ww); 39guide_store=(RadioButton) findViewById(R.id.guide_store); 40//设置点击事件 41guide_home.setOnClickListener(new MyOnPageChangeListener()); 42guide_store.setOnClickListener(new MyOnPageChangeListener()); 43guide_cart.setOnClickListener(new MyOnPageChangeListener()); 44guide_ww.setOnClickListener(new MyOnPageChangeListener()); 45} 46 47//填充TabHost 48private void inittAB() { 49tabHost = getTabHost(); 50//这里tab0是第一个，tab1是第二个窗口，以此类推 51tabHost.addTab(tabHost.newTabSpec("tab0") 52.setIndicator("tab0") 53.setContent(intent1)); 54tabHost.addTab(tabHost.newTabSpec("tab1") 55.setIndicator("tab1") 56.setContent(intent2)); 57tabHost.addTab(tabHost.newTabSpec("tab3") 58.setIndicator("tab3") 59.setContent(intent4)); 60tabHost.addTab(tabHost.newTabSpec("tab2") 61.setIndicator("tab2") 62.setContent(intent3)); 63if(tab.equalsIgnoreCase("tab0")){ 64tabHost.setCurrentTabByTag("tab0"); 65} 66} 67 68/** 69* 点击事件类 70*/ 71private class MyOnPageChangeListener implements View.OnClickListener { 72 73@Override 74public void onClick(View v) { 75switch (v.getId()) { 76case R.id.guide_home: 77currIndex = 0; 78//切换第一个窗口 79tabHost.setCurrentTabByTag("tab0"); 80break; 81case R.id.guide_cart: 82currIndex = 3; 83//切换第二个窗口 84tabHost.setCurrentTabByTag("tab2"); 85break; 86case R.id.guide_store: 87currIndex = 4; 88//切换第三个窗口 89tabHost.setCurrentTabByTag("tab1"); 90break; 91case R.id.guide_ww: 92currIndex = 5; 93//切换第四个窗口 94tabHost.setCurrentTabByTag("tab3"); 95break; 96} 97} 98} 99 }

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

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

文章图片

 

    推荐阅读


    上一篇：关于android编程中service和activity的区别

    下一篇：Android实战——GreenDao3.2的使用，爱不释手