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

原创已于 2022-04-05 19:20:55 修改 · 854 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android学习

于 2022-03-26 10:21:51 首次发布

本文详细介绍了Android中的图像类组件，包括ImageView和GridView的使用方法，以及列表类组件如Spinner和ListView的配置。针对难点，解答了如何设置图片按钮背景透明以及普通按钮与图片按钮的区别。

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	设置各元素之间的垂直间距

注：在使用GridView组件时，通常使用Adapter类为GridView组件提供数据。

Adapter类是一个接口，代表适配器对象。它是组件与数据之间的桥梁，通过它可以处理数据并将其绑定到相应的组件上。它的常用实现类包括以下几个：

①ArrayAdapter：数组适配器，通常用于将数组的多个值包装成多个列表项，只能显示一行文字。

②SmipleAdapter：简单适配器，通常用于将List集合的多个值包装成多个列表项。可以自定义各种效果，功能强大。

③SimpleCursorAdapter：与SimpleAdapter类似，只不过它需要将Cursor（数据库的游标对象）的字段与组件ID对应，从而实现将数据库的内容以列表形式展示出来。

④BaseAdapter：是一个抽象类，继承它需要实现较多的方法，通常它可以对各列表项进行zuida-限度的定制，也具有很高的灵活性。

例:

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:orientation="vertical"
    tools:context=".MainActivity">
<!--    标题栏-->
    <ImageView
        android:src="@mipmap/qqxiang"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
<!--    显示日期-->
    <TextView
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="2022年3月23日"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <GridView
        android:id="@+id/gv1"
        android:columnWidth="100dp"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

MainActivity.java

package com.example.qqalbum;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridLayout;
import android.widget.GridView;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    //显示的图片资源ID的数组
    private Integer[] picture = {
            R.mipmap.img01,R.mipmap.img02,R.mipmap.img03,R.mipmap.img04,R.mipmap.img05,
            R.mipmap.img06,R.mipmap.img07,R.mipmap.img08,R.mipmap.img09,R.mipmap.img10,
            R.mipmap.img11,R.mipmap.img12,
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取布局文件中的GridView组件
        GridView gridView=(GridView) findViewById(R.id.gv1);
        //调用ImageAdapter
        gridView.setAdapter(new ImageAdapter(this));
    }
    public class ImageAdapter extends BaseAdapter{
        //获取上下文
        private Context context;
        public ImageAdapter(Context c){
            context=c;
        }
        @Override
        public int getCount() {
            //图片数组的长度
            return picture.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ImageView imageView;
            //判断传过来的值是否为空
            if(view==null){
                //创建ImageView组件
                imageView=new ImageView(context);
                //为组件设置宽、高
                imageView.setLayoutParams(new ViewGroup.LayoutParams(260,240));
                //选择图片铺设方式
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            }else {
                imageView=(ImageView) view;
            }
            //将获取图片放到ImageView组件中
            imageView.setImageResource(picture[i]);
            //返回ImageView
            return imageView;
        }
    }
}

5.列表类组件

下拉列表框Spinner：用于弹出一个下拉菜单供用户选择

列表视图ListView：用于实现在一个窗口中只显示一个列表

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

用于提供一系列列表供用户进行选择。

通过<Spinner>在XML布局文件中添加下拉列表框的基本语法格式如下：

<Spinner
         android:entries="@array/数组名称"
         android:prompt="@string/info"
         其他属性
         >
</Spinner>

注：android:entries为可选属性，用于指定列表项，如果在布局文件中不指定该属性，可以在Java代码中通过为其指定适配器的方式指定；android:prompt属性也是可选属性，用于指定下拉列表框的标题。

例：

方法一：

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:background="@mipmap/xila"
    android:orientation="horizontal"
    tools:context=".MainActivity">
<!--    列表选择框-->
    <Spinner
        android:id="@+id/spinner"
        android:entries="@array/ctype"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        tools:ignore="InvalidId" />
<!--    搜索文本框-->
    <EditText
        android:text="搜索"
        android:textColor="#F8F8FF"
        android:layout_width="200dp"
        android:layout_height="wrap_content"/>



</LinearLayout>

values-arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="ctype">
        <item>全部</item>
        <item>电影/电视</item>
        <item>图书</item>
        <item>唱片</item>
        <item>小事</item>
        <item>用户</item>
        <item>小组</item>
        <item>群聊</item>
        <item>游戏/应用</item>
        <item>活动</item>

    </string-array>
</resources>

MainActivity.java

package com.example.spinner;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取下拉列表
        Spinner spinner=(Spinner) findViewById(R.id.spinner);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //获取选择项的值
                String result=adapterView.getItemAtPosition(i).toString();
                //显示被选中的值
                Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }
}

方法二：

在使用下拉列表框时，如果不在布局文件中直接为其指定要显示的列表项，也可以通过为其指定适配器的方式指定。

package com.example.spinner;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取下拉列表框
        Spinner spinner=(Spinner) findViewById(R.id.spinner);
        String[] ctype=new String[]{"全部","电影","图书","唱片","小事","用户","小组","群聊","游戏","活动"};
        ArrayAdapter<String> adapter=new ArrayAdapter<String>
                (this, android.R.layout.simple_spinner_item,ctype);
        //为适配器设置列表框下拉时的选项样式
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_item);
        //将适配器与下拉列表框关联
        spinner.setAdapter(adapter);
        //获取选中项的值
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //获取选择项的值
                String result=adapterView.getItemAtPosition(i).toString();
                //显示被选中的值
                Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });


    }
}

5-2.列表视图（ListView）

以垂直列表的形式列出需要显示的列表项。

通过<ListView>在XML布局文件中添加列表视图的基本语法格式如下：

<ListView
          属性列表
          >
</ListView>

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

XML 属性	描述
android:divider	为列表视图设置分割条，既可以用颜色分隔，也可以用Drawable资源分隔
android:dividerHeight	设置分割条的高度
android:entries	通过数组资源为ListView指定列表项
android:footerDividersEnabled	设置是否在footer View（底部视图）之前绘制分割条，默认值为true，设置为false时，表示不绘制。使用该属性时，需要通过ListView组件提供的addFooterView()方法为ListView设置footer View
android:headerDividersEnabled	设置是否在header View（头部视图）之前绘制分割条，默认值为true，设置为false时，表示不绘制。使用该属性时，需要通过ListView组件提供的addHeaderView()方法为ListView设置headerView

在布局文件中添加一个列表视图，并通过数组资源为其设置列表项。具体代码如下：

<ListView android:id="@+id/listView1"
          android:entries="@array/ctype"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"/>

在上面的代码中，使用了名称为“ctype”的数组资源，因此需要在res\values目录中创建一个定义数组资源的XML文件arrays.xml，并在该文件中添加名称为“ctype”的字符串数组，关键代码如下：

<resources>//将适配器与选择列表框关联
    <string-array name="ctype">
        <item>情景模式</item>
        ...<!-- 省略了其他项的代码 -->
        <item>连接功能</item>
    </string-array>
</resources>

如：

注：在使用列表视图时，重要的是如何设置选项内容，同Spiner下拉列表框一样. 如果没有在布局文件中为ListView指定要足示的列表项，也可以通过为其设置Adiper来指定需要显示的列表项。通过Adpier来为ListView指定要是示的列表项，可以分为以下两个步骤。

(1) 创建Adapter对象。对于纯文字的列表项，通常使用ArayAdapter对象。创建ArayAdapter对象通常可以有两种方式:种是通过数组资源文件创建: 另种是通过在Java 文件中使用字符串数组创建。这与5-1 的Spinner下拉列表框中介绍的创建ArrayAdapter对象基本相同，所不同的就是在创建该对象时，指定列表项的外观形式。在Android API中默认提供了一些用于设置外观形式的布局文件，通过这些布局文件，可以很方便的指定ListView指定的外观形式。常用的布局文件有以下几个。

◆simple_list_ jitem_1: 每个列表项都是一个普通的文本。

◆simple_list._item_2:每个列表项都是一个普通的文本(字体略大) .

◆simple_list_item_checked: 每个列表项都有一个已选中的列表项。

◆simple_list_item_multiple_choice: 每个列表项都是带复选框的文本。

◆simple_list_item_single._choice 每个列表项都是带单选按钮的文本。

(2)将创建的适配器对象与ListViewv相关联，可以通过ListView对象的setAdapter()方法实现，具体代码如下:

listview. setAdapter(adapter);;//将适配器与ListView关联

例：

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:orientation="vertical"
    tools:context=".MainActivity">
<!--标题栏-->
    <ImageView
        android:src="@mipmap/wei_top"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
<!--    列表视图-->
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="510dp">

    </ListView>
<!--    下标题选择框-->
    <ImageView
        android:src="@mipmap/wei_down"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

res-layout-main.xml

<?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="horizontal">
<!--    存放头像-->
    <ImageView
        android:id="@+id/image"
        android:paddingRight="10dp"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:adjustViewBounds="true"
        android:maxWidth="72dp"
        android:maxHeight="72dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--    存放名字-->
    <TextView
        android:id="@+id/title"
        android:padding="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

MainActivity.java

package com.example.wechatcontacts;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取列表视图
        ListView listView=(ListView) findViewById(R.id.listview);
        //定义并初始化保存图片id的数组
        int[] imageId=new int[]{R.mipmap.img01,R.mipmap.img02,R.mipmap.img03,R.mipmap.img04,
                R.mipmap.img05,R.mipmap.img06,R.mipmap.img07,R.mipmap.img08,R.mipmap.img09,};
        //定义并初始化保存列表项文字的数组
        String[] title=new String[]{"刘一","陈二","张三","李四","王五","赵六","孙七","周八","吴九"};
        //创建一个list集合
        List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>();
        //通过for循环将图片id和列表项文字放到Map中，并添加到List集合中
        for (int i=0;i<imageId.length;i++){
            //实例化Map对象
            Map<String,Object> map=new HashMap<String,Object>();
            map.put("image",imageId[i]);
            map.put("名字",title[i]);
            //将map对象添加到List集合中
            listItems.add(map);
        }
        //创建SimpleAdapter
        SimpleAdapter adapter=new SimpleAdapter(this,listItems,
                R.layout.main,new String[]{"名字","image"},new int[]{
                        R.id.title,R.id.image});
        //将适配器与ListView关联
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                //获取选择项的值
                Map<String,Object> map=(Map<String, Object>) adapterView.getItemAtPosition(i);
                Toast.makeText(MainActivity.this, map.get("名字").toString(), Toast.LENGTH_SHORT).show();

            }
        });
    }
}

6.难点解答

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

在使用图片按钮组件向界面中添加按钮时，如果图片无法拉伸填充到ImageButton里面。ImageButton 周围总是有一圈边框。这时，可以通过将图片按钮的背景设置为透明来解决这一问题。将图片按钮的背景设置为透明可以采用以下两种方法。

◆将android:background属性没置为0000或者@null。

◆通过android:background 属性指定所显示的图片，而不使用android:src属性。

例如，要在页面上添加一个“添加好友”图片按钮，可以使用下面的代码：

<ImageButton
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/add"
android:background="#0000"
/>