3.Android学习之常用UI组件（二）

目录

3.常用UI组件（二）

4.图像类组件

4-1.图像视图（ImageView）

4-2.网格视图（GridView）

5.列表类组件

5-1.下拉列表框（Spinner）

5-2.列表视图（ListView）

6.难点解答

6-1.设置图片按钮背景透明

6-2.普通按钮与图片按钮的区别

---

3.常用UI组件（二）

4.图像类组件

图像视图ImageView：用于显示图像的组件

网格视图GridView：用于按照行、列的方式来显示多个元素（如图片、文字等）的组件

4-1.图像视图（ImageView）

用于在屏幕中显示任何Drawable对象，通常用来显示图片。

在布局文件中添加图像视图，可以使用<ImageView>标记来实现，基本语法格式如下：

<ImageView
           属性列表
           >
</ImageView>

注：在使用ImageView组件显示图像时，通常将要显示的图片放置在res\drawable或者res\mipmap目录中

ImageView组件支持的常用XML属性如表：

XML 属性	描述
android:adjustViewBounds	设置ImageView组件是否调整自己的边界来保持所显示图片的长宽比
android:maxHeight	设置ImageView组件的最大高度，需要设置android:adjustViewBounds属性值为true，否则不起作用
android:maxWidth	设置ImageView组件的最大宽度，需要设置android:adjustViewBounds属性值为true，否则不起作用
android:scaleType	设置所显示的图片如何缩放或移动以适应ImageView的大小，其属性值可以是:matrix（使用matrix方式进行缩放）、fitXY（对图片横向、纵向独立缩放，使该图片完全适应于ImageView，图片的纵横比可能会改变）、fitStart（保持纵横比缩放图片，直到该图片能完全显示在ImageView中，缩放完成后该图片放在ImageView的左上角）、fitCenter（保持纵横比缩放图片，直到该图片能完全显示在ImageView中，缩放完成后该图片放在ImageView的中间）、fitEnd（保持纵横比缩放图片，直到该图片能完全显示在ImageView中，缩放完成后该图片放在ImageView的右下角）、center（把图片放在ImageView的中间，但不进行任何缩放）、centerCrop（保持纵横比缩放图片，使图片能完全覆盖ImageView）、centerInside（保持纵横比缩放图片，使ImageView能完全显示该图片）
android:src	设置ImageView所显示的Drawable对象的ID，例如，设置保存在res\drawable目录下的名称为flower.jpg的图片，可以将属性值设为android:src="@drawable/flower"
android:tint	为图片着色，其属性值可以是#rgb、#argb、#rrggbb或#aarrggbb表示的颜色值

例：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingTop="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context=".MainActivity">
<!--原尺寸显示的图像-->
    <ImageView
        android:id="@+id/iv1"
        android:src="@mipmap/flower"
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--    设置组件的最大宽度和高度-->
    <ImageView
        android:id="@+id/iv2"
        android:src="@mipmap/flower"
        android:adjustViewBounds="true"
        android:maxHeight="90dp"
        android:maxWidth="90dp"
        android:layout_margin="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--    缩放图片后将其放在右下角-->
    <ImageView
        android:id="@+id/iv3"
        android:src="@mipmap/flower"
        android:scaleType="fitEnd"
        android:layout_margin="5dp"
        android:layout_width="90dp"
        android:layout_height="90dp"/>
<!--    为图片着色-->
    <ImageView
        android:id="@+id/iv4"
        android:src="@mipmap/flower"
        android:tint="#77ff0000"
        android:layout_width="90dp"
        android:layout_height="90dp"
        tools:ignore="UseAppTint" />
​
​
</LinearLayout>

4-2.网格视图（GridView）

按照行、列分布的方式来显示多个组件，通常用于显示图片或图标等。

在使用网格视图时，需要在屏幕上添加GridView组件，通常在XML布局文件中使用<RatingBar>标记实现，基本语法格式如下：

<GridView
          属性列表
          >
</GridView>

GridView组件支持的XML属性如表：

XML 属性	描述
android:columnWidth	设置列的宽度
android:gravity	设置对齐方式
android:horizontalSpacing	设置各元素之间的水平距离
android:numColumns	设置列数，其属性值通常为大于1的值，如果只有1列，那么最好使用ListView实现
android:stretchMode	设置拉伸模式，其中属性值可以是none（不拉伸）、spacingWidth（仅拉伸元素之间的间距）、columnWidth（仅拉伸表格元素本身）或spacingWidthUniform（表格元素本身、元素之间的间距一起拉伸）
android:verticalSpacing	设置各元素之间的垂直间距