Input Controls(输入控件)

2016-11-28  本文已影响41人  王世军Steven

一 Buttons(按钮)

按钮由一个图标或者一组文字(或者两者都有)组成, 它用来展现当用户点击按钮时所触发的事件.

button-types.png

你可以根据自己的需求通过以下3种方式创建一个布局文件.

1. 文字

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />

2. 图标

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    ... />

3. 图标和文字

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:drawableLeft="@drawable/button_icon"
    ... />

Responding to Click Events

当用户点击按钮时, Button对象就会收到一个 on-click 事件.设置点击事件有如下两种方式.

1. Using Attribute "onClick"

在<Button>标签的中添加 "android : onClick"属性来为按钮添加点击事件处理程序.
该属性的值必须是响应按钮点击事件的方法名.
关联这个布局文件的Activity必须实现该响应事件方法.

设置点击事件处理程序 :

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

在Activity中实现点击事件处理方法 :

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

注意 : 点击事件处理方法必须满足以下条件 :

  1. Be public
  2. Return void
  3. Define a View as its only parameter(this vill be the View that was clicked).
2. Using an OnClickListener

你可以在程序中创建按钮点击事件处理程序,而不是通过在 XML 中添加属性的方式. 在以下
两种情况下这是最好的选择

1. 在运行时实例化一个Button对象.
2. 在 Fragment 的子类中声明按钮的点击行为.

在程序中创建一个View.OnClickListener 对象,然后通过
setOnClickListener(View.OnClickListener)方法传递给Button对象.

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

Styling Your Button (设计Button样式)

同一个Button在不同设备上所展现的样式(背景图片和字体)可能是不一样的,原因就在于不同的
生产商设置的输入控件默认样式是不一样的.

你可以通过使用主题(theme)来准确设置整个应用程序中的控件样式.通过指定
"android:background"属性值(一个color或者drawable资源)可以实现自定义样式按钮
也可以使用样式文件(style.xml)来设置Button背景.

Borderless button (无边按钮)

指定 "android:borderlessButtonStyle" 属性.

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

Custom background (自定义背景)

你可以通过指定一个自定义的背景来重新设计Button的样式.不再使用一个简单的Bitmap图片
或者颜色, 而使用一个state list 资源文件,它可以根据不懂的状态设置不同的Button样式.

你可以在一个state list XML文件中定义三种不同的图片或者颜色分别对应Button的不同状态
.
创建一个 state list drawable 资源文件

  1. 定义三张Bitmap图片作为Button背景,它们分别代表着Button的 default、pressed 和 focused 三种状态.
  2. 将Bitmap图片放到当前项目的 : "res/drawable/" 路径下.
  3. 在 "res/drawable/" 路径下创建XML文件.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/button_default" />
</selector>

注意点 :

<item> 标签的顺序非常重要.当drawable资源被引用的时候.会遍历<item>标签来确定最
适合当前状态的<item>. 由于default Bitmap 是最后一个<item>因此只有当 pressed 和
focused 都为 false 时才会使用default <item>.
  1. 引用drawable资源文件.
<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    android:background="@drawable/button_custom"  />

二 Text Fields

三 CheckBoxes

CheckBox 允许用户从一个集合中选择一个或者多个选项. 通常情况下, 你应该以竖直列表的
形式展现待选集合.

checkboxes.png

Responding to Click Events

<?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">
    <CheckBox android:id="@+id/checkbox_meat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/meat"
        android:onClick="onCheckboxClicked"/>
    <CheckBox android:id="@+id/checkbox_cheese"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cheese"
        android:onClick="onCheckboxClicked"/>
</LinearLayout>
public void onCheckboxClicked(View view) {
    // Is the view now checked?
    boolean checked = ((CheckBox) view).isChecked();
    
    // Check which checkbox was clicked
    switch(view.getId()) {
        case R.id.checkbox_meat:
            if (checked)
                // Put some meat on the sandwich
            else
                // Remove the meat
            break;
        case R.id.checkbox_cheese:
            if (checked)
                // Cheese me
            else
                // I'm lactose intolerant
            break;
        // TODO: Veggie sandwich
    }
}

技巧 : 使用setChecked(boolean) or toggle()来设置状态.

未完待续...

上一篇 下一篇

猜你喜欢

热点阅读