第五章 用户界面基础(ListView和TabHost)

参考资料:
《Android应用程序开发》ISBN 9787302283164
参考软件:
Android Studio、Eclipse+ADT、Android SDK、JDK
ListView
1、参考网站
http://www.xuanyusong.com/archives/91
http://www.xuanyusong.com/archives/1252
2、要点
ListView是一种用于垂直显示的列表控件,如果显示内容过多,则会出现垂直滚动条
ListView能够通过适配器将数据和自身绑定,在有限的屏幕上提供大量内容供用户选择,所以是经常使用的用户界面控件
ListView支持点击事件处理,用户可以用少量的代码实现复杂的选择功能
3、示例代码

TabHost
1、参考网站
http://blog.csdn.net/jy_sharer/article/details/11581535
http://www.oschina.net/question/163910_28458
2、要点
Tab标签页是界面设计时经常使用的界面控件,可以实现多个分页之间的快速切换,每个分页可以显示不同的内容
下图是Android系统内置的Tab标签页,点击“呼出/接听键”后出现,用于电话呼出和查看拨号记录、联系人

(1)建立3个XML文件
Tab1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id = "@+id/layout01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名:" >
</TextView>
<EditTextandroid:id="@+id/entry"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
</EditText>
<Button android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="确认">
</Button>
<Button android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="取消" >
</Button>
</LinearLayout>
Tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayoutandroid:id="@+id/layout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="@+id/label"
android:layout_x="40dip"
android:layout_y="40dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="用户名:">
</TextView>
<EditTextandroid:id="@+id/entry"
android:layout_x="40dip"
android:layout_y="60dip"
android:layout_height="wrap_content"
android:layout_width="150dip">
</EditText>
<Button android:id="@+id/ok"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_x="40dip"
android:layout_y="120dip"
android:text="确认">
</Button>
<Button android:id="@+id/cancel"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_x="120dip"
android:layout_y="120dip"
android:text="取消">
</Button>
</AbsoluteLayout>
Tab3.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/layout03"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="@+id/label"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="用户名:">
</TextView>
<EditText android:id="@+id/entry"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="@id/label">
</EditText>
<Button android:id="@+id/cancel"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:layout_below="@id/entry"
android:text="取消" >
</Button>
<Button android:id="@+id/ok"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="@id/cancel"
android:layout_alignTop="@id/cancel"
android:text="确认">
</Button>
</RelativeLayout>
(2)代码实现
package edu.hrbeu.TabDemo;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.view.LayoutInflater;
@SuppressWarnings("deprecation")
public class TabDemoActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TabHost tabHost = getTabHost();
LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView(),true);
LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView(),true);
LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView(),true);
tabHost.addTab(tabHost.newTabSpec("TAB1").
setIndicator("线性布局").setContent(R.id.layout01));
tabHost.addTab(tabHost.newTabSpec("TAB2").
setIndicator("绝对布局").setContent(R.id.layout02));
tabHost.addTab(tabHost.newTabSpec("TAB3").
setIndicator("相对布局").setContent(R.id.layout03));
}
}