Android学习笔记（八）：ImageView加载图片与ImageButton图形按钮

目录

 一、ImageView显示图片

1、xml文件中添加图片

2、java逻辑中设置图片

二、ImageView图像的缩放 

1、matrix

2、fitXY

3、fitStart/fitCenter/fitEnd 

4、center/centerInside/centerCrop

三、ImageButton图形按钮

四、Button实现图片与文字结合的按钮

五、总结

---

 一、ImageView显示图片

        当我们想在应用中加载显示图片，就可以使用这个模块。首先我们需要有一张图片，并把它放到 app\src\main\res\drawable\ 文件路径下。需要注意的是：图片名称使用全小写字母。比如我的图片名是android.png。

1、xml文件中添加图片

    <ImageView
        android:id="@+id/image_android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/android" />

        如上代码所示，在xml中，我们添加ImageView模块，设置宽高，以及与上级顶部的间距，然后通过src这个属性添加图片，android就是图片名。效果如下所示

2、java逻辑中设置图片

public class MainActivity extends AppCompatActivity {
    ImageView mImageAndroid;

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

    private void initUI() {
        // 注意：添加的图片名不要包含大写字母；
        mImageAndroid = findViewById(R.id.image_android);
        mImageAndroid.setImageResource(R.drawable.android);
    }
}

        如代码所示，先通过findViewById设置布局，然后利用setImageResource(R.drawable.android)加载图片对应的图片。

二、ImageView图像的缩放 

        我们可以通过scaleType属性设置图像的缩放，缩放类型有：

        我认为通过图像比较的方式能让你更容易理解每个类型的含义。代码如下，我设置了两个ImageView模块，一个高度为200dp，一个match_parent；然后设置不同的scaleType。

    <ImageView
        android:id="@+id/image_android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/android"
        android:scaleType="matrix"/>

    <ImageView
        android:id="@+id/image_android1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:src="@drawable/android"
        android:scaleType="matrix"/>

        也可以通过java逻辑实现图片缩放，代码如下

    private void initUI() {
        // 注意：添加的图片名不要包含大写字母；
        mImageAndroid = findViewById(R.id.image_android);
        mImageAndroid.setImageResource(R.drawable.android);
        mImageAndroid.setScaleType(ImageView.ScaleType.MATRIX);
    }

1、matrix

        可以看到，matrix不会改变原图片的尺寸大小，从图片的左上部分开始，只显示ImageView视图大小的内容。

2、fitXY

        从效果来看，fitXY是将图片完整地填充在ImageView视图中，会改变图片的宽高比例。

3、fitStart/fitCenter/fitEnd 

         把这三个属性放在一起比较，会更直观。可以看到，这三种属性以及fitXY都会把图片完整地显示在视图中，只是缩放比例和位置不同。fitXY会根据视图改变图片的宽高比例填充满整个视图；fitStart/fitCenter/fitEnd这三个属性则会根据视图的宽高将图片等比例地缩放，以填充满某个方向，通俗理解就是，在图片不改变宽高比例的前提下，尽可能大的完整地显示在视图中；而后，fitStart会将图片放在视图的左上方；fitCenter会放在视图的中心位置；fitEnd会放在右下方。

4、center/centerInside/centerCrop

         center不会改变图片的大小尺寸，在视图中显示图片居中部分，裁剪掉多余部分，与matrix类似，区别就是显示的部位不同；

        从这里看，centerInside跟fitCenter效果一样，显示完整图像，不改变宽高比，占满某一方向，位置居中；区别就在于，centerInside不可以放大图片，即当图片尺寸小于视图时，就直接将图片位于中心，不进行任何缩放，如下图所示。

        centerCrop可以这样理解，将图片从很大的尺寸等比缩小到某一方向占满视图，其余部分就裁剪掉；

三、ImageButton图形按钮

        这里简单介绍一下ImageButton，它就是一个显示图片的按钮，与Button的区别就是：

1、ImageButton继承与ImageView；

2、Button可以显示图片也可以显示文本，而ImageButton只能显示图片；

3、ImageButton中的图片可以按比例缩放；

4、Button只能设置一张图片，而ImageButton可以设置前景和背景两张图片重叠的效果

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/android1"
        android:text="@string/app_name" />

四、Button实现图片与文字结合的按钮

        如上代码以及图所示，可以看到，可以通过Button实现图和文字结合的按钮；图像在文本内容的位置可以通过drawableLeft(左)/drawableRight(右)/drawableTop(上)/drawableBottom(下)等进行设置相对位置。

五、总结

        通过本章学习，我们掌握ImageView显示图片，以及将图片进行各种缩放显示，也简单了解了一下ImageButton，知道它是一个可以显示图片的按钮，了解其与Button的区别，以及通过Button实现图片与文字结合的按钮。

        对于Button和ImageButton，下一章我将利用一个小项目来加深大家对它们的理解和使用。也回顾一下之前学习的内容。