Android柳叶刀之Button之UI交互

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.youkuaiyun.com/leverage_1229

柳叶刀

        穆念慈眼见势危，从腰间拔出柳叶刀，刷刷两刀，向他迎头砍去。 
        完颜萍年纪甚轻，但刀法狠辣，手中柳叶刀锋利异常，连砍数刀，已将板凳的四只凳脚砍去。 
        陆无双的银弧弯刀失去以后：敌对的两女一个手持柳叶刀，另一个兵刃似是一管洞萧，两人身形婀娜，步法迅捷，武功也自不弱，但和李莫愁相抗总是不及。……陆无双伸手拔出柳叶刀，转过身来，见说话的正是郭芙。

        今天我们观察Android平台“柳叶刀”Button焦点的变化情况，在点击、触摸、键盘按键等事件触发时，按钮都会随之发生焦点的改变。下面给出该情景的案例：

1案例技术要点

(1)为Button所在Activity实现OnClickListener、OnTouchListener、OnFocusChangeListener、OnKeyListener四类事件监听。
(2)为Button（带图片）设置分别设置OnClickListener、OnTouchListener、OnFocusChangeListener、OnKeyListener四类事件监听。
(3)android.view.View.OnClickListener：点击事件监听
(4)android.view.View.OnFocusChangeListener：焦点变化事件监听
(5)android.view.View.OnKeyListener：键盘按键事件监听
KeyEvent.ACTION_DOWN：按键按下时触发该事件
KeyEvent.ACTION_UP：按键弹起时触发该事件
(6)android.view.View.OnTouchListener：触摸事件监听 
MotionEvent.ACTION_DOWN：触摸时触发该事件
MotionEvent.ACTION_UP：触摸离开时触发该事件

2案例代码陈列

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.button"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".ButtonMainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

strings.xml

<resources>
    <string name="app_name">Button的焦点变化</string>
    <string name="button1">按钮一</string>
    <string name="button2">按钮二</string>
</resources>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/common_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button1" />

    <Button
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button1"
        android:gravity="center"
        android:text="@string/button2" />

</LinearLayout>

ButtonMainActivity.java

package com.android.button;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.View.OnKeyListener;
import android.view.View.OnTouchListener;
import android.widget.Button;

/**
 * Button案例一：按钮的焦点变化
 * @author lynnli1229
 */
public class ButtonMainActivity extends Activity implements OnClickListener,
        OnTouchListener, OnFocusChangeListener, OnKeyListener {
    //用于改变按钮的大小
    private int value = 1;
    private Button commonButton;
    private Button imageButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        commonButton = (Button) findViewById(R.id.common_button);
        imageButton = (Button) findViewById(R.id.image_button);
        commonButton.setOnClickListener(this);
        imageButton.setOnClickListener(this);
        imageButton.setOnTouchListener(this);
        imageButton.setOnFocusChangeListener(this);
        imageButton.setOnKeyListener(this);
        
    }

    //当按钮被按下或松开时回调该方法
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if(KeyEvent.ACTION_DOWN == event.getAction()) {
            v.setBackgroundResource(R.drawable.button3);
        } else if(KeyEvent.ACTION_UP == event.getAction()) {
            v.setBackgroundResource(R.drawable.button2);
        }
        return false;
    }

    //当按钮焦点发生改变时回调该方法
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if(hasFocus) {
            imageButton.setBackgroundResource(R.drawable.button2);
        } else {
            imageButton.setBackgroundResource(R.drawable.button1);
        }

    }

    //当按钮被触摸时回调该方法
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_UP) {
            v.setBackgroundResource(R.drawable.button1);
        } else if(event.getAction() == MotionEvent.ACTION_DOWN) {
            v.setBackgroundResource(R.drawable.button2);
        }
        return false;
    }

    //当按钮被点击时回调该方法
    @Override
    public void onClick(View v) {
        Button button = (Button) v;
        if (value == 1 && button.getWidth() == getWindowManager().getDefaultDisplay().getWidth()) {
            value = -1;
        } else if (value == -1 && button.getWidth() < 100) {
            value = 1;
        }
        button.setWidth(button.getWidth() + (int) (button.getWidth() * 0.1) * value);
        button.setHeight(button.getHeight() + (int) (button.getHeight() * 0.1) * value);
    }

}

        友情提示：提供三张展示按钮焦点变化的图片存放于drawable-hdpi文件夹下。

3案例效果展示