Android用户界面设计:基本button


本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件的步骤。

首先。你会学到怎样向你的布局文件里加入button控件。

然后你会学习怎样用两种方法处理用户对button的点击。最后。我们讨论Android中button控件一些其他的可用特性。

第1步:创建Android应用程序

我们从创建Android程序開始。你寻常一样完毕你的Android应用。一旦你已经创建项目并能够执行,决定你希望向什么样的屏幕加入Button控件。

可能你就简单地创建了一个使用默认活动和布局(main.xml)的新Android项目。

这个教程将使用这样的情况作样例。一旦你创建了你的Android项目,你就能够继续学习这篇文章了。

第2步:使用Button控件

Android SDK包括两个在你的布局中能够使用的简单button控件:Button(android.widget.Button)和ImageButton(android.widget.ImageButton)。这些控件的功能非常相似因此我们差点儿能够一并地的讨论它们。这两个控件不同样的地方基本上就是外观上;Button控件有一个文本标签,而ImageButton使用一个可绘制的图像资源来取代。

Button使用的一个非常好的样例应该是一个简单的带有“保存”文本标签的button。

ImageButton使用的一个非常好的样例可能是音乐播放器button的集合,包括播放P, 暂停 以及停止。

这里是一个演示样例屏幕,包含一个Button控件(左边)和一个ImageButton控件(右边)。

Android screen with two types of button controls

Android SDK还包括了一些其他更不为人知的从上面两个基本button类型继承来的类button控件,包括CompoundButton。RadioButton。ToggleButton,和ZoomButton。要了解这些控件的很多其他信息,查看Android文档。你也能够通过继承合适的类并实现控件行为来创建自己定义控件。

第3步:向布局加入Button控件

Button控件通常都被作为活动的布局资源文件一部分。

比方,要加入一个Button控件到与你程序相关的main.xml布局资源中,你必须编辑布局文件。你可使用Eclipse的布局资源设计器,或者直接编辑XML。像button这种控件也能够通过程序动态地创建并在执行时加入到你的屏幕上。简单地通过它的类来创建合适的控件并将它加入到你的活动中的布局。

要加入一个Button控件到布局资源文件,打开/res/layout/main.xml布局文件,它是你的Android项目的一部分。

点击你想要为其加入Button控件的LinearLayout (或者父级布局控件,比方RelativeLayout或FrameLayout)。在Eclipse中,你能够点击Outline标签中的父级布局,然后使用绿色加号button加入一个新的控件。选择你要加入的控件——在这个样例中是Button控件。

Adding a Button control to a Layout Resource in Eclipse

要配置Button控件的外观,选中该控件并通过在属性标签中改变属性值来调节控件的属性。

以下是一些你会想知道的特别的属性:

  • 使用id属性给Button或ImageButton一个唯一的名字;
  • 使用文本属性设置Button控件上要显示的文字;
  • 使用src属性设置ImageButton控件上要显示的图片。
  • 将控件的布局高度和布局宽度属性设置为wrap_content.
  • 设置不论什么其他属性来调整控件的外观。比方,使用文本颜色,文本大小和文本样式属性来调整Button的字体。

以下是用来生成前段中展示的屏幕的布局资源文件的内容。它包含三个控件。

RelativeLayout组织屏幕上的控件,也就是两个子控件,一个Button和一个ImageButton,例如以下:

<pre name="code"><?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>

第4步:处理点击

如今,假设你执行你的程序。button控件显示出来了。可是假设你点击它们不会有不论什么反应。

如今应该来处理控件上的点击事件了。有好几种方法能够做到。

让我们从简单的方法開始吧。Button和ImageButton控件有一个叫onClick的属性(在属性面板里叫“On Click”)。你能够通过这个属性设置要处理点击事件的方法名,然后在你的活动中实现这种方法。比方,你能够将你的Button控件属性设置为onMyButtonClick。

在XML中,这个属性将例如以下所看到的:

android:onClick="onMyButtonClick"

然后,在你的活动类。你须要实现这种方法。它应该是一个带有单个參数(一个View对象)的公有的void方法。

比如,以下的button点击实现了当Button控件被点击时在屏幕生成一个消息框:

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

当你点击这个Button控件,onMyButtonClick()方法被调用,在屏幕上显示一个消息。你的Buttonbutton能做什么就取决于你自己了。

下图显示了当点击Buttonbutton时消息是怎样展示的:

Handling a Button control click with a Toast

第5步:处理点击——实现OnClickListener

实现点击事件处理的还有一种方法是使用setOnClickListener()方法向你的button控件注冊一个新的View.OnClickListener。

这样的方式取代了将你布局资源中的button控件的On Click属性设置为一个你必须实现的方法的方式,你能够在你的活动中动态地做这些事情。尽管这可能看起来有非常多额外的代码要写,但至少理解它是非常重要的,由于在一些控件上点击不是须要处理的唯一事件。我们将要向你展示的程序应用了其他的事件。比方长按。

要使用这种方法。你必须更新你的活动类以注冊控件点击事件。通常情况下通过你的活动的onCreate()方法来实现。使用findViewById()方法找到控件然后使用它的setOnClickListener()方法来定义当它被点击时的行为。你将须要自己去实现界面的onClick()方法。比方。以下的代码(位于活动的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()方法。

总结

button控件在Android程序中常常会用到。在这个高速教程中你学习了怎样创建两种不同的Androidbutton控件:Button和ImageButton。

你也学习了实现这些类型button控件的button点击事件处理的几种方法。(注:原文作者:RockUX–WEB 点此查看英文


http://mobile.51cto.com/design-254382.htm

posted on 2017-05-02 17:59  yutingliuyl  阅读(1467)  评论(0编辑  收藏  举报