原文:Android零基础入门第19节:Button使用详解

Button(按钮)是Android开发中使用非常频繁的组件,主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮会触发一个onClick点击事件。

一、Button简介

Button使用起来比较容易,可以通过指定android:background 属性为按钮增加背景颜色或背景图片,如果将背景图片设为不规则的背景图片,则可以开发出各种不规则形状的按钮。

如果只是使用普通的背景颜色或背景图片,那么这些背景是固定的,不会随着用户的动作而改变。如果需要让按钮的背景颜色、背景图片随用户动作动态改变,则可以考虑使用自定义Drawable对象来实现,该部分内容会在高级开发部分进行详细讲解。

Button派生出来的子类主要有CheckBox、RadioButton、ToggleButton、Switch几个,都可直接使用Button支持的各种属性和方法,后续会进行学习。

二、Button示例

接下来通过一个简单的示例程序来学习Button的常见用法。

首先从网上下载两张图片素材,然后放到res/drawable/目录下,在到res/layout/目录下创建一个button_layout.xml文件,然后在其中填充如下代码片段:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 普通文字按钮 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
android:textSize="16sp"
android:textColor="#ff00ff"/> <!-- 图片按钮-->
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/play" /> <!-- 带文字的图片按钮-->
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/button"
android:textSize="18sp"
android:text="开始"/> </LinearLayout>

上界面布局中的第一个按钮是一个普通按钮;

第二个按钮通过background属性配置了背景图片,因此该按钮将会显示为背景图片形状的按钮;

第三个按钮综合了文字显示和背景图片,因此该按钮将会显示为背景图片上带文字的按钮。

然后修改一下app/src/java/MainActivity.java文件中加载的布局文件为新建的button_layout.xml文件。运行程序,可以看到下图所示界面效果。

通过上面的示例,大体知道如何创建Button,那么接下来通过一个综合示例来继续学习如何使用Button和EditText这两个组件。

三、综合示例

到res/layout/目录下创建一个login.xml文件,然后在其中填充如下代码片段:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="用户名:"
android:textSize="16sp"/>
<EditText
android:id="@+id/name_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="密码:"
android:textSize="16sp"/>
<EditText
android:id="@+id/pwd_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword"/> <Button
android:id="@+id/login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登录"/> </LinearLayout>

然后修改一下app/src/java/MainActivity.java文件中加载的布局文件为新建的login.xml文件。为了监听登录按钮的点击事件,在Java代码中为其添加点击事件监听器,具体代码如下:

public class MainActivity extends AppCompatActivity {
private EditText mNameEt = null; // 用户名输入框
private EditText mPasswordEt = null; // 密码输入框
private Button mLoginBtn = null; // 登录按钮 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.login); // 获取界面组件
mNameEt = (EditText) findViewById(R.id.name_et);
mPasswordEt = (EditText) findViewById(R.id.pwd_et);
mLoginBtn = (Button) findViewById(R.id.login_btn); // 为登录按钮绑定点击事件
mLoginBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 获取用户输入的用户名和密码
String name = mNameEt.getText().toString();
String password = mPasswordEt.getText().toString(); // 消息提示
Toast.makeText(MainActivity.this,
"用户名:" + name + "\n密码:" + password, Toast.LENGTH_SHORT).show();
}
});
}
}

上面的代码采用匿名内部类方式为登录按钮绑定点击事件监听器,在后续还会学到其他绑定监听器的方法。

运行程序,分别在用户名输入框和密码输入框中输入相应信息,再点击登录按钮,可以看到下图所示界面效果。

到此,最常用的三个组件TextView、EditText和Button都已经学习完成,你都掌握了吗?

------------------------------------------------

今天就先到这里,下一期开始UI组件的学习。如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!

往期总结分享:

Android零基础入门第1节:Android的前世今生

Android零基础入门第2节:Android 系统架构和应用组件那些事

Android零基础入门第3节:带你一起来聊一聊Android开发环境

Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节:善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节:配置优化SDK Manager, 正式约会女神

Android零基础入门第7节:搞定Android模拟器,开启甜蜜之旅

Android零基础入门第8节:HelloWorld,我的第一趟旅程出发点

Android零基础入门第9节:Android应用实战,不懂代码也可以开发

Android零基础入门第10节:开发IDE大升级,终于迎来了Android Studio

Android零基础入门第11节:简单几步带你飞,运行Android Studio工程

Android零基础入门第12节:熟悉Android Studio界面,开始装逼卖萌

Android零基础入门第13节:Android Studio配置优化,打造开发利器

Android零基础入门第14节:使用高速Genymotion,跨入火箭时代

Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航

Android零基础入门第16节:Android用户界面开发概述

Android零基础入门第17节:TextView属性和方法大全

Android零基础入门第18节:EditText的属性和使用方法

此文章版权为微信公众号分享达人秀(ShareExpert)——鑫鱻所有,若转载请备注出处,特此声明!

Android零基础入门第19节:Button使用详解的更多相关文章

  1. Android零基础入门第29节:善用TableLayout表格布局,事半功倍

    原文:Android零基础入门第29节:善用TableLayout表格布局,事半功倍 前面学习了线性布局和相对布局,线性布局虽然方便,但如果遇到控件需要排列整齐的情况就很难达到要求,用相对布局又比较麻 ...

  2. Android零基础入门第30节:两分钟掌握FrameLayout帧布局

    原文:Android零基础入门第30节:两分钟掌握FrameLayout帧布局 前面学习了线性布局.相对布局.表格布局,那么本期来学习第四种布局--FrameLayout帧布局. 一.认识FrameL ...

  3. Android零基础入门第28节:轻松掌握RelativeLayout相对布局

    原文:Android零基础入门第28节:轻松掌握RelativeLayout相对布局 在前面三期中我们对LinearLayout进行了详细的解析,LinearLayout也是我们用的比较多的一个布局. ...

  4. Android零基础入门第26节:layout_gravity和gravity大不同

    原文:Android零基础入门第26节:layout_gravity和gravity大不同 上一期我们一起学习了LinearLayout线性布局的方向.填充模型和权重,本期来一起学习LinearLay ...

  5. Android零基础入门第27节:正确使用padding和margin

    原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout ...

  6. Android零基础入门第24节:自定义View简单使用

    原文:Android零基础入门第24节:自定义View简单使用 当我们开发中遇到Android原生的组件无法满足需求时,这时候就应该自定义View来满足这些特殊的组件需求. 一.概述 很多初入Andr ...

  7. Android零基础入门第25节:最简单最常用的LinearLayout线性布局

    原文:Android零基础入门第25节:最简单最常用的LinearLayout线性布局 良好的布局设计对于UI界面至关重要,在前面也简单介绍过,目前Android中的布局主要有6种,创建的布局文件默认 ...

  8. Android零基础入门第23节:ImageButton和ZoomButton使用大全

    原文:Android零基础入门第23节:ImageButton和ZoomButton使用大全 上一期我们学习了ImageView的使用,那么本期来学习ImageView的两个子控件ImageButto ...

  9. Android零基础入门第22节:ImageView的属性和方法大全

    原文:Android零基础入门第22节:ImageView的属性和方法大全 通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开 ...

随机推荐

  1. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  2. [NativeScript] Create new application and run emulator

    Install: npm i -g nativescript Create: tns create <app_name> --ng Run: tns emulate ios List al ...

  3. 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)

    20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...

  4. 前端切图:调用百度地图API

    原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. HDU 3215 The first place of 2^n (数论-水题)

    The first place of 2^n Problem Description LMY and YY are mathematics and number theory lovers. They ...

  6. TCP基础

    TCP基础知识 复习   前言 说来惭愧,大二时候学的计算机网络好多都不太记得了,不过还好有认真学过,捡起来也挺快的,就是对于现在业界中使用的网络算法的不是很懂: 1 TCP报文段结构 1.1 序号和 ...

  7. 采用API将AR应收账款未知未核销状态变成黄金

    DECLARE p_api_version NUMBER; p_init_msg_list VARCHAR2(200); p_commit VARCHAR2(200); p_validation_le ...

  8. No handler for type [text] declared on field [content]

    Install 1.compile checkout ik version respective to your elasticsearch version git checkout tags/{ve ...

  9. create-react-app 支持 装饰器 decorator

    网上常见方法全是安装 babel-plugin-transform-decorators-legacy 然后添加babel配置的, 实际情况是最新版本的create-react-app 生成的项目已经 ...

  10. ElasticSearch的javaAPI之Client

    翻译的原文:http://www.elasticsearch.org/guide/en/elasticsearch/client/java-api/current/client.html#node-c ...