基础复习——图像视图ImageView——图像按钮ImageButton——同时展示文本与图像...

绝地灬酷狼 2023-09-28 17:40 23阅读 0赞

![8e65a2ffa12faffbef848b45efabc7a7.png][]

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

(1)在XML文件中，通过属性android:src设置图片资源，属性值格式形如“@drawable/不含扩展名的图片名称”。

(2)在Java代码中，调用setImageResource方法设置图片资源，方法参数格式形如“R.drawable.不含扩展名的图片名称”。

![28ade21b9b94b96cfbb780b4bf7f98f6.png][]

添加了src属性的ImageView标签示例如下：

给图像视图设置图片资源的代码例子如下所示：

// 从布局文件中获取名叫iv\_scale的图像视图

ImageView iv\_scale = findViewById(R.id.iv\_scale); iv\_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源

![f46c06dff69caff8057371a8f02e12b9.png][]

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

![c39ba3639c30c780cd2e0ed0249741b7.png][]

![1db02ed868603f49b478d57b8eb23a92.png][]

布局：

<?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">
    
        <ImageView
            android:id="@+id/iv_scale"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/apple" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/btn_fitCenter"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="fitCenter"
                android:textColor="#000000"
                android:textSize="14sp" />
    
            <Button
                android:id="@+id/btn_centerCrop"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="centerCrop"
                android:textColor="#000000"
                android:textSize="14sp" />
    
            <Button
                android:id="@+id/btn_centerInside"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="centerInside"
                android:textColor="#000000"
                android:textSize="14sp" />
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/btn_center"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="center"
                android:textColor="#000000"
                android:textSize="14sp" />
    
            <Button
                android:id="@+id/btn_fitXY"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="fitXY"
                android:textColor="#000000"
                android:textSize="14sp" />
    
            <Button
                android:id="@+id/btn_fitStart"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="fitStart"
                android:textColor="#000000"
                android:textSize="14sp" />
    
            <Button
                android:id="@+id/btn_fitEnd"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="fitEnd"
                android:textColor="#000000"
                android:textSize="14sp" />
    
        </LinearLayout>
    
    </LinearLayout>

![a80729258c4a0a2252a6d21699f9afca.png][]

![6c5532d7e1c3e4565e34c4f0c03f264c.png][]

代码：

package com.example.myapplication;
    
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    
    public class NextActivity extends AppCompatActivity implements View.OnClickListener
    {
    
        private ImageView iv_scale; // 声明一个图像视图的对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_next);
    
    
            // 从布局文件中获取名叫iv_scale的图像视图
            iv_scale = findViewById(R.id.iv_scale);
    
    
            // 下面通过七个按钮，分别演示不同缩放类型的图片缩放效果
            findViewById(R.id.btn_center).setOnClickListener(this);
            findViewById(R.id.btn_fitCenter).setOnClickListener(this);
            findViewById(R.id.btn_centerCrop).setOnClickListener(this);
            findViewById(R.id.btn_centerInside).setOnClickListener(this);
            findViewById(R.id.btn_fitXY).setOnClickListener(this);
            findViewById(R.id.btn_fitStart).setOnClickListener(this);
            findViewById(R.id.btn_fitEnd).setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v)      // 点击事件的处理方法
        { 
            iv_scale.setImageResource(R.drawable.apple); // 设置图像视图的图片资源
            
            if (v.getId() == R.id.btn_center)
            {
                // 将缩放类型设置为“按照原尺寸居中显示”
                iv_scale.setScaleType(ImageView.ScaleType.CENTER);
            }
            else if (v.getId() == R.id.btn_fitCenter) 
            {
                // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图中间”
                iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);
            } 
            else if (v.getId() == R.id.btn_centerCrop) 
            {
                // 将缩放类型设置为“缩放图片使其充满视图，并位于视图中间”
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP);
            }
            else if (v.getId() == R.id.btn_centerInside) 
            {
                // 将缩放类型设置为“保持宽高比例，缩小图片使之位于视图中间(只缩小不放大)”
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            }
            else if (v.getId() == R.id.btn_fitXY) 
            {
                // 将缩放类型设置为“缩放图片使其正好填满视图(图片可能被缩放变形)”
                iv_scale.setScaleType(ImageView.ScaleType.FIT_XY);
            } 
            else if (v.getId() == R.id.btn_fitStart)
            {
                // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图上方或左侧”
                iv_scale.setScaleType(ImageView.ScaleType.FIT_START);
            }
            else if (v.getId() == R.id.btn_fitEnd) 
            {
                // 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图下方或右侧”
                iv_scale.setScaleType(ImageView.ScaleType.FIT_END);
            }
        }
    }

![cbfb62f8d0d188d06cc4f32b73ce0b24.png][]

![4e8c9550498546ef28333a0eec0d8deb.png][]

=================================================================================

![0d8edfce8b237939659fa7bb5bcc3f6d.png][]

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

ImageButton和Button之间的区别有：

(1)Button既可显示文本也可显示图片，ImageButton只能显示图片不能显示文本。

(2)ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形。

(3)Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片叠加的效果。

布局：

![d2bff183797f405410417cd40857e0c9.png][]

![a8f8eb5acde0783251955d86001d7ba0.png][]

在某些场合，有的字符无法由输入法打出来，或者某些文字以特殊字体展示，就适合适合先切图再放到ImageButton。

例如：开平方符号

![39e5e679d7d21d8a44017ebe4e16f439.png][]，等等。

ImageButton与ImageView之间的区别有：

(1)ImageButton有默认的按钮背景，ImageView默认无背景。

(2)ImageButton默认的缩放类型为center，而ImageView默认的缩放类型为fitCenter。

====================================================================================================

![947226ec046fb5d0528b778572f49ecb.png][]

同时展示文本与图像的可能途径包括：

(1)利用LinearLayout对ImageView和TextView组合布局。

(2)通过按钮控件Button的drawable\*\*\*属性设置文本周围的图标。

drawableTop：指定文字上方的图片。

drawableBottom：指定文字下方的图片。

drawableLeft：指定文字左边的图片。

drawableRight：指定文字右边的图片。

drawablePadding：指定图片与文字的间距。

![12e9003fd5ef97ca871f3148f003bc7a.png][]

布局：

![733473136512267e16cbc19cc1315a32.png][]

![666f64114ed9ee5848c24cc756972655.png][]

[8e65a2ffa12faffbef848b45efabc7a7.png]: https://img-blog.csdnimg.cn/img_convert/8e65a2ffa12faffbef848b45efabc7a7.png
[28ade21b9b94b96cfbb780b4bf7f98f6.png]: https://img-blog.csdnimg.cn/img_convert/28ade21b9b94b96cfbb780b4bf7f98f6.png
[f46c06dff69caff8057371a8f02e12b9.png]: https://img-blog.csdnimg.cn/img_convert/f46c06dff69caff8057371a8f02e12b9.png
[c39ba3639c30c780cd2e0ed0249741b7.png]: https://img-blog.csdnimg.cn/img_convert/c39ba3639c30c780cd2e0ed0249741b7.png
[1db02ed868603f49b478d57b8eb23a92.png]: https://img-blog.csdnimg.cn/img_convert/1db02ed868603f49b478d57b8eb23a92.png
[a80729258c4a0a2252a6d21699f9afca.png]: https://img-blog.csdnimg.cn/img_convert/a80729258c4a0a2252a6d21699f9afca.png
[6c5532d7e1c3e4565e34c4f0c03f264c.png]: https://img-blog.csdnimg.cn/img_convert/6c5532d7e1c3e4565e34c4f0c03f264c.png
[cbfb62f8d0d188d06cc4f32b73ce0b24.png]: https://img-blog.csdnimg.cn/img_convert/cbfb62f8d0d188d06cc4f32b73ce0b24.png
[4e8c9550498546ef28333a0eec0d8deb.png]: https://img-blog.csdnimg.cn/img_convert/4e8c9550498546ef28333a0eec0d8deb.png
[0d8edfce8b237939659fa7bb5bcc3f6d.png]: https://img-blog.csdnimg.cn/img_convert/0d8edfce8b237939659fa7bb5bcc3f6d.png
[d2bff183797f405410417cd40857e0c9.png]: https://img-blog.csdnimg.cn/img_convert/d2bff183797f405410417cd40857e0c9.png
[a8f8eb5acde0783251955d86001d7ba0.png]: https://img-blog.csdnimg.cn/img_convert/a8f8eb5acde0783251955d86001d7ba0.png
[39e5e679d7d21d8a44017ebe4e16f439.png]: https://img-blog.csdnimg.cn/img_convert/39e5e679d7d21d8a44017ebe4e16f439.png
[947226ec046fb5d0528b778572f49ecb.png]: https://img-blog.csdnimg.cn/img_convert/947226ec046fb5d0528b778572f49ecb.png
[12e9003fd5ef97ca871f3148f003bc7a.png]: https://img-blog.csdnimg.cn/img_convert/12e9003fd5ef97ca871f3148f003bc7a.png
[733473136512267e16cbc19cc1315a32.png]: https://img-blog.csdnimg.cn/img_convert/733473136512267e16cbc19cc1315a32.png
[666f64114ed9ee5848c24cc756972655.png]: https://img-blog.csdnimg.cn/img_convert/666f64114ed9ee5848c24cc756972655.png