Android开发教程:底部Tab的两种实现方式

来源:互联网 发布:c#积分商城源码 编辑:程序博客网 时间:2024/05/09 04:15

第一种:
 
下面的tabs.xml布局文件中,整个布局是垂直显示的,分为FrameLayout和TabWidget上下两部分,在FrameLayout 布局里面使用layout_weight=“1” ,而TabWidget没有设置这个属性,那就默认为0。那么在这布局中,FrameLayout 就按比例分得整个屏幕的3/4,而没有设置layout_weight属性的TabWidget只是占用刚好能显示自己空间大小的位置。这样的话,就能达到就Tab置于底部了。
 
layout_weight具体可以看看http://liangruijun.blog.51cto.com/3061169/632532里面的FrameLayout 布局
 
tabs.xml
1.<?xml version="1.0" encoding="utf-8"?> 2.<TabHost xmlns:Android="http://schemas.android.com/apk/res/android"     3.   android:id="@android:id/tabhost"   4.   android:layout_width="fill_parent"     5.   android:layout_height="fill_parent" 6.   >     7.   <LinearLayout   8.      android:orientation="vertical"     9.      android:layout_width="fill_parent"   10.      android:layout_height="fill_parent" 11.      >     12.      <FrameLayout   13.          android:id="@android:id/tabcontent"     14.          android:layout_width="fill_parent"      15.          android:layout_height="match_parent"     16.          android:layout_weight="1"   17.          >    18.          <TextView   19.              android:id="@+id/view1" 20.              android:layout_width="wrap_content" 21.              android:layout_height="wrap_content" 22.              android:text="nihao" 23.              /> 24.          <TextView   25.              android:id="@+id/view2" 26.              android:layout_width="wrap_content" 27.              android:layout_height="wrap_content" 28.              android:text="nihenhao" 29.              /> 30.      </FrameLayout>     31.      <TabWidget   32.          android:id="@android:id/tabs"     33.          android:layout_width="fill_parent"      34.          android:layout_height="wrap_content"   35.          />     36.    </LinearLayout>     37.</TabHost>  
main.xml
1.<?xml version="1.0" encoding="utf-8"?> 2.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3.    android:orientation="vertical" 4.    android:layout_width="fill_parent" 5.    android:layout_height="fill_parent" 6.    > 7.<TextView    8.    android:layout_width="fill_parent"   9.    android:layout_height="wrap_content"   10.    android:text="@string/hello" 11.    /> 12.</LinearLayout> 
TestHostActivity.java
1.package com.lingdududu.test;  2. 3.import android.app.TabActivity;  4.import android.os.Bundle;  5.import android.widget.TabHost;  6. 7.public class TestHostActivity extends TabActivity {  8.    /** Called when the activity is first created. */ 9.    @Override 10.    public void onCreate(Bundle savedInstanceState) {  11.        super.onCreate(savedInstanceState);  12.        setContentView(R.layout.tabs);  13.        TabHost tabhost =  getTabHost();    14.        tabhost.addTab(tabhost.newTabSpec("111").setIndicator("view1").setContent(R.id.view1));    15.        tabhost.addTab(tabhost.newTabSpec("222").setIndicator("view2").setContent(R.id.view2));    16.    }  17.} 
效果:
 


本篇文章来源于 Linux公社网站(www.linuxidc.com)  原文链接:http://www.linuxidc.com/Linux/2012-01/52654.htm

第二种:
 
在LinerLayout布局里面嵌套FrameLayout和RelativeLayout布局,将TabWidget放置在RelativeLayout里面,之后设置RelativeLayout的Android:layout_alignParentBottom="true" 属性,这个属性的功能是将TabWidget置于父元素(也就是LinerLayout)的底部。这样就能将Tab置于底部了。
1.<?xml version="1.0" encoding="utf-8"?> 2.<LinearLayout 3.    xmlns:android="http://schemas.android.com/apk/res/android" 4.    android:orientation="vertical" 5.    android:layout_width="fill_parent" 6.    android:layout_height="fill_parent"> 7.    <TabHost 8.        android:id="@+id/tabhost" 9.        android:layout_width="fill_parent" 10.        android:layout_height="fill_parent"> 11.        <FrameLayout 12.            android:id="@android:id/tabcontent" 13.            android:layout_width="fill_parent" 14.            android:layout_height="fill_parent" 15.            android:paddingBottom="62px" 16.            > 17.            <TextView 18.                android:id="@+id/tab1" 19.                android:layout_width="fill_parent" 20.                android:layout_height="fill_parent" 21.                android:text="这是TabOne" 22.                /> 23.            <TextView 24.                android:id="@+id/tab2" 25.                android:layout_width="fill_parent" 26.                android:layout_height="fill_parent" 27.                android:text="这是TabTwo"/> 28.        </FrameLayout> 29.        <RelativeLayout 30.            android:layout_width="fill_parent" 31.            android:layout_height="fill_parent" 32.            > 33.            <TabWidget 34.                android:id="@android:id/tabs" 35.                android:layout_alignParentBottom="true" 36.                android:layout_width="fill_parent" 37.                android:layout_height="65.0px"   38.                android:background="@drawable/tab_bg"             39.                /> 40.        </RelativeLayout> 41.    </TabHost> 42.</LinearLayout> 
main.xml
1.<?xml version="1.0" encoding="utf-8"?> 2.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3.    android:orientation="vertical" 4.    android:layout_width="fill_parent" 5.    android:layout_height="fill_parent" 6.    > 7.<TextView    8.    android:layout_width="fill_parent"   9.    android:layout_height="wrap_content"   10.    android:text="@string/hello" 11.    /> 12.</LinearLayout> 
TabHostActivity.java
1.package com.lingdududu.test;  2. 3.import android.app.Activity;  4.import android.os.Bundle;  5.import android.widget.TabHost;  6. 7.public class TabHostActivity extends Activity {  8.    public void onCreate(Bundle savedInstanceState) {  9.        super.onCreate(savedInstanceState);  10.        setContentView(R.layout.tabs);  11.        TabHost tabs=(TabHost)findViewById(R.id.tabhost);  12.          13.        tabs.setup();  14.          15.        TabHost.TabSpec spec=tabs.newTabSpec("tag1");  16.        spec.setContent(R.id.tab1);  17.        spec.setIndicator("TabOne");  18.        tabs.addTab(spec);  19.          20.        spec=tabs.newTabSpec("tag2");  21.        spec.setContent(R.id.tab2);  22.        spec.setIndicator("TabTwo");  23.        tabs.addTab(spec);  24.          25.        tabs.setCurrentTab(0);  26.    }  27.}  28. 
效果图:
 


本篇文章来源于 Linux公社网站(www.linuxidc.com)  原文链接:http://www.linuxidc.com/Linux/2012-01/52654p2.htm

 

原创粉丝点击