第五章 基于视图的用户界面设计

使用基础试图

一．      TextCiew视图——最基础的视图

当创建一个新Android项目时，Android Studio总是会创建activity_main.xml文件，其中包含一个<TextView>元素

使用TextView视图为用户显示文本

若需要用户编辑显示的文本，则可以使用TextView的子类EditText

二．     

（1）             Button——表示一个按钮部件

（2）             ImageButton——和Button视图相似，除了他可以显示图片

（3）             EditText——TextView视图的子类，允许用户编辑他的文本内容

（4）             CheckBox——一种具有两种状态的特殊按钮，选中 非选中

（5）             RadioGroup和RadioButton——RadioButton有两种状态：选中或非选中。RadioGroup用来组织一个或多个RadioButton视图，且在RadioGroup中只允许一个RadioButton被选中

（6）             ToggleButton——一种用来显示选中或非选中状态的轻量级指示器

三．      使用基础视图

<?xml
version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="fill_parent"
   
android:layout_height="fill_parent"
    android:orientation="vertical"
>
    <Button
android:id="@+id/btnSave"
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content"
        android:text="save" />
    <Button
android:id="@+id/btnOpen"
        android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
        android:text="Open" />
    <ImageButton
android:id="@+id/btnImg1"
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
/>
    <EditText
android:id="@+id/txtName"
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content" />
    <CheckBox
android:id="@+id/chkAutosave"
       
android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Autosave" />
    <CheckBox
android:id="@+id/star"
       
style="?android:attr/starStyle"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content" />
    <RadioGroup android:id="@+id/rdbGp1"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:orientation="horizontal" >
        <RadioButton
android:id="@+id/rdb1"
           
android:layout_width="fill_parent"
           
android:layout_height="wrap_content"
            android:text="Option 1"
/>
        <RadioButton
android:id="@+id/rdb2"
           
android:layout_width="fill_parent"
           
android:layout_height="wrap_content"
            android:text="Option 2"
/>
    </RadioGroup>
    <ToggleButton
android:id="@+id/toggle1"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content" />
</LinearLayout>

四．      ProgressBar视图

该视图为一些正在进行中的任务提供视觉反馈，如 在后台运行一个任务。例如：当从网络中下载数据时，需要告知用户当前的下载状态，在这种情况下，ProgressBar视图是一个很好的选择

使用该视图：

<?xml
version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="fill_parent"
   
android:layout_height="fill_parent"
    android:orientation="vertical"
>
    <ProgressBar
android:id="@+id/progressbar"
       
android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       
style="@android:style/Widget.ProgressBar.Horizontal" />
</LinearLayout>

五．      AutoCompleteTextView视图

该视图类似于EditText（实际上它就是EditText的子类）除了它能在用户输入文本时自动显示一个提示列表

使用AutoCompleteTextView视图：

<?xml
version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
   
android:layout_height="fill_parent"
    android:orientation="vertical"
>
    <TextView
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content"
        android:text="Name of
President" />
    <AutoCompleteTextView
android:id="@+id/txtCountries"
       
android:layout_width="fill_parent"
       
android:layout_height="wrap_content" />
</LinearLayout>

使用选择器视图

六．      TimePicker视图

该视图允许24小时模式或者AM/PM模式选择时间

使用该视图：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="fill_parent"
   
android:layout_height="fill_parent"
    android:orientation="vertical"
>
    <Button
android:id="@+id/btnSet"
       
android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am all set!"
        android:onClick="onClick"
/>
    <TimePicker
android:id="@+id/timePicker"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content" />
</LinearLayout>

package com.cwx.basicviews4;
import
android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import
android.widget.TimePicker;
import
android.widget.Toast;
public class MainActivity
extends AppCompatActivity {
    TimePicker timePicker;
    /** Called when the activity is first
created. */
    @Override
    public void onCreate(Bundle
savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timePicker = (TimePicker)
findViewById(R.id.timePicker);
        timePicker.setIs24HourView(true);
    }
    public void onClick(View view) {
        Toast.makeText(getBaseContext(),
                "Time selected:" +
                        timePicker.getHour() +
                        ":" +
timePicker.getMinute(),
                Toast.LENGTH_SHORT).show();
    }
}

*注意：getHour()以24小时格式返回小时数值

package com.cwx.basicviews4;
import
android.app.DialogFragment;
import android.os.Bundle;