开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:Android零基础入门第23节:ImageButton和ZoomButton使用大全 上一期我们学习了ImageView的使用,那么本期来学习ImageView的两个子控件ImageButton和ZoomButton的使用。
+关注继续查看
原文:Android零基础入门第23节:ImageButton和ZoomButton使用大全

上一期我们学习了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 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:src="@drawable/fast"/>
</LinearLayout>

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

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 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:src="@android:drawable/btn_minus"/>

        <ZoomButton
            android:id="@+id/plus_zb"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@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代码中分别为其绑定事件监听器,具体代码如下:

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零基础入门技术讨论微信群,共同成长!

 

往期总结分享:

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的属性和使用方法

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

Android零基础入门第20节:CheckBox和RadioButton使用大全

Android零基础入门第21节:ToggleButton和Switch使用大全

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发重要参考资料
=======================博客============================= 秋百万 有心课堂 郭霖 源码 安装ffmpeg 胡凯 官方培训课程 litesuitsway 爱哥 trinea robinRobin Hu...
740 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
Android插件化:从入门到放弃
立即下载
《深入探索Android热修复技术原理》
立即下载