Android界面组件与WebView嵌入的深入解析

### Android 界面组件与 WebView 嵌入的深入解析 #### 1. 动态添加 Tab 页 在 Android 开发中，TabWidget 通常允许在编译时轻松定义标签页，但有时需要在运行时动态添加标签页。例如，在电子邮件客户端中，用户打开的每封邮件可在单独的标签页中显示，方便在不同邮件间切换。此时，直到用户选择打开邮件时，才知道需要多少标签页以及它们的内容。 Android 支持在运行时动态添加标签页，其操作与编译时添加标签页类似，但需使用不同的 `setContent()` 方法，该方法接受一个 `TabHost.TabContentFactory` 实例，这是一个回调函数，通过提供 `createTabContent()` 方法的实现来构建并返回作为标签页内容的视图。 以下是一个示例（Fancy/DynamicTab）： 首先是布局 XML 文件： ```xml <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/buttontab" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="A semi-random button" android:onClick="addTab" /> </FrameLayout> </LinearLayout> </TabHost> ``` Java 代码如下： ```java package com.commonsware.android.dynamictab; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AnalogClock; import android.widget.TabHost; public class DynamicTabDemo extends Activity { private TabHost tabs=null; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); tabs=(TabHost)findViewById(R.id.tabhost); tabs.setup(); TabHost.TabSpec spec=tabs.newTabSpec("buttontab"); spec.setContent(R.id.buttontab); spec.setIndicator("Button"); tabs.addTab(spec); } public void addTab(View v) { TabHost.TabSpec spec=tabs.newTabSpec("tag1"); spec.setContent(new TabHost.TabContentFactory() { public View createTabContent(String tag) { return(new AnalogClock(DynamicTabDemo.this)); } }); spec.setIndicator("Clock"); tabs.addTab(spec); } } ``` 在按钮的 `addTab()` 回调中，创建一个 `TabHost.TabSpec` 对象，并为其提供一个匿名的 `TabHost.TabContentFactory`，该工厂返回一个 `AnalogClock` 作为标签页的视图。构建标签页视图的逻辑可以更复杂，例如使用 `LayoutInflater` 从布局 XML 构建视图。 #### 2. 使用 ViewFlipper 切换视图 有时，你可能希望实现类似标签页的效果（一次只显示部分视图），但不使用实际的标签页 UI。可能是因为标签页占用太多屏幕空间，或者想通过手势或设备晃动来切换视图。 `ViewFlipper` 容器可以实现这种视图切换逻辑，它继承自 `FrameLayout`，与 `TabWidget` 的内部结构类似。初始时，`ViewFlipper` 只显示第一个子视图，可手动通过用户交互或自动通过定时器来切换视图。 ##### 2.1 手动切换视图示例（Fancy/Flipper1） 布局 XML 文件如下： ```xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:id="@+id/flip_me" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Flip Me!" android:onClick="flip" /> <ViewFlipper android:id="@+id/details" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#FF00FF00" android:text="This is the first panel" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#FFFF0000" android:text="This is the second panel" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#FFFFFF00" android:text="This is the third panel" /> </ViewFlipper> </LinearLayout> ``` Java 代码如下： ```java package com.commonsware.android.flipper1; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ViewFlipper; public class FlipperDemo extends Activity { ViewFlipper flipper; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); flipper=(ViewFlipper)findViewById(R.id.details); } public void flip(View ```