Android study notes 18: buttons, image views and image buttons

Zero, learning goals

1. Understand the common properties of buttons and be able to handle events
2. Understand common attributes of image views and be able to handle events
3. Understand the common properties of image buttons and be able to handle events

One, button control

1. Inheritance diagram

2. Common attributes

• text: text content
• textSize: text size
• textColor: text color
• onClick: Click event (used to bind event processing method)

Second, the image view

1. Inheritance diagram

2. Common attributes

• src: source (used to set the picture source)
• background: background (used to set the background image)
• scaleType: zoom type ()
• tint (mask)

Three, the image button

1. Inheritance diagram

2. Common attributes

• src: source (used to set the picture source)
• background: background (used to set the background image)

Fourth, teaching case-zoom the picture by button

(1) Operation effect

(2) Key points of application

• How to set the size of the image? Can't set the label font attributes like before: it 控件名.set属性名(属性值);must be realized through the layout parameter class ( LayoutParams).

(1) Obtain the image size

getLayoutParams()Obtain the layout parameter object through the method of the image view object , and then use the widthand heightattributes provided by the layout parameter object to obtain the size of the image.

imageWidth = ivBear.getLayoutParams().width;
imageHeight = ivBear.getLayoutParams().height;

(2) Set the image size

setLayoutParams()To set by the method of the image view object , a layout parameter object must be passed in, and the new image size is passed in when the layout parameter object is initialized.

ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));

(3) Implementation steps

1. Create an Android application [ZoomImageByButton]

2. Copy the two pictures to the drawable directory

3. The main layout resource file activity_main.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:gravity="center_horizontal"
    android:padding="10dp"
    android:orientation="vertical" >

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

        <Button
            android:id="@+id/btnMinus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doMinus"
            android:text="@string/minus" />

        <Button
            android:id="@+id/btnPlus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doPlus"
            android:text="@string/plus" />

        <ImageButton
            android:id="@+id/btnExit"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:onClick="doExit"
            android:background="@drawable/exit" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/ivBear"
            android:layout_width="200dp"
            android:layout_height="300dp"
            android:src="@drawable/bear" />
    </LinearLayout>

</LinearLayout>

4. String resource file strings.xml

<resources>
    <string name="app_name">通过按钮缩放图片</string>
    <string name="minus">缩小图片</string>
    <string name="plus">放大图片</string>
</resources>

5. The main interface class MainActivity

package net.hw.zoom_image;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    
    
    private ImageView ivBear; // 图像控件
    private double imageWidth; // 图像宽度
    private double imageHeight; // 图像高度
    private double screenWidth; // 屏幕宽度
    private double screenHeight; // 屏幕高度
    private double zoomScale = 0.95; // 缩放比例

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获得控件实例
        ivBear = findViewById(R.id.ivBear);

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

        // 获得图像尺寸
        imageWidth = ivBear.getLayoutParams().width;
        imageHeight = ivBear.getLayoutParams().height;
    }

    /**
     * 缩小图片单击事件处理方法
     *
     * @param view
     */
    public void doMinus(View view) {
    
    
        // 获得图像新尺寸
        int newWidth = (int) (imageWidth * zoomScale);
        int newHeight = (int) (imageHeight * zoomScale);
        // 按新尺寸设置图像（不能缩小为零，否则不能再放大）
        if (newWidth > 50) {
    
    
            ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // 重新获取图像尺寸
            imageWidth = ivBear.getLayoutParams().width;
            imageHeight = ivBear.getLayoutParams().height;
        } else {
    
    
            Toast.makeText(this, "温馨提示：图片不能再缩小，要不然看不见咯！", Toast.LENGTH_LONG).show();
        }
    }

    /**
     * 放大图片单击事件处理方法
     *
     * @param view
     */
    public void doPlus(View view) {
    
    
        // 获得图像新尺寸
        int newWidth = (int) (imageWidth / zoomScale);
        int newHeight = (int) (imageHeight / zoomScale);
        // 按新尺寸设置图像（不能再放大，否则就出界了）
        if (ivBear.getLayoutParams().width < screenWidth) {
    
    
            ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // 重新获取图像尺寸
            imageWidth = ivBear.getLayoutParams().width;
            imageHeight = ivBear.getLayoutParams().height;
        } else {
    
    
            Toast.makeText(this, "温馨提示：图片不能再放大，要不然就出界咯！", Toast.LENGTH_LONG).show();
        }
    }

    /**
     * 退出应用程序
     *
     * @param view
     */
    public void doExit(View view) {
    
    
        finish();
    }
}

6. Start the application and check the effect

Five, homework

Task: Switch to zoom pictures (Glimpse of Luzhou Vocational College)

• Switch pictures (swipe through normal buttons or gestures)
• Zoom picture (to achieve by zoom button ZoomControls)