Android Studio开发学习（五）——ImageView、ListView、GridView、ScrollView、HorizontalScrollView

一、前提

今天学习ImageView、ListView、GridView、ScrollView、HorizontalScrollView，也是很常见的控件

二、目标

ImageView（图像视图）

ListView（列表控件）

GridView（表格控件）

ScrollView（竖直滚动条）

HorizontalScrollView（水平滚动条）

三、内容

（一）ImageView

1、常用属性

大致相同

    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF9900"
        android:src="@drawable/hmbb"
        />

我们注意到src属性是内容属性，可以在里面添加图片，当然background属性，也可以，这里我们为了方便测试

此时我们可以看到图片添加到了这个控件中，但我们发现，图片并没有铺满整个控件，而是还有一部分是背景颜色，此时我们就要使用到一个属性android:scaleType=“”这个属性用来调整图片，缩放类型

原图：     

android:scaleType=“fitXY”	拉伸显示图片，不保持原始比例，铺满整个控件大小
android:scaleType=“fitStart”	按照比例放大或缩小图片高度，使其显示在控件顶部
android:scaleType=“fitCenter”	按照比例放大或缩小图片高度，使其显示在控件中间
android:scaleType=“fitEnd”	按照比例放大或缩小图片高度，使其显示在控件底部
android:scaleType=“center”	保持原图大小，显示在控件中心，多余的部分被裁掉
android:scaleType=“centerCrop”	以原图填满控件为目的，如果原图size大于控件的size，按比例缩小，居中显示在控件中。如果原图size小于控件的size，则按比例拉升原图的宽和高，填充控件居中显示
android:scaleType=“centerInside”	以原图正常显示为目的，如果原图大小大于控件的size，按比例缩小，居中显示在控件中。如果原图size小于控件的size，则不做处理居中显示图片
android:scaleType=“matrix”	不改变原图的大小，从ImageView的左上角开始绘制，超出部分做剪切处理

以至于最后一张图是白色的是因为matrix方式是从左上角开始绘制，我选取的图左上角刚好是白色，以上就是scaleType常见的所有绘制方式。

（二）ListView、GridView

重要问题：适配器

1、什么是适配器

ListView是一个列表控件，GridView是一个表格列表，用来显示数据，但ListView和GridView所展示的数据是有一定格式的，这时我们便要引进一个适配器，来建立数据源和ListView、GridView之间的适配关系，将数据源转换成ListView、GridView可以使用的格式进行显示，降低了程序的耦合性。在对于ListView、GridView来说有很多的适配器，我们就要最通用的适配器来完成——BaseAdapter

2、缓冲机制

ListView、GridView可以展示大量的数据信息，像是我们刷新闻刷空间，一条一条的都可用ListView、GridView实现，但假设ListView、GridView能存储50条信息，但屏幕最多显示5条，当我们向上滑动屏幕时第一条信息就会划出屏幕收回到缓冲池中，紧跟着第六条信息就会从缓冲池中取出放到布局文件中，设置数据进行显示，以此类推，这样，系统永远保持这5条数据，这便是缓冲机制，简单的来说就是，用则取出不用则收回，这样便可极大节约系统资源

3、设计

（1）首先设计布局文件，在activity_main添加一个ListView

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ></ListView>

（2）新建一个布局文件，在布局文件中绘制每一行的显示样式，只用设计一个就可以

<ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:background="#000000"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingLeft="10dp"
  >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello!"
            android:textSize="20sp"
            android:textColor="#00FFFF"
            />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My friend"
            android:textSize="20sp"
            android:textColor="#00FF00"
            android:layout_marginTop="10dp"
            />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="this is my blog"
            android:textSize="20sp"
            android:textColor="#33FF86"
            android:layout_marginTop="10dp"
            />

    </LinearLayout>

（3）创建数据源，Item.java

public class Item {
    public int ImageResId;
    public String itemView1;
    public String itemView2;
    public String itemView3;

    public Item(int ImageResId, String itemView1, String itemView2,String itemView3) {
        this.ImageResId = ImageResId;
        this.itemView1 = itemView1;
        this.itemView2 = itemView2;
        this.itemView3 = itemView3;
    }
}

（4）在MainActivity中添加数据内容，与布局一一对应

package com.mingrisoft.listview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ListView listView;

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

        List<Item> itemBeanList = new ArrayList<>();//动态数组
        for (int i = 0;i < 20; i ++){
            itemBeanList.add(new Item(R.mipmap.ic_launcher, "标题" + i,"内容" + i, "内容" + i));//每一行的内容，这里的Item是数据源文件中Item方法
        }
        listView = (ListView) findViewById(R.id.listview);//通过id找到之前设置的listview
        //设置ListView的数据适配器
        listView.setAdapter(new MyListAdapter(this,itemBeanList));

    }
}

其中有些部分是java方面的知识，比如

List<T>类表示可通过索引访问的对象的强类型列表，提供用于对列表进行搜索、排序和操作的方法

（5）最关键的一步，适配器的编写

package com.mingrisoft.listview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by Administrator on 2020/4/2/002.
 */

public class MyListAdapter extends BaseAdapter {
    private List<Item> mList;
    private LayoutInflater mlayoutInflater;//布局转载其对象,LayoutInflater是用来找res/layout/下的xml布局文件

    //通过构造方法将数据源与数据适配器关联起来，context要使用当前的Adapter的界面对象
    MyListAdapter(Context context,List<Item> list){//构造方法
        mList=list;
        mlayoutInflater=LayoutInflater.from(context);//获得 LayoutInflater 实例
    }

    @Override
    public int getCount() {//列表的长度
        return mList.size();
    }

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

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

    static class ViewHolder{//用于缓存控件，两个属性分别对应布局文件的控件
        public ImageView imageView;
        public TextView textView1,textView2,textView3;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {//每一行的样式
        ViewHolder holder=null;
        if(convertView==null){//如果View未被实例化，缓冲池没有对应的缓存
            //由于我们只需要将XML转化为View，并不涉及到具体的布局，所以第二个参数通常设置为null
            convertView=mlayoutInflater.inflate(R.layout.layout,null);
            holder=new ViewHolder();
            //对viewHolder的属性进行赋值
            holder.imageView= (ImageView) convertView.findViewById(R.id.iv);
            holder.textView1= (TextView) convertView.findViewById(R.id.tv1);
            holder.textView2= (TextView) convertView.findViewById(R.id.tv2);
            holder.textView3= (TextView) convertView.findViewById(R.id.tv3);
            //通过setTag将convertView与viewHolder关联
            convertView.setTag(holder);//setTag()给View对象一个标签，这个标签就是ViewHolder实例化后对象的一个属性
        }else {//如果缓存池中有对应的view缓存，则直接通过getTag取出viewHolder
            holder= (ViewHolder) convertView.getTag();
        }
        Item item=mList.get(position);

        //给控件赋值
        holder.imageView.setImageResource(item.ImageResId);
        holder.textView1.setText(item.itemView1);
        holder.textView2.setText(item.itemView2);
        holder.textView3.setText(item.itemView3);

        return convertView;
    }
}

其中LayoutInflater这个类还是非常有用的，它的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件，并且实例化；而findViewById()是找xml布局文件下的具体widget控件(如Button、TextView等)

结果如图：

以上就是整个过程，当然还需要反复的熟练才可用很好的利用

GridView与ListView的设计几乎一样，这里不再做展示，有不同的在于GridView有几条属性

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        >

android:numColumns="3" 表示列数

android:horizontalSpacing="10dp" 表示水平方向间距（列间距）

android:verticalSpacing="10dp" 表示垂直方向的间距（行间距）

（三）ScrollView、HorizontalScrollView

滚动条就是当页面东西过多显示不下时创立的控件，分为水平和竖直，记得设置滚动条时要在整个布局条件下，将其余的布局创建在滚动条下面

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.scrollview.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp" />
    </LinearLayout>
</ScrollView>

效果显示需要启动项目，在这里不做演示。