Android Studio入门之图像显示解析及实战（附源码超详细必看）（包括图像视图、图像按钮、同时展示文本与图像）

爱被打了一巴掌 2023-09-30 16:27 3阅读 0赞

## 图像视图ImageView ##

显示文本用到了文本视图TextView，显示图像则用到图像视图ImageView，由于图像通常保存为单独的图片文件，因此需要把图片放到res/drawable目录，然后再去引用该图片的资源名称。并且ImageView本身默认图片居中显示，不管图片有多大抑或有多小，图像视图都会自动缩放图片，使之刚好够到ImageView的边界。通过属性android:scaleType定义，未定义即默认其值为fitCenter多种缩放类型如下

![f6605ead3bf5490fba80b122c86850bd.png][]

效果图如下 点击图中的按钮可以将苹果置于不同的位置

![9ca80de9a2e14ba398c9ab34d1e96319.png][]

![dd3b7bc647dc4c3fbf60394c5cc3930c.png][]

![134b91cc6f354718a969381147e57b6f.png][]

### ImageScaleActivity类代码如下 ###

package com.example.chapter03;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    // 活动类直接实现点击监听器的接口View.OnClickListener
    public class ImageScaleActivity extends AppCompatActivity implements View.OnClickListener {
        private ImageView iv_scale; // 声明一个图像视图的对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_image_scale);
            // 从布局文件中获取名叫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);
            }
        }
    }

### activity\_image\_scaleXML代码如下 ###

<?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>

## 图像按钮ImageButton ##

常见的按钮控制是Button，其实是文本按钮，因为按钮上面只能显示文字，不能显示图片，ImageButton才是显示图片的图像按钮。ImageButton与Button的差异如下

> 1：Button既可显示文本也可以显示图片，而ImageButton只能显示图片不能显示文本
> 
> 2：ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形，因为背景图采取fitXY方式，无法按比例缩放
> 
> 3：Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片的叠加的效果

因此，对于某些输入法打不出来的字符，以及特殊字体显示的字符串，就适合用ImageButton ，如图中的开根号就很难打出来显示出来。

![b9029c7b0d9d45588aac3d1b07c67797.png][]

### activity\_image\_buttonXML代码如下 ###

## ImageButtonActivity类代码如下 ##

package com.example.chapter03;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    
    public class ImageButtonActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_image_button);
        }
    }

## 同时展示文本与 图像 ##

现在有了Button可在按钮上显示文字，又有ImageButton可在按钮上显示图像，通过按钮控件Button就能实现，原来Button悄悄提供了几个与图标有关的属性，通过这些属性即可指定文字旁边的图标。 有关属性如下 效果如下图

> drawableTop:指定文字上方的图片
> 
> drawableBottom：指定文字下方的图片
> 
> drawableLeft 指定文字左边的图片
> 
> drawableRight 指定文字右边的图片
> 
> drawablePadding 指定图片与文字的间距

![771ca30508304aea83fec82766681a15.png][]

### activity\_image\_textXML文件代码如下 ###

### ImageTextActivity类代码如下 ###

package com.example.chapter03;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class ImageTextActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_image_text);
        }
    
    }

[f6605ead3bf5490fba80b122c86850bd.png]: https://img-blog.csdnimg.cn/f6605ead3bf5490fba80b122c86850bd.png
[9ca80de9a2e14ba398c9ab34d1e96319.png]: https://img-blog.csdnimg.cn/9ca80de9a2e14ba398c9ab34d1e96319.png
[dd3b7bc647dc4c3fbf60394c5cc3930c.png]: https://img-blog.csdnimg.cn/dd3b7bc647dc4c3fbf60394c5cc3930c.png
[134b91cc6f354718a969381147e57b6f.png]: https://img-blog.csdnimg.cn/134b91cc6f354718a969381147e57b6f.png
[b9029c7b0d9d45588aac3d1b07c67797.png]: https://img-blog.csdnimg.cn/b9029c7b0d9d45588aac3d1b07c67797.png
[771ca30508304aea83fec82766681a15.png]: https://img-blog.csdnimg.cn/771ca30508304aea83fec82766681a15.png