安卓开发5.3 初探按钮、图像视图与图像按钮的使用方法

一、导读

• 安卓应用中，按钮一般用于用户点击确认某项功能，当然也可以用图像按钮。显示图片，我们经常使用图像视图（ImageView）。一个界面最好能图文并茂，给用户较好的体验。

二、按钮视图

1、按钮控件（Button）的属性

属性	含义
text	文本内容
textSize	文本字号，单位：sp
textColor	文本颜色，#ff0000 - 红色
background	背景颜色或背景图片
layout_height	高度，单位：dp (wrap_content, match_parent)
layout_weight	宽度，单位：dp (wrap_content, match_parent)
onClick	单击事件（用于绑定事件处理方法）

2、图像（ImageView）视图的属性

属性	含义
layout_height	高度，单位：dp (wrap_content, match_parent)
layout_weight	宽度，单位：dp (wrap_content, match_parent)
src	源（用于设置图片源）
background	背景（用于设置背景图片）
scaleType	缩放类型（fitXY）
tint	蒙版

2、图像（ImageButton）按钮

属性	含义
layout_height	高度，单位：dp (wrap_content, match_parent)
layout_weight	宽度，单位：dp (wrap_content, match_parent)
src	源（用于设置图片源）
background	背景（用于设置背景图片）

三、切换缩放图片

1、准备工作

1. 创建安卓应用：于Empty Activity模板创建安卓应用 -TogglePictureDemo
2. 准备图片素材:将10张图片，拷贝到drawable目录里

2、字符串资源文件

3、主布局资源文件

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/top_Picture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doTopPicture"
            android:text="@string/Top"/>

        <ZoomControls
            android:id="@+id/zoom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@+id/img_picture"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/img1"/>

    </LinearLayout>

</LinearLayout>

效果图：

4、主界面类实现功能

1、缩放图片功能实现

（1）声明变量

（2）通过资源标识符获取控件实例

（3）获得屏幕尺寸和图片大小

（4）开启放大缩小图片功能

（5）编写放大图片单击事件功能

• setOnZoomInClickListener (View.OnClickListener listener)：注册放大监听器
  

（5）编写缩小图片单击事件功能

• setOnZoomOutClickListener (View.OnClickListener listener)：注册缩小监听器
  

2、切换图片功能实现

（1）声明变量

（2）通过资源标识符获取控件实例

（3）初始化图像标识符数组

（4）编写【切换图片】按钮单击事件处理方法

5、代码如下

public class MainActivity extends AppCompatActivity {


    private final int IMG_COUNT=10;   // 图片数量
    private int[] imgIds;
    private int imgIndex;  // 图片索引
    private ImageView imgPicture;
    private double imageWidth; // 图像宽度
    private double imageHeight; // 图像高度
    private double screenWidth; // 手机屏幕宽度
    private double screenHeight; // 手机屏幕高度
    private double scale = 0.95; // 缩小比例
    private ZoomControls zoomPicture;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 通过资源标识符获取控件实例
        imgPicture = findViewById(R.id.img_picture);
        zoomPicture = findViewById(R.id.zoom);


        imgIds = new int[IMG_COUNT];
        for (int i = 0;i<IMG_COUNT;i++){
            imgIds[i] = getResources().getIdentifier(
                    "img" + (i + 1),
                    "drawable",
                    "com.example.toggle_picture"
            );
        }

        // 获得屏幕尺寸
        screenWidth = getWindowManager().getDefaultDisplay().getWidth();
        screenHeight = getWindowManager().getDefaultDisplay().getHeight();

        // 获取图像尺寸
        imageWidth = imgPicture.getLayoutParams().width;
        imageHeight = imgPicture.getLayoutParams().height;

        // 开启放大功能
        zoomPicture.setIsZoomInEnabled(true);
        // 开启缩小功能
        zoomPicture.setIsZoomOutEnabled(true);

        // 放大图片
        zoomPicture.setOnZoomInClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 获取图像新尺寸
                int newWidth = (int) (imageWidth / scale);
                int newHeight = (int) (imageHeight / scale);
                // 按新尺寸设置图像（不能缩小为零，否则不能再放大）
                if (newWidth < screenWidth) {
                    // 按新尺寸设置图像
                    imgPicture.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
                    // 更新图像尺寸变量
                    imageWidth = imgPicture.getLayoutParams().width;
                    imageHeight = imgPicture.getLayoutParams().height;
                }else {
                    Toast.makeText(MainActivity.this,"放大最大",Toast.LENGTH_SHORT).show();
                }
            }
        });

        // 缩小图片
        zoomPicture.setOnZoomOutClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 获取图像新尺寸
                int newWidth = (int) (imageWidth * scale);
                int newHeight = (int) (imageHeight * scale);
                // 按新尺寸设置图像（不能缩小为零，否则不能再放大）
                if (newWidth > 50) {
                    // 按新尺寸设置图像
                    imgPicture.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
                    // 更新图像尺寸变量
                    imageWidth = imgPicture.getLayoutParams().width;
                    imageHeight = imgPicture.getLayoutParams().height;
                }else {
                    Toast.makeText(MainActivity.this,"缩小最小",Toast.LENGTH_SHORT).show();
                }
            }
        });

    }

    /**
     * 【切换图片】通过单击处理事件的方法
     * @param view
     */
    public void doTopPicture(View view){

        if(imgIndex < IMG_COUNT - 1){
            imgIndex++;
        }else {
            imgIndex = 0;
        }

        // 根据索引切换图片
        imgPicture.setImageResource(imgIds[imgIndex]);
    }
}

6、启动应用查看效果