8.2 几种独立使用的视图组
8.2.1.网页视图
网页视图(WebView)是一个功能强大且常用的控件,它具有许多很好的特性,例如对 js 的支持,可用于制作简易浏览器等。
参考示例程序:WebView1(ApiDemo=>Views=>WebView)
源代码:com/example/android/apis/view/WebView1.java
布局文件:webview_1.xml
WebView 程序的运行结果如图所示:
WebView 的类扩展关系如下所示:
代码语言:javascript复制 => android.view.View
=> android.view.ViewGroup
=> android.widget.AbsoluteLayout
=> android.webkit.WebView
WebView 本身扩展了 AbsoluteLayout(绝对布局),因此也是一个 ViewGroup,但是 WebView 不用于包含其他的视图,而是像一个普通的控件一样使用。 布局文件 webview_1.xml 的内容片断如下:
代码语言:javascript复制<WebView android:id="@ id/wv1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<WebView android:id="@ id/wv2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<WebView android:id="@ id/wv3"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
事实上,在本例中是使用了若干个 WebView 标签来实现显示的功能,每一个 WebView 标签显示为屏幕中一行的内容。 Java 源代码中的部分内容如下所示:
代码语言:javascript复制wv = (WebView) findViewById(R.id.wv1);
wv.loadData("<a href='x'>Hello World! - 1</a>", mimeType, encoding);
WebView 的作用是可以在 Android 中支持一个 HTML 格式的元素。由此,虽然 WebView 也是一个视图组,但是从使用上基本等同普通的控件。
8.2.2.旋转按钮
旋转按钮(Spinner)是具有类似菜单的按钮,可以选择其中的一项,一般可以使用单向和双向的箭头进行选择。
参考示例程序:Spinner1(ApiDemo=>Views=>Spinner)
源代码:com/example/android/apis/view/Spinner1.java
布局文件:radio_group_1.xml
Spinner1 程序的运行结果如图所示:
Android 中的旋转按钮做成了一个下拉菜单的形式,其功能和其他 GUI 系统中的旋转按钮类似。本例中直接使用 Spinner 类构造了两个可以具有若干个选项的旋转按钮,Spinner 类的扩展关系如下所示:
代码语言:javascript复制=> aandroid.view.View
=> aandroid.view.ViewGroup
=> aandroid.widget.AdapterView<T extends android.widget.Adapter>
=> aandroid.widget.AbsSpinner
=> aandroid.widget.Spinner
AdapterView<> 是一个视图的模板,它本身扩展了 ViewGroup ,具体的内容由其中定义的android.widget.Adapter 类来确定。AbsSpinner 扩展了AdapterView<>,Spinner 又扩展了 AbsSpinner。
在本例的 Java 源代码中,内容如下所示:
代码语言:javascript复制 @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.spinner_1);
Spinner s1 = (Spinner) findViewById(R.id.spinner1);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
this, R.array.colors, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
s1.setAdapter(adapter);
Spinner s2 = (Spinner) findViewById(R.id.spinner2);
adapter = ArrayAdapter.createFromResource(this, R.array.planets,
android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
s2.setAdapter(adapter);
}
setAdapter()
是 AdapterView<>中的函数,通过建立一个 ArrayAdapter< CharSequence >
将所需要的内容设置到其中。res/values/array.xml
中定义的字符串数组(string-array)colors
表示 Spinner 中的内容。
<string-array name="colors">
<item>red</item>
<item>orange</item>
<item>yellow</item>
<item>green</item>
<item>blue</item>
<item>violet</item>
</string-array>
simple_spinner_item 和 simple_spinner_dropdown_item 是 Android 中默认的样式,Android 中的 Spinner 在调用的时候,会显示为一弹出的窗口,其中包含了各个选项。
8.2.3.文本切换器
文本切换器(TextSwitcher)是 Android 中一个集成化较高的控件,可以在多个文本之间切换,还可以设置动画的效果。
参考示例程序:TextSwitcher1(ApiDemo=>Views=>TextSwitcher)
源代码:com/example/android/apis/view/TextSwitcher1.java
布局文件:text_switcher_1.xml
TextSwitcher1 程序的运行结果如图所示:
这个示例的布局文件 text_switcher_1.xml 如下所示:
代码语言:javascript复制<Button android:id="@ id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_switcher_1_next_text" />
<TextSwitcher android:id="@ id/switcher"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
图的中间部分表示了一个文字切换器,使用 TextSwitcher 来实现。具体显示的内容由当前的 Activity 实现ViewSwitcher.ViewFactory 接口来完成,实现其中的 makeView()
方法,返回一个 TextView 类型。
TextSwitcher 类的扩展关系如下所示:
代码语言:javascript复制=> android.view.View
=> android.view.ViewGroup
=> android.widget.FrameLayout
=> android.widget.ViewAnimator
=> android.widget.ViewSwitcher
=> android.widget.TextSwitcher
本示例中为 TextSwitcher 类设置了动画:
代码语言:javascript复制 public class TextSwitcher1 extends Activity implements ViewSwitcher.ViewFactory,
View.OnClickListener {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.text_switcher_1);
mSwitcher = (TextSwitcher) findViewById(R.id.switcher);
mSwitcher.setFactory(this);
Animation in = AnimationUtils.loadAnimation(this,
android.R.anim.fade_in);
Animation out = AnimationUtils.loadAnimation(this,
android.R.anim.fade_out);
mSwitcher.setInAnimation(in);
mSwitcher.setOutAnimation(out);
// ......
updateCounter();
}
}
这里是 mSwitcher.setFactory(this)
设置了所使用的 ViewSwitcher.ViewFactory
接口,这个接口由当前的TextSwitcher1 活动来继承实现,主要实现其中的 makeView()
函数:
public View makeView() {
TextView t = new TextView(this);
t.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
t.setTextSize(36);
return t;
}
makeView()
函数的返回类型是 View,如果在 TextSwitcher1 中使用,要求返回的类型为 TextView。这个示例中主要变化的内容,是通过 TextSwitcher 类的 setText()
函数来完成的:
private void updateCounter() {
mSwitcher.setText(String.valueOf(mCounter));
}
8.2.4.图像切换器
图像切换器(ImageSwitcher)和文本切换器类似,但是显示的内容是多个图片中的一个。
参考示例程序:ImageSwitcher1(ApiDemo=>Views=>ImageSwitcher)
源代码:com/example/android/apis/view/ImageSwitcher1.java
布局文件:image_switcher_1.xml
ImageSwitcher1 程序的运行结果如图 26 所示。
这个示例的布局文件 text_switcher_1.xml 如下所示:
代码语言:javascript复制<ImageSwitcher android:id="@ id/switcher"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<Gallery android:id="@ id/gallery"
android:background="#55000000"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:spacing="16dp"
/>
界面上面部分表示了一个图像切换器,使用 ImageSwitcher 来实现。 ImageSwitcher 类的扩展关系如下所示:
代码语言:javascript复制=> android.view.View
=> android.view.ViewGroup
=> android.widget.FrameLayout
=> android.widget.ViewAnimator
=> android.widget.ViewSwitcher
=> android.widget.ImageSwitcher
ImageSwitcher 具体显示的内容也是由当前的 Activity 实现 ViewSwitcher. ViewFactory 接口来完成的,实现其中的makeView()方法,返回一个 ImageView 类型。
代码语言:javascript复制 public class ImageSwitcher1 extends Activity implements
AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.image_switcher_1);
mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
mSwitcher.setFactory(this);
mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
// ......
}
public View makeView() {
ImageView i = new ImageView(this);
i.setBackgroundColor(0xFF000000);
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
i.setLayoutParams(new mageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
return i;
}
}
这个示例的下面部分是一个 Gallery(android.widget.Gallery,Android 中另外一个控件,扩展 AbsSpinner 实现,与Spinner 为兄弟关系)。为了实现这个类中的内容,本例中还实现了一个 ImageAdapter 类。