Android ImageView，使用Kotlin的ImageButton

In this tutorial, we’ll discuss and implement ImageView and ImageButton in our android application using Kotlin code.

在本教程中，我们将使用Kotlin代码在android应用程序中讨论和实现ImageView和ImageButton。

什么是Android ImageView？ (What is Android ImageView?)

ImageView is a subclass of the View class in Android. It is used to display images onto the screen.

ImageView是Android中View类的子类。 它用于在屏幕上显示图像。

The images can be a bitmap or a drawable resource file.

图像可以是位图或可绘制资源文件。

ImageView XML代码 (ImageView XML Code)

The basic syntax for an ImageView is:

ImageView的基本语法为：

The primary attributes of an ImageView are as follows:

ImageView的主要属性如下：

• The android:src attribute is used to set a drawable resource file.
  android:src属性用于设置可绘制资源文件。
• android:background is used to set the background of the ImageView.
  android:background用于设置ImageView的背景。
• The android:scaleType is used to set the cropping/fitting style of the image.
  android:scaleType用于设置图像的裁剪/调整样式。

用Kotlin代码创建ImageView (Creating ImageView in Kotlin Code)

We can create an ImageView object in the following Kotlin code.

我们可以使用以下Kotlin代码创建一个ImageView对象。

val imageView = ImageView(this)

this represents the context in which the ImageView is visible. It can be activity/fragment.

this表示ImageView可见的上下文。 它可以是活动/片段。

To set a drawable on an ImageView programmatically we use:

要以编程方式在ImageView上设置可绘制对象，我们使用：

imageView.setImageResource(R.drawable.drawable_id)

什么是Android ImageButton？ (What is Android ImageButton?)

An ImageButton is a subclass of an ImageView. It’s a Button + ImageView. An ImageButton cannot hold text.

ImageButton是ImageView的子类。 这是一个Button + ImageView。 ImageButton不能容纳文本。

All the attributes for the ImageView are applicable to an ImageButton too.

ImageView的所有属性也适用于ImageButton。

Just like Buttons, on an ImageButton we can set the OnClickListener as well as the OnLongClickListener event.

就像按钮一样，在ImageButton上，我们可以设置OnClickListener以及OnLongClickListener事件。

For an in-depth view of the XML attributes of the ImageView and ImageButton refer to the Android ImageView, ImageButton Tutorial.

要深入了解ImageView和ImageButton的XML属性，请参阅Android ImageView，ImageButton教程 。

多屏密度 (Multiple Screen Densities)

Screen density is different for different types of phones. A drawable file applicable for a screen size of 4.5 inches can get blurred when seen on a screen size of 5.5 or 6 inches. Hence, in order to keep the image intact for all kinds of devices, we can create different drawable folders.

对于不同类型的手机，屏幕密度是不同的。 当屏幕尺寸为5.5或6英寸时，适用于4.5英寸屏幕的可绘制文件可能会变得模糊。 因此，为了使各种设备的图像保持完整，我们可以创建不同的可绘制文件夹。

The drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, and drawable-xxhdpi are created for low, medium, high, extra high, and extra-extra high densities.

为低，中，高，超高和超高密度创建了drawable-ldpi，drawable-mdpi，drawable-hdpi，drawable-xhdpi和drawable-xxhdpi。

Running an application on the device, the Android SDK automatically detects the screen size and density and uses the appropriate image resource files from the drawable folder.

Android SDK在设备上运行应用程序后，会自动检测屏幕尺寸和密度，并使用可绘制文件夹中的相应图像资源文件。

如何生成不同屏幕密度的图像文件？ (How to Generate Image Files for Different Screen Densities?)

We can use Android Asset Studio to create image resources for different densities.

我们可以使用Android Asset Studio创建不同密度的图像资源。

Alternatively, install the Android Drawable Importer plugin in Android Studio from the Preferences -> Plugins.

或者，从首选项->插件在Android Studio中安装Android Drawable Importer插件。

Go to “drawable | Batch Drawable” and import the images to have the proper image for every screen density.

转到“可绘制| 批处理可绘制”并导入图像，以适合每个屏幕密度的图像。

Set the density type for the current image and drawables for all the densities would be generated for the file.

设置当前图像的浓度类型，并为文件生成所有浓度的可绘制对象。

Android ImageView ImageButton Kotlin项目 (Android ImageView ImageButton Kotlin Project)

We’ve added three sample images and used Drawable Importer to create files for each drawable density.

我们添加了三个示例图像，并使用Drawable Importer为每个可绘制密度创建文件。

XML布局代码 (XML Layout Code)

The code for the activity_main.xml class is given below.

下面给出了activity_main.xml类的代码。

We’ve used a FrameLayout. The ImageView occupies the complete screen and the ImageButton is set at the bottom of the layout.

我们使用了FrameLayout 。 ImageView占据整个屏幕，并且ImageButton设置在布局的底部。

Kotlin密码 (Kotlin Code)

The code for the MainActivity.kt Kotlin’s class is given below.

下面给出了MainActivity.kt Kotlin类的代码。

package net.androidly.androidiyimageviewsbuttons

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.view.View
import android.widget.ImageButton
import android.widget.ImageView
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), View.OnClickListener {


    val sampleDrawables = intArrayOf(R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3)

    var i = 0

    val scaleType = arrayListOf(ImageView.ScaleType.CENTER_CROP, ImageView.ScaleType.FIT_CENTER, ImageView.ScaleType.CENTER_CROP, ImageView.ScaleType.FIT_XY)

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


        imageView.setOnClickListener(this)
        imageButton.setOnClickListener(this)
    }

    override fun onClick(p0: View?) {
        when (p0) {
            is ImageButton -> if (i == sampleDrawables.size) {
                i = 0
                imageView.setImageResource(sampleDrawables[i])
                imageView.colorFilter = null
                i++
            } else {
                imageView.setImageResource(sampleDrawables[i])
                imageView.colorFilter = null

                i++
            }
            is ImageView -> {
                imageView.setColorFilter(ContextCompat.getColor(this, R.color.myColor))
                imageView.scaleType = scaleType.shuffled().take(1)[0]
            }


            else -> Toast.makeText(applicationContext, "Neither ImageView nor ImageButton", Toast.LENGTH_LONG).show()
        }
    }


}

• In the above code, we’ve created an array of Drawables and an ArrayList of ScaleType.
  在上面的代码中，我们创建了一个Drawables数组和一个ScaleType的ArrayList。
• We’ve implemented the View.OnClickListener on the Activity class and set the OnClickListener on both ImageView and ImageButton.
  我们已经在Activity类上实现了View.OnClickListener，并且在ImageView和ImageButton上都设置了OnClickListener。
• Thanks to Kotlin Android Extensions, we don’t need to use findViewById to hook the XML ids in our Kotlin Activity.
  多亏了Kotlin Android扩展，我们不需要使用findViewById即可在我们的Kotlin活动中挂钩XML ID。
• We’ve used a when statement to check the type of the View that’s clicked to trigger the action.
  我们使用了when语句来检查单击以触发操作的View的类型。
• The ImageButton case must be kept above ImageView since every ImageButton is an ImageView. If it was kept below, the ImageButton click listener would have triggered the ImageView block in the when statement.
  由于每个ImageButton都是一个ImageView，因此必须将ImageButton的情况保留在ImageView上方。 如果将其保留在下面，则ImageButton单击侦听器将在when语句中触发ImageView块。
• On ImageButton click, we set the next drawable on the ImageView from the array.
  单击ImageButton时，我们在数组中的ImageView上设置下一个可绘制对象。
• On ImageView click, we set the color filter over the ImageView using the colorFilter setter property. Also, we set a random scaleType on the ImageView from the arrayList by shuffling the array and taking the first element.
  单击ImageView时，我们使用colorFilter setter属性在ImageView上设置滤色器。 同样，我们通过改组数组并获取第一个元素，在arrayList的ImageView上设置一个随机的scaleType。

应用输出 (App Output)

The output of the above application in action is given below.

下面给出了上面应用程序的输出。

The scale type changes when the ImageView is clicked.

单击ImageView时，缩放比例类型会更改。

AndroidIyImageViewsButtons AndroidIyImageViewsButtons

To reduce the download size, we’ve removed the xxhdpi and xhdpi image resource files. Try building them using the Drawable Importer Plugin!

为了减小下载大小，我们删除了xxhdpi和xhdpi图像资源文件。 尝试使用Drawable Importer插件构建它们！

翻译自: https://www.journaldev.com/150/android-imageview-imagebutton-kotlin