Android UI 详解之Button

1、Button结构

Button 继承TextView

Imagebutton 继承 Imageview，比ImageView多了点击效果，就是用一个图标代表了一些文字，它比起Button没有Android:text属性。

它由Android:src指定图标的位置 ,

那大家又会问ImageButton的src和background有什么区别呢？

         ImageButton 是带图标的Button控件，有src的属性，也就是设置他的图标，也有一个所有控件公有的属性background，这个也可以设置它的“图标”。其实，src才是设置图标，而background只是设置背景。举个例子，如果控件的大小是100*100 图片资源是80*80的话，那么用src，图片就会居中显示，如果使用background那么图片就会被拉伸充满控件。
重要的是，background是底层的图片资源，src是覆盖在background上面的资源，他们可以叠加使用，实现选中的效果。在ActivityGroup用到。

        android:src="@drawable/back"
       Button 继承 Textview,所以TextView的一些属性也适用于Button控件。

Button把图片当作背景与放在ImageButton/ImageView中的效果是不一样的。

3、圆形Button，有两种，一种是通过Button设置背景图片，用xml配置点击前与点击后的图片，这种当点击边缘部分也会处发点击效果，对于小的按钮可以这样做。另一种是Button，设置背景图片，手动编写点击事件处理，通过设置

setOnTouchListener()这个方法，不用setOnClickListener,因为onTouchListener()可以获取我们的事件对象，方便我们计算

点击前、后效果图

（1）不限制点击范围的按钮，用xml实现比较方便

这个xml放在那里都可以主要能引用到，我放到了drawable目录下，并且这目录下放两个资源图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 制定按钮按下时的图片 -->
    <item
         android:state_pressed="true"
         android:drawable="@drawable/press" 
        
        />
    <item android:state_pressed="false"
          android:drawable="@drawable/press2"
          />
        
</selector>

布局文件xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:background="#FFFFFF">

    
    <Button 
        android:id="@+id/bt"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/button_selector"
        android:text="Click me"
        />
</RelativeLayout>

Activity中什么也不用写，只需要加载布局文件，并显示。

（2）限制点击范围的圆形按钮，需用java代码实现

package com.example.demo;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageButton;

/**
 * 这是一个圆形按钮，只有圆形的区域有效
 * @author qiyue
 *
 */
public class MainActivity extends Activity 
{
        @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sa);
       
        Button bt = (Button) findViewById(R.id.imageBt);
        bt.setOnTouchListener(new View.OnTouchListener() { 
            @Override 
            public boolean onTouch(View view, MotionEvent motionEvent) { 
                //按下操作 
            	float x1 = pxTodip(getApplication(),motionEvent.getX());
            	float y1 = pxTodip(getApplication(),motionEvent.getY());
            
            	if(((x1-121)*(x1-121)+(y1-121)*(y1-121))<(121*121)){
	                if(motionEvent.getAction()==MotionEvent.ACTION_DOWN){ 
	                	view.setBackgroundResource(R.drawable.press);
	                } 
            	}
                //抬起操作 
                if(motionEvent.getAction()==MotionEvent.ACTION_UP){ 
                	view.setBackgroundResource(R.drawable.press2);
                } 
                //移动操作 
                if(motionEvent.getAction()==MotionEvent.ACTION_MOVE){ 
                      
                } 
                return false; 
            } 
        });  
            
    }
    public static int dipTopx(Context context,float dpValue){
    	final float scale = context.getResources().getDisplayMetrics().density;
    	return (int) (dpValue * scale + 0.5f);
    }
    
    	 
    public static int pxTodip(Context context, float pxValue) {
	final float scale = context.getResources().getDisplayMetrics().density;
	return (int) (pxValue / scale + 0.5f);
    } 


}

xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#FFFFFF"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:id="@+id/imBt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv"
        android:background="@drawable/press" />

</RelativeLayout>

其余图形的的判断也是通过此方法，希望这篇文章能帮到大家

Android UI 详解之Button

猜你喜欢