赞
踩
一、前提
今天学习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>
效果显示需要启动项目,在这里不做演示。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。