This article is the sixth chapter, which mainly introduces the button and image display, the button control Button, the image control Imgaeview and the image button ImageButton, and how to display pictures and text on the button at the same time.
This article is a note made during the learning process of the Bilibili tutorial Brain Academy Android tutorial!
Most of this article is the knowledge points selected from the video, and some of the text and a small part of the pictures are written by myself.
This article follows the previous article "Android Mobile Application Development ⑤"
Next article 《Android Mobile Application Development ⑦》

One: button control Button

1.1: Introduction to Button

The most contacted controls in our lives should be buttons. In xml, the button button control is derived from TextView, the difference between them is

Button has a default button background, while TextView has no background by default.
The inner text of the button is center-aligned by default, while the TextView is left-aligned by default.
Button will convert English letters to uppercase by default, while TextView will keep the original English capitalization;

1.2: New properties of the button control

Compared with TextView, button adds two new properties:

textaAllCaps attribute: It specifies whether to convert English letters to upper and lower case, true means to automatically convert to upper and lower case, and false means not to convert upper and lower case.
onClick attribute: It is used to take over the user's click action and specifies which method to trigger when the button is clicked. (It is no longer recommended to use, it is recommended to use the listener to be discussed below)

1.3: Button click event and long press event

Listener, which means to specifically monitor the action behavior of the control. Only when the specified action occurs on the control, the listener will trigger the switch to execute the corresponding code logic.

Button controls have two commonly used listeners:

The click listener is set by the setOnClickListener method. The click event fires when the button is held down for less than 500 milliseconds.
The long press listener is set by the setOnLongClickListener method. When the button is pressed for more than 500 milliseconds, a long press event will be triggered

Little knowledge: Press ctrl+alt+f to convert the variable into a global variable.

1.3.1: The method to realize the click event

public class ButtonClickActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView tv_result;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button_click);
        tv_result = findViewById(R.id.tv_result);
        Button btn_click_single = findViewById(R.id.btn_click_single);
        btn_click_single.setOnClickListener(new MyOnClickListener(tv_result));

        Button btn_click_public = findViewById(R.id.btn_click_public);
        btn_click_public.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn_click_public) {
            String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
            tv_result.setText(desc);
        }
    }

    static class MyOnClickListener implements View.OnClickListener {
        private final TextView tv_result;

        public MyOnClickListener(TextView tv_result) {
            this.tv_result = tv_result;
        }

        @Override
        public void onClick(View v) {
            String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
            tv_result.setText(desc);
        }
    }
}

1: Realize by inheriting the listener from a new class

First find the button in the xml file through the findViewById method in the oncreate method of the public class, and then directly call the listener method in the MyOnClickListener class that inherits the listener interface created by yourself.

Note: This method needs to set the tv_result to be modified as a global variable. To set the class you create as a static static class, you can avoid memory leaks.

2: Inherit the listener interface from the public class to implement multi-button management

As shown in the public class in the code, directly inherit View.OnClickListener, and then use this directly after the button's setOnClickListener method to represent the class you are in, so you can directly respond to the click event through the onclick method. For the response of multiple buttons, you can use the if statement in the onclick method to determine which button is clicked.

3: Implemented through the new feature anonymous inner class

Below we use the long press event to illustrate this method

public class ButtonLongClickActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button_long_click);
        TextView tv_result = findViewById(R.id.tv_result);
        Button btn_long_click = findViewById(R.id.btn_long_click);
        btn_long_click.setOnLongClickListener(v -> {
            String desc = String.format("%s 您点击了按钮： %s", DateUtil.getNowTime(), ((Button) v).getText());
            tv_result.setText(desc);
            return true;
        });
    }
}

It is more convenient and quick to directly respond to events through anonymous inner classes.

1.4: Disable and restore buttons

1.4.1: Two states of the button

In actual business, a button usually has two states, that is, an unavailable state and an available state, and their differences in appearance and function are as follows:

Unavailable button: The button is not allowed to be clicked, even if it is clicked, there is no response, and the button text is gray.
Available buttons: The button allows clicking, and clicking the button will trigger a click event, and the button text is normal black.

Whether to allow clicking is controlled by the enabled attribute. When the attribute value is true, it means that clicking is allowed, and when it is false, it means that it is not allowed.

From the above description of the difference, we can see that there are two main differences between the unavailable state and the available state: first, whether to allow clicking; second, the color of the button text. As far as the text color is concerned, the textColor property can be used to set the color in the layout file, or the setTextColor method can be called in the Java code to set the color. As for whether to allow clicking, you need to introduce a new attribute android:enabled. When the attribute value is true, it means that the button is enabled, that is, the button is allowed to be clicked; when the attribute value is false, it means that the button is disabled, that is, the button is not allowed to be clicked. In the Java code, the available state of the button can be set through the setEnabled method (true means enabled, false means disabled).

Two: Image Control

This section introduces the usage of several controls related to image display, including: an image view specially used to display pictures and several zoom-type effects, a button control that supports displaying pictures - an image button, how to display text and on a button control at the same time icons etc.

2.1: Image control Imgaeview

Pictures are usually saved as separate picture files, so you need to put the picture in the res/drawable directory first, and then refer to the resource name of the picture.

2.1.1: Call method

The XML file sets the image resource through the attribute android:src, and the format of the attribute value is "@drawable/image name without extension".

The setImageResource method of the ImageView control can be called in the Java file, and the method parameter format is in the form of "R.drawable. The name of the picture without the extension".

2.1.2: Zoom property

Note: centered display fitCenter is the default zoom type

2.2: Image button ImageButton

The common button control Button is actually a text button, because only text can be displayed on the button, and pictures cannot be displayed, and ImageButton is an image button that displays pictures. Although ImageButton is known as an image button, it does not inherit from Button, but from ImageView. The difference is that ImageButton has a button background.

2.2.1: The difference between ImageButton and Button

Button can display both text and pictures (set the background picture through the setBackgroundResource method), while ImageButton can only display pictures but not text.
The image on the ImageButton can be scaled proportionally, but the image set by the background of the Button will be stretched and deformed, because the background image adopts the fitXY method and cannot be scaled proportionally.
Button can only display a picture on the background, while ImageButton can display pictures in the foreground and background respectively, so as to achieve the effect of superimposing two pictures

2.3: Display images and text on the button at the same time

If you want to place pictures around the text, you can use the button control Button

drawableTop: Specify the picture above the text
drawableBottom: Specify the picture below the text
drawableLeft: Specify the picture on the left side of the text
drawableRight: Specify the picture on the right side of the text
drawablePadding: Specify the spacing between the picture and the text

Below is a button that has both text and an image

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_about"
android:drawablePadding="5dp"
android:text="图标在左"
android:textSize="17sp" />

Android Mobile Application Development Tutorial⑥