8. android Tab 选项卡控件

目录结构

 

第一步

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MyTabActivity!</string> <string name="app_name">选项卡Demo</string> <string name="andy">Andy Rubin--Android的创造者</string> <string name="bill">Bill Joy--Java的创造者</string> <string name="torvalds">Linus Torvalds --Linux之父</string> </resources>

 

第二步

res/layout/tab_layout.xml

<?xml version="1.0" encoding="utf-8"?> <!-- FrameLayout:一个FrameLayout对象好比一块在屏幕上提前预定好的空白区域， 然后可以填充一些元素到里边，比方说一张图片等。 需要注意的是所有元素都被放置在FrameLayout区域的左上的区域， 而且无法为这些元素指定一个确切的位置。如果有多个元素，则后边的会重叠在前一个元素上。 android:gravity用于设置View组件的对齐方式 (另外，android:layout_gravity用于设置Container组件的对齐方式） center_horizontal 不改变控件大小，对其到容器横向中间位置(也就是在竖直方向的中间） android:scaleType="fitXY" 把图片不按比例来扩大或者缩小显示 --> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/linearLayout1" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" android:orientation="vertical" > <ImageView android:id="@+id/imageView01" android:layout_gravity="center" android:scaleType="fitXY" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/andy"/> <TextView android:id="@+id/testView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20dip" android:text="@string/andy" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout2" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" android:orientation="vertical" > <ImageView android:id="@+id/imageView02" android:layout_gravity="center" android:scaleType="fitXY" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/bill"/> <TextView android:id="@+id/testView02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20dip" android:text="@string/bill" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout3" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" android:orientation="vertical" > <ImageView android:id="@+id/imageView03" android:layout_gravity="center" android:scaleType="fitXY" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/torvalds"/> <TextView android:id="@+id/testView03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20dip" android:text="@string/torvalds" /> </LinearLayout> </FrameLayout>

 

第三步

src/com/myandroid/tab/MyTabActivity.java

package com.myandroid.tab; import android.app.TabActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.widget.TabHost; public class MyTabActivity extends TabActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TabHost tabHost = this.getTabHost(); /* * LayoutInflater的作用类似于 findViewById(), * 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化 * 注：findViewById()只是找控件之类(如Button和EditView) * * LayoutInflater.from(this)获得context实例 * 也就是相当于this.getSystemService(Context.LAYOUT_INFLATER_SERVICE); * LAYOUT_INFLATER_SERVICE 取得xml里定义的view *----------------------------------------------------------------------- * getSystemService: * 根据传入的NAME来取得对应的Object，然后转换成相应的服务对象 * android的后台运行在很多service， * 它们在系统启动时被SystemServer开启，支持系统的正常工作， * 比如MountService监听是否有SD卡安装及移除，ClipboardService提供剪切板功能， * 应用程序可以通过系统提供的Manager接口来访问这些Service提供的数据 *----------------------------------------------------------------------- * * inflate是把xml表述的layout转化为View * tabHost.getTabContentView() 获得Tab标签页的FrameLayout * true表示将inflate绑定到根布局元素上 */ LayoutInflater.from(this) .inflate(R.layout.tab_layout, tabHost.getTabContentView(), true); /* * tabHost.newTabSpec("Tab1") 创建TabHost.TabSpec, * TabSpec即是选项卡的指示符，对于TabSpec可以设置一个标题或者设置一个标题和图标 * setIndicator 是为选项卡指示符指定一个标签和图标 * setContent 为选项卡的内容指定视图的ID */ tabHost.addTab( tabHost.newTabSpec("Tab1") .setIndicator("Tab1", getResources().getDrawable(R.drawable.png1) ).setContent(R.id.linearLayout1) ); tabHost.addTab( tabHost.newTabSpec("Tab2") .setIndicator("Tab2", getResources().getDrawable(R.drawable.png2) ).setContent(R.id.linearLayout2) ); tabHost.addTab( tabHost.newTabSpec("Tab3") .setIndicator("Tab3", getResources().getDrawable(R.drawable.png3) ).setContent(R.id.linearLayout3) ); } }

 

第四步

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myandroid.tab" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".MyTabActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-sdk android:minSdkVersion="8" /> </manifest>

 

效果图：

 

 

 

 源码地址：

http://download.csdn.net/source/3192235