Kotlin笔记(37) — ImageView用法

前言

在Android开发过程中，我们常回用到一个展示图片的控件——ImageView。接下来就让我们学习下ImageView的使用吧。

今天涉及知识：

1. ImageView设置图片的方法
2. ImageView图片展示缩放类型
3. ImageView的scaleType在Activity中的使用
4. 效果图和项目结构图

先来波效果图

效果图.gif

一.ImageView设置图片的方法

ImageView设置图片的方法如下：

        //设置resource
        mImv.imageResource = R.mipmap.laday

        //设置drawable
        var drawable:Drawable=resources.getDrawable(R.mipmap.laday,null)
        mImv.setImageDrawable(drawable)

        //设置bitmap
        var bitmap:Bitmap=BitmapFactory.decodeResource(resources, R.mipmap.laday)
        mImv.setImageBitmap(bitmap)

二.ImageView图片展示缩放类型

缩放类型如下表：

ScaleType拉伸类型	说明
ScaleType.FIT_START	图片拉伸使之位于视图上部
ScaleType.FIT_END	图片拉伸使之位于视图下部
ScaleType.FIT_XY	不按比例缩放图片，目标是把图片塞满整个View(图片可能被拉伸)
ScaleType.FIT_CENTER	把图片按比例扩大/缩小到View的宽度，居中显示
ScaleType.CENTER	保持图片原尺寸并位于视图中间，当图片长/宽超过View的长/宽，则截取图片的居中部分显示
ScaleType.CENTER_CROP	按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)
ScaleType.CENTER_INSIDE	将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽

三.ImageView的scaleType在Activity中的使用

ImageView的居中设置有很多，下面给出ImageView关于居中ScaleType在Activity中使用的代码：

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
open class MainActivity : AppCompatActivity(), View.OnClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(com.kotlintest.R.layout.activity_main)

        initData()
        setListener()
    }

    private fun initData() {

        //设置resource
        mImv.imageResource = R.mipmap.laday

        //设置drawable
        var drawable:Drawable=resources.getDrawable(R.mipmap.laday,null)
        mImv.setImageDrawable(drawable)

        //设置bitmap
        var bitmap:Bitmap=BitmapFactory.decodeResource(resources, R.mipmap.laday)
        mImv.setImageBitmap(bitmap)
        LogUtil.i("======2=====")
    }

    private fun setListener() {
        mBtnTest.setOnClickListener(this@MainActivity)
        mBtn1.setOnClickListener(this@MainActivity)
        mBtn2.setOnClickListener(this@MainActivity)
        mBtn3.setOnClickListener(this@MainActivity)
        mBtn4.setOnClickListener(this@MainActivity)
    }

    override fun onClick(v: View) {
        ImageView.ScaleType.FIT_XY
        ImageView.ScaleType.FIT_START
        ImageView.ScaleType.FIT_END

       when(v.id){
           R.id.mBtnTest->toast("=====han")
           R.id.mBtn1->mImv.scaleType=ImageView.ScaleType.FIT_CENTER  //fitCenter
           R.id.mBtn2->mImv.scaleType=ImageView.ScaleType.CENTER  //center
           R.id.mBtn3->mImv.scaleType=ImageView.ScaleType.CENTER_CROP  //centerCrop
           R.id.mBtn4->mImv.scaleType=ImageView.ScaleType.CENTER_INSIDE  //centerInside
       }
    }
}

布局文件activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_f2f2f2"
    tools:context=".ui.MainActivity">

    <TextView
        android:id="@+id/mTvTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:text="测试"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/mBtnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="测试"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTvTest" />

    <ImageView
        android:id="@+id/mImv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mBtnTest" />


    <Button
        android:id="@+id/mBtn1"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="fit_center"
        app:layout_constraintEnd_toStartOf="@+id/mBtn2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mImv" />

    <Button
        android:id="@+id/mBtn2"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/mBtn1"
        app:layout_constraintTop_toTopOf="@+id/mBtn1" />


    <Button
        android:id="@+id/mBtn3"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="center_crop"
        app:layout_constraintEnd_toStartOf="@+id/mBtn4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mBtn1" />

    <Button
        android:id="@+id/mBtn4"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="center_inside"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/mBtn3"
        app:layout_constraintTop_toTopOf="@+id/mBtn3" />
</androidx.constraintlayout.widget.ConstraintLayout>

四.效果图和项目结构图

效果图.gif 项目结构图.png

ok,今天的内容就介绍到这里了，谢谢大家。