当前位置：首页 > news >正文

【Android】-- 如何使用按钮和图片（点击事件、长按点击、同时展示文本和图像、ImageView）

news 来源：原创 2024/5/20 23:50:38

一、按钮控件Button

按钮控件button由TextView派生而来，它们的区别：

按钮控件的新增属性

二、点击事件和长按事件

有两种常用的监听器：

1、点击事件

2、长按点击事件

三、禁用和恢复按钮

按钮通常有两种状态，即不可用状态与可用状态，区别如下：

四、图像视图ImageView

图像视图展示的图片通常位于res/drawable目录，设置方式有两种：

图像视图的缩放类型

五、图像按钮ImageButton

ImageButton和Button的区别：

ImageButton的使用场合

ImageButton和ImageView之间的区别有：

六、同时展示文本与图像

实现方式：

一、按钮控件Button

按钮控件button由TextView派生而来，它们的区别：

Button拥有默认的按钮背景，而TextView默认无背景。
Button的内部文本默认居中对齐，而TextView的内部文本默认靠左对齐。
Button默认将英文字母转为大写，而TextView保持原始大小写。

按钮控件的新增属性

与TextView相比，Button增加两个新属性：

textAllCaps属性，指定了是否将英文字母转为大写，为true是表示自动转为大写，false表示不自动，默认为true。
onClick属性，它用来接管用户的点击动作，指定了点击按钮时要触发哪个方法。

例:

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textColor="@color/black"
        android:textSize="17sp"/>

二、点击事件和长按事件

监听器：专门监听控件的动作行为，只有控件发生了指定的动作，监听器才会触发开关去执行对应的代码逻辑。

有两种常用的监听器：

点击监听器：通过setOnClickListener方法设置，按钮被按住少于500ms时，触发点击事件。
长按监听器：通过setOnLongClickListener方法设置，按钮被按住超过500ms，触发。

1、点击事件

例：

XML

   <Button
        android:id="@+id/btn_click_single"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击事件"
        android:textColor="#000000"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="15sp"
        android:text="查看点击结果"/>

java

public class ButtonClickActivity extends AppCompatActivity {
    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);//保存id为tv_result的视图
        Button btn_click_single = findViewById(R.id.btn_click_single);
        btn_click_single.setOnClickListener(new MyOnClickListener(tv_result));//监听器
    }
    static class MyOnClickListener implements View.OnClickListener{
        private final TextView tv_result;
        public MyOnClickListener(TextView tv_result){//构造函数
            this.tv_result = tv_result;
        }
        public void onClick(View v){
            String desc = String.format("您点击了按钮");
            tv_result.setText(desc);
        }
    }
}

点击事件按钮

2、长按点击事件

例：

xml文件同上；

java

public class ButtonClickActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button_click);

        TextView tv_result = findViewById(R.id.tv_result);
        Button btn_click_single = findViewById(R.id.btn_click_single);
        btn_click_single.setOnLongClickListener(v -> {//v -> 内部匿名类的替换形式
            String desc = String.format("您长按点击了按钮");
            tv_result.setText(desc);
            return true;//返回true则表示消耗掉长按，不再往上级视图传递，为false则长按会涉及到上级视图
        });
    }
}

三、禁用和恢复按钮

按钮通常有两种状态，即不可用状态与可用状态，区别如下：

不可用按钮：按钮不允许点击，即使点击也没有反应，同时按钮文字为灰色；
可用按钮：允许点击，点击触发点击事件，同时按钮文字为正常。

是否允许点击由enabled属性控制，属性值为true时表示允许点击，false则不允许。

例：

xml

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_enable"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="启用按钮"
            android:textColor="#000000"
            android:textSize="17sp"/>
        <Button
            android:id="@+id/btn_disable"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="禁用按钮"
            android:textColor="#000000"
            android:textSize="17sp"/>
    </LinearLayout>
    <Button
        android:id="@+id/btn_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮"
        android:textColor="#000000"
        android:textSize="17sp"
        android:enabled="false"/>
    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="你点击了按钮"
        android:textColor="#000000"
        android:textSize="17sp"/>

java


public class ButtonEnableActivity extends AppCompatActivity implements View.OnClickListener {
    private TextView tv_result;
    private Button btn_test;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button_enable);

        Button btn_enable = findViewById(R.id.btn_enable);
        Button btn_disable = findViewById(R.id.btn_disable);
        btn_test = findViewById(R.id.btn_test);
        tv_result = findViewById(R.id.tv_result);

        btn_enable.setOnClickListener(this);
        btn_disable.setOnClickListener(this);
        btn_test.setOnClickListener(this);

    }
    public void onClick(View v){
        switch (v.getId()){
            case R.id.btn_enable:
                btn_test.setEnabled(true);
                break;
            case R.id.btn_disable:
                btn_test.setEnabled(false);
                break;
            case R.id.btn_test:
                String desc = String.format("点击了按钮");
                tv_result.setText(desc);
                break;
        }
    }

    @Override
    public void onPointerCaptureChanged(boolean hasCapture) {
        super.onPointerCaptureChanged(hasCapture);
    }
}

四、图像视图ImageView

图像视图展示的图片通常位于res/drawable目录，设置方式有两种：

在XML文件中，通过属性android：src设置图片资源，属性值格式形如：@drawable/图片名称（无拓展名）
在java代码调用setImageResource设置图片资源，格数如：R.drawable.图片名称（无拓展名）

例:

xml

    <ImageView
        android:id="@+id/iv_scale"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_marginTop="5dp"/>

java

public class ImageScaleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_scale);
        ImageView iv_scale = findViewById(R.id.iv_scale);
        iv_scale.setImageResource(R.drawable.mc);
    }
}

图像视图的缩放类型

ImageView本身默认图片居中显示，若要改变图片的显示方式，通过scaleType属性设定，属性取值如下：

java类中设置

iv_scale.setScaleType(ImageView.ScaleType.CENTER);

xml

android:scaleType="center"

五、图像按钮ImageButton

ImageButton是显示图片的图像按钮，但它继承自ImageView，而非继承Button。

ImageButton和Button的区别：

Button既可显示文本也可显示图片，ImageButton只能显示图片不能显示文本。
Button通过背景设置的图像会拉伸变形，ImageButton的图像可按比例缩放。
Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示，可实现两张图片叠加效果。

ImageButton的使用场合

在某些情况，有的字符无法由输入法打出来，或某些字体以特殊字体展示。

ImageButton和ImageView之间的区别有：

ImageButton有默认的按钮背景，ImageView默认无背景。
ImageButton默认的缩放类型为center，ImageView默认为fitCenter。

六、同时展示文本与图像

实现方式：

利用LinearLayout对ImageView和TextView组合布局。
通过按钮控件Button的drawable属性设置文本周围的图标。
drawableTop：指定文字上方的图片。
drawableBottom：指定文字下方的图片。
drawableLeft：文字左边的图片。
drawableRight：文字右边的图片。
drawablePadding：图片与文字的间距。

例：

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="图标在左"
        android:drawableLeft="@drawable/ic_launcher_background"/>