速读原著-Android应用开发入门教程(几种独立使用的视图组)

2020-02-13 17:03:19 浏览数 (1)

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 中的内容。

代码语言:javascript复制
<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()函数:

代码语言:javascript复制
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()函数来完成的:

代码语言:javascript复制
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 类。

0 人点赞