Android 开发技术 第三课

概要

这节课主要讲了控件ListView还有与其配套的适配器ArrayAdapterSimpleAdapter。还讲了一个形状(shape)Drawable

ListView的用法简介

ListView顾名思义,就是列表视图,用于显示一系列布局相同的项目(item)。但是Google在设计ListView时,并没用直接用他来管理显示的项目,而是使用适配器(Adapter)来管理每个项目的数据界面,并使用listView.setAdapter()方法给ListView设置相应的适配器。

  • ListView显示静态数据
    ListView的布局文件中,有一个android:entries属性,可以指向一个数组资源,那么数组资源又怎么定义的呢
    • 新建数组资源
      1. 我们在values文件夹点右键,选择New->Values resource fileFile namearray.xml

      2. 在根元素<resources></resources>中加入<string-array name="数组名"></string-array>节点。在其中可以添加任一个item,格式为<item>我是一个item</item>。整体看起来是这个样子的

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="array1">
        <item>1</item>
        <item>2</item>
        <item>3</item>
    </string-array>
</resources>
1. 引用方法

这个就很简单了,在xml中引用格式为@array/数组名。在java中引用格式为R.array.数组名

知道怎么定义数组资源,我们在回过头来说android:entries这个属性,我们只要给他指向一个数组资源就行了,完整的布局文件如下

<?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="vertical">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:entries="@array/array1" />
</LinearLayout>

这样,我们不需要在java文件中写任何代码,就可以让ListView带有数据啦

  • ListView显示动态数据
    既然是显示动态的数据,肯定要在java文件中写一些代码了。这是我们的适配器(Adapter)就闪亮登场了~
    适配器有一个基类BaseAdapter,它是一个抽象类。如果我们ListView的item布局、数据很复杂,我们就可以通过继承BaseAdapter,重写它的方法,来实现我们的自定义Adapter。
    当我们没有那么复杂的需求时,比如我们只想显示一行文字,我们可以用ArrayAdapter,当我们要显示一些不同的图片文字时,我们就可以用更高级的SimpleAdapter。而这些类正是继承自BaseAdapter,只不过Google已经给我们写好了,拿来直接用就可以了。
    • ArrayAdapter使用方法
      1. 创建数据集
        我们可以使用数组(Object[])或是动态数组(List)来存放数据
      • 使用普通数组,数据不能增加、删除
String[] data = new String[100];
for (int i = 0; i < 100; i++) {
    data[i] = "第" + i + "条数据";
}
  - 使用动态数组,数据可以增加、删除
List<String> data = new ArrayList<>();
for (int i = 0; i < 100; i++) {
    data.add("第" + i + "条数据");
}
2. 指定item的布局

要显示一行文本,系统并不知道怎么显示,比如文字的大小,颜色等。所以我们要为item创建一个布局文件,在其中定义好我们需要的文字样式。当我们没有特殊需求时,我们则可以指定系统内置的布局文件。
- 使用系统内置的布局文件
这个很简单,我们只要使用android.R.layout.simple_list_item_1作为我们item的布局文件就好了。其显示效果在android 4.4如图


- 使用自定义的布局
我们新建一个布局,根元素为TextView就好,然后给他设置属性就好了,比如我们给他指定字体为红色,大小为50sp

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="1111"
    android:textColor="#f00"
    android:textSize="50sp">
</TextView>
  - 创建ArrayAdapter

前两步完成后,这一步就很简单了,我们只要使用

ArrayAdapter<String> adapter = new ArrayAdapter<String>(
Context 上下文, 
int 布局文件id,
List<String> 数据)

这样的格式去创建Adapter就好了。比如这样

ArrayAdapter<String> adapter = new ArrayAdapter<String>(
this, 
android.R.layout.simple_list_item_1, 
data);
  - 设置适配器

最后调用listView.setAdapter(adapter);就可以了,完整的代码如下

ListView listView = (ListView) findViewById(R.id.listView);
List<String> data = new ArrayList<>();
for (int i = 0; i < 100; i++) {
    data.add("第" + i + "条数据");
}
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data);
listView.setAdapter(adapter);
  • SimpleAdapter使用方法
    SimpleAdapterArrayAdapter功能更强大,可以指定图片,文字为数据。比如我们的item布局是这样的,一个图片,两个文字

    这时候内容动态改变的控件为一个ImageView两个TextView。这时候该怎么做呢?
    • 创建数据集
int[] photo = new int[]{R.drawable.head1, R.drawable.head2};
List<Map<String, Object>> data = new ArrayList<>();
for (int i = 0; i < 100; i++) {
    Map<String, Object> map = new HashMap<>();
    map.put("singer", "张" + i);
    map.put("song", "第" + i + "首歌");
    map.put("photo", photo[i % 2]);
    data.add(map);
}

我们先在drawable中添加了两个图片,head1.jpghead2.jpg

head1.jpg

head2.jpg

然后把它们的ID放到数组中,在填充数据时,就可以使用photo[i % 2]来交替添加这两条数据了。
- 创建item布局
直接贴出来了,注意控件的ID

<?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"
    android:padding="16dp">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/head1" />
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="周杰伦"
        android:textSize="20sp" />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="龙卷风"
        android:textSize="20sp" />
</LinearLayout>
  - 创建适配器

直接贴代码

SimpleAdapter adapter = new SimpleAdapter(
        this,
        data,
        R.layout.item2,
        new String[]{"singer", "song", "photo"},
        new int[]{R.id.tv1, R.id.tv2, R.id.iv});

前三个参数没什么可说的,注意最后两个参数。
一个String数组,一个int数组,这是什么意思呢。
这个就是数据控件对应关系
可以用如下表格来对应


这样表示就很清楚了吧
- 给ListView设置适配器
这一步就不说了,完整代码如下

int[] photo = new int[]{R.drawable.head1, R.drawable.head2};
List<Map<String, Object>> data = new ArrayList<>();
for (int i = 0; i < 100; i++) {
    Map<String, Object> map = new HashMap<>();
    map.put("singer", "张" + i);
    map.put("song", "第" + i + "首歌");
    map.put("photo", photo[i % 2]);
    data.add(map);
}
SimpleAdapter adapter = new SimpleAdapter(
        this,
        data,
        R.layout.item2,
        new String[]{"singer", "song", "photo"},
        new int[]{R.id.tv1, R.id.tv2, R.id.iv});
listView.setAdapter(adapter);

最终的效果


自定义shape的方法

这个就不细说了,贴上代码,大家细细体会

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 边角的圆弧半径 -->
<corners android:radius="9dp" />

<!-- 实心填充 -->
<solid android:color="#f00" />

<!-- 描边:一般大小都是1dp -->
<stroke android:width="1dp" android:color="#ff000000" />

<!-- 四周留出来的空白,和xml文件中的pad效果一样,对内起作用 -->
<padding android:bottom="30dp" android:left="20dp" android:right="30dp" android:top="20dp" />

<!-- 背景颜色渐变 -->
<gradient android:angle="90" android:endColor="#ff00ff00" android:startColor="#ff0000ff" />

</shape>

补充链接

Java集合类详解
Java中HashMap详解
Java ArrayList详细介绍(示例)
Listview绘制原理与Adapter
BaseAdapter的逗逼、普通、文艺写法
Android shape的使用详解以及常用效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容