为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Android零基础入门第23节：ImageButto...

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

标签：
Android

上一期我们学习了ImageView的使用，那么本期来学习ImageView的两个子控件ImageButton和ZoomButton的使用。

                                             

一、ImageButton

在Android开发中除了使用Button按钮，还可以使用自带图标的按钮，即ImageButton。Button与ImageButton的区别在于，Button生成的按钮上显示文字，而ImageButton上则显示图片。

需要指出的是，为ImageButton按钮指定android:text属性没用，由于ImageButton的本质是ImageView，即使指定了该属性，图片按钮上也不会显示任何文字。

使用ImageButton图片按钮可以指定android:src属性，该属性既可使用静止的图片，也可使用自定义的Drawable对象，这样即可开发出随用户动作改变图片的按钮。

接下来通过一个简单的示例程序来学习ImageButton的使用用法。

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

[代码]xml代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

<?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">

 

    <ImageButton

        android:id="@+id/control_ib"

        android:layout_width="80dp"

        android:layout_height="80dp"

        android:scaleType="fitXY"

        android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/fast"/>

</LinearLayout>

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

[代码]java代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

package com.jinyu.cqkxzsxy.android.widgetsample;

 

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.ImageButton;

import android.widget.Toast;

 

public class MainActivity   extends AppCompatActivity   {

    private ImageButton mControlIb = null; // 播放控制按钮

    private boolean mFlag = false; // 播放控制标记符,默认暂停状态

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.imagebutton_layout);

 

        //   获取界面组件

        mControlIb   = (ImageButton) findViewById(R.id.control_ib);

 

        //   为图标按钮绑定OnClickListener监听器

        mControlIb.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                //   根据记录的控制状态进行图标切换

                if(mFlag)   {

                    Toast.makeText(MainActivity.this,   "暂停",   Toast.LENGTH_SHORT).show();

                    mControlIb.setImageResource(R.drawable.fast);

                    mFlag   = false;

                }else {

                    Toast.makeText(MainActivity.this,   "快进",   Toast.LENGTH_SHORT).show();

                    mControlIb.setImageResource(R.drawable.pause);

                    mFlag   = true;

                }

            }

        });

    }

}

运行程序，点击图标按钮，可以看到效果。

二、ZoomButton

ImageButton派生了一个ZoomButton，ZoomButton可以代表“放大”、“缩小”两个按钮。 ZoomButton 的行为基本类似于 ImageButton，只是 Android 默认提供了 btn_minus、btn_plus 两个 Drawable 资源，只要为 ZoomButton 的 android:src 属性分别指定 btn_minus、btn_plus，即可实现“缩小”、“放大”按钮。当然也可以自己指定图片资源。

实际上Android还提供了一个ZoomControls组件，该组件相当于同时组合了 “放大”、“缩 小”两个按钮，并允许分别为两个按钮绑定不同的事件监听器。

接下来通过一个简单的示例程序来学习ZoomButton和ZoomControls的使用用法。

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

[代码]xml代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?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">

 

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

 

        <ZoomButton

            android:id="@+id/minus_zb"

            android:layout_width="80dp"

            android:layout_height="80dp"

            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@android:drawable/btn_minus"/>

 

        <ZoomButton

            android:id="@+id/plus_zb"

            android:layout_width="80dp"

            android:layout_height="80dp"

            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@android:drawable/btn_plus"/>

    </LinearLayout>

 

    <ZoomControls

        android:id="@+id/control_zc"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

 然后修改一下app/src/java/MainActivity.java文件中加载的布局文件为新建的zoombutton_layout.xml文件。为了监听几个组件的点击事件，在Java代码中分别为其绑定事件监听器，具体代码如下：

[代码]java代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

package com.jinyu.cqkxzsxy.android.widgetsample;

 

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Toast;

import android.widget.ZoomButton;

import android.widget.ZoomControls;

 

public class MainActivity   extends AppCompatActivity   {

    private ZoomButton mMinusZb = null; // 缩小按钮

    private ZoomButton mPlusZb = null; // 放大按钮

    private ZoomControls mControlZc = null; //缩放组件

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.zoombutton_layout);

 

        //   获取界面组件

        mMinusZb   = (ZoomButton) findViewById(R.id.minus_zb);

        mPlusZb   = (ZoomButton) findViewById(R.id.plus_zb);

        mControlZc   = (ZoomControls) findViewById(R.id.control_zc);

 

        //   为缩小按钮绑定OnClickListener监听器

        mMinusZb.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(MainActivity.this,   "缩小",   Toast.LENGTH_SHORT).show();

            }

        });

        //   为放大按钮绑定OnClickListener监听器

        mPlusZb.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(MainActivity.this,   "放大",   Toast.LENGTH_SHORT).show();

            }

        });

 

        //   为缩放组件绑定OnZoomInClickListener监听器

        mControlZc.setOnZoomInClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(MainActivity.this,   "放大",   Toast.LENGTH_SHORT).show();

            }

        });

        //   为缩放组件绑定OnZoomOutClickListener监听器

        mControlZc.setOnZoomOutClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Toast.makeText(MainActivity.this,   "缩小",   Toast.LENGTH_SHORT).show();

            }

        });

    }

}

运行程序，点击侧的ZoomButton按钮，可以看到效果。

发现使用ZoomControls也能轻松实现需要达到的目的。

到此，这两个Button子组件ImageButton和ZoomButton已经学习完成，你都掌握了吗？

今天就先到这里，如果有问题欢迎留言一起探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

原文链接：http://www.apkbus.com/blog-205190-68491.html

点击查看更多内容
发表于 2018.09.10 13:42， 共 1599 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

波斯汪

手记
篇
粉丝
66
获赞与收藏
428

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消