Android UI Design 02 : 基本按钮 Button

最新推荐文章于 2025-01-24 03:34:06 发布

JimmySO

最新推荐文章于 2025-01-24 03:34:06 发布

阅读量1k

点赞数

分类专栏： Android UI Design 文章标签： button android ui layout radiobutton eclipse

Android UI Design 专栏收录该内容

5 篇文章

订阅专栏

原文地址：http://mobile.tutsplus.com/tutorials/android/android-interface-design_basic-buttons/

这个快速提示告诉您可以通过下面的步骤在你的Android应用程序中创建一个简单的Button或者ImageButton控件。首先，你将学习到如何添加Button控件到你的布局文件中。其次，你将学习到如何处理按钮的点击事件（通过使用两种不同方式）。最后，我们将讨论Android中Button控件的一些其他的特性。

Step 1: 创建一个Android应用程序

通过用常规的方法创建一个Android项目来实现你的Android应用程序。一旦你的项目建立并且程序可以运行起来，你就知道该在屏幕的什么地方添加Button控件了。或许你已经简单地创造了一个新的Android项目，使用其默认的Activity和布局文件(main.xml)。而这些东西都将适用于本教程。如果你的Android项目已经建立好了，你就可以继续下面的步骤了。

Step 2: 使用按钮控件

Android SDK中包含两个简单的Button控件可以使用在你的布局当中：Button(android.widget.Button)和ImageButton(android.widget.ImageButton)。正因为这两个控件的功能类似，所以下面我们要讨论一下他们之间的区别。两个控件之间的差异主要是在视觉上；Button控件有一个文本标签，而ImageButton使用的是一个图像。Button控件用法中的一个很好的例子就是在按钮中显示一个文本标签“Save”。ImageButton用法中的一个很好的例子就是显示一套有着音乐播放功能的Play (), Pause () and Stop ( )的图像按钮。

这有一个例子，包括一个屏幕上的一个Button控件(左边的)和一个ImageButton控件(右边的)。

Android SDK还包括其他几个没有被广为流传的类似按钮的控件，这些控件都是从这两个基本按钮类型派生出来的，包括CompoundButton，RadioButton，ToggleButton和ZoomButton。关于这些控件的更多信息，可以查看Android文档。当然你也可以通过继承相关类并实现控件的方法来创建属于你自己的自定义控件。

Step 3: 添加一个Button控件到布局中

Button控件通常是你的Activity布局文件的一部分。例如，添加一个Button控件到与你程序关联的main.xml布局文件中，你必须要编辑布局文件。你可以利用Eclipse的布局设计器或者直接编辑XML文件。像Button这种控件也可以在程序执行时通过程序创建并添加到你的屏幕上。在Activity中继承合适控件的类并且添加到你的布局中。

添加一个Button控件到布局资源文件中，打开你的Android项目中的/res/layout/main.xml布局文件。点击你想要放入Button控件的LinearLayout(或者父布局控件，如RelativeLayout或FrameLayout)。在Eclipse中，你可以使用Outline标签点击父布局控件，然后使用插件上的绿色加号按钮添加一个新的控件。选择你想要添加的控件--在本例中，添加的是一个Button控件。

为了设置Button控件的显示效果，你可以通过选择控件（在大纲或预览窗口都可以）并且在属性标签改变它来调节控件的属性。你想要知道的详细属性：

给Button和ImageButton控件一个唯一的id值。
通过text属性设置Button控件显示的文字；通过src属性设置ImageButton控件显示的图像。
设定布局控件的高和宽属性为wrap_content。
设定任何其他属性来调整你想要的控件的样子。例如，通过text color、text size和text style属性调整一个按钮的文字样式。

这里的屏幕所显示的东西是由上一节中所讨论的布局文件的内容产生的。它包含三个控件。RelativeLayout负责在屏幕上组织控件，即两个子控件，一个Button和一个ImageButton控件，如图所示：

<pre name="code" class="xml"><?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:gravity="center">  
    <Button  
        android:id="@+id/Button01"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="@string/hello"  
        android:minHeight="92dp"  
        android:textSize="22dp"  
        android:onClick="onMyButtonClick"></Button>  
    <ImageButton  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/skater"  
        android:id="@+id/ImageButton01"  
        android:layout_toRightOf="@+id/Button01"></ImageButton>  
</RelativeLayout>  
</pre>

Step 4:处理点击 – 最简单的方法

到现在的阶段，如果你启动应用程序，Button控件已经显示出来了，但是如果你点击它们什么也不会发生。现在让我们来学习处理控件的点击事件。有几种方法可以实现这件事情。

让我们先从简单的方法开始。Button和ImageButton控件有一个叫做onClick的属性(在属性面板的“On Click”)，你设定的方法名将使用这个属性处理点击事件，然后在Activity中实现这一方法。例如，你可以设置你Button控件的这个属性为onMyButtonClick。在XML中，这个属性将会以这样的方式出现：

android:onClick="onMyButtonClick"

然后，在你的Activity类中，您需要实现这个方法。创建一个public void 并且带有单参数(View对象)的方法。例如，下面按钮实现了当按钮被点击时在屏幕上生成一条Toast消息提示。

public void onMyButtonClick(View view)  
{  
    Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();  
}

当你点击Button控件时，onMyButtonClick()方法被调用，在屏幕上显示了Toast消息。你的Button控件做什么由你自己来决定。下面的例子就是当你按按钮时显示Toast消息的例子：

Step 5: 处理点击 – 实现 OnClickListener

实现点击处理的另外一种方法是注册一个新的View。OnClickListener和你的Button控件都使用setOnClickListener()方法。而不是在你的Button控件的布局文件中设置On Click属性来实现，而是在你的Activity中编写程序。虽然这可能编写了很多额外的代码，至少你要理解点击并不是控件中唯一需要处理的事件。我们用编程的方法展示给你其他的事件，例如长按事件。

使用这种方法，你必须使用你的Activity类，典型的做法是在你的Activity的onCreate()方法注册控件的点击。利用findViewById()方法检索控件，然后用它的setOnClickListener()方法去定义控件被点击的行为。你需要在你自己的接口中实现onClick()方法。例如，下面的代码(放置在Activity中的onCreate()方法中)为我们的ImageButton控件注册了点击处理的方法。

ImageButton myImageButton = (ImageButton) findViewById(R.id.ImageButton01);  
myImageButton.setOnClickListener(new View.OnClickListener() {  
    public void onClick(View v) {  
                    Toast.makeText(BasicButtonActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show();  
            }  
});

同样的，你可以利用setOnLongClickListener()方法来实现控件的长按事件。