Android开发之ListView添加多种布局效果演示
在这个案例中展示的新闻列表,使用到ListView控件,然后在适配器中添加多种布局效果,这里通过重写BaseAdapter类中的 getViewType()和getItemViewType()来做判断,指定ListView列表中指定位置的item加载对应的布局,在 getView中返回对应的视图,之前由于不清楚getViewTypeCount()和getItemViewType()方法,使用得比较少,一直以 为需要添加多个适配器,现在看来当时的想法说明自己见识还不够,哈哈。
第一步:创建放置ListView控件的news_list_listView.xml布局,如下
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/news_list_more_layout_listView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" /> </RelativeLayout> |
第二步:定义不要在ListView控件中展示新闻列表的布局
效果,在上面的案例中,banner是一张图片和新闻标题,中间是新闻标题、新闻概要和图片,最后是新闻标题和三张新闻图片,这里三个布局分别命名
为:news_banner_item.xml,news_list_item.xml,news_three_img_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="150dp" > <ImageView android:id="@+id/model_news_title_iv" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:src="@drawable/demo" android:scaleType="fitXY" android:contentDescription="@string/news_content_description"/> <TextView android:id="@+id/model_news_title_tv" android:layout_width="match_parent" android:layout_height="25dp" android:layout_alignBottom="@+id/model_news_title_iv" android:layout_alignParentLeft="true" android:background="@color/list_item_bg_selector" android:gravity="center_vertical" android:paddingLeft="10dp" android:text="@string/display_news" /> </RelativeLayout> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/news_list_profile_image_iv" style="@style/weixin_news_list_img_c" android:layout_marginRight="@dimen/shadow_width" android:contentDescription="@string/news_each_info" android:src="@drawable/ic_launcher" android:scaleType="fitXY" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="@dimen/shadow_width" android:layout_toLeftOf="@+id/news_list_profile_image_iv" android:orientation="vertical" android:id="@+id/news_list_item_ll" > <TextView android:id="@+id/news_title_tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/rec_tone" android:textSize="@dimen/list_cat_size" android:textColor="@color/text_black_title" /> <TextView android:id="@+id/news_overview_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/news_overview_info" android:textColor="@color/text_gray_title" android:textSize="@dimen/list_dis_tv_size" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0dp" android:background="@color/list_item_bg_selector" android:layout_below="@+id/news_list_item_ll" android:layout_marginTop="4dp"/> </RelativeLayout> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="120dp" > <RelativeLayout android:id="@+id/news_more_img_rl" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/news_list_item_text_iv"> <LinearLayout android:id="@+id/news_horizontal_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/news_list_item_img_one_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:src="@drawable/ic_launcher" /> <ImageView android:id="@+id/news_list_item_img_two_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:src="@drawable/ic_launcher" /> <ImageView android:id="@+id/news_list_item_img_three_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:src="@drawable/ic_launcher" /> </LinearLayout> </RelativeLayout> <TextView android:id="@+id/news_list_item_text_iv" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="@string/display_news" android:textColor="@color/text_black_title" android:textSize="@dimen/list_cat_size" /> </RelativeLayout> |
第三步:在NewsMainActivity中获取布局
news_list_listview.xml中的ListView控件,然后添加ListView的适配器
MyNewsBaseAdapter,MyNewsBaseAdapter继承BaseAdapter,重写getViewType、
getItemViewType、getItem、getItemId、getCount和getView方法,其中重点是getViewType和
getItemViewType方法,通过这两个方法判断需要加载的布局,getViewTypeCount返回布局视图数
量,getItemViewType方法加载布局视图。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Override public int getItemViewType( int position) { int p = position; if (p == 0 ) { return TYPE_BANNER; //position是ListView中item的ID,指定ID为0的item,加载news_banner_item.xml布局 } else if (p > 0 && 0 == p % 4 ) { return TYPE_THREE_IMG_ITEM; //加载news_three_img_item.xml } else { return TYPE_COMMON_LIST_ITEM; //加载news_list_item.xml,news_three_img_item.xml } } @Override public int getViewTypeCount() { return 3 ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
@Override public View getView( int position, View convertView, ViewGroup parent) { ViewHolder viewHolder = null ; ViewHolder2 viewHolder2 = null ; ViewHolder3 viewHolder3 = null ; int type = getItemViewType(position); //获取指定的布局类型 inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); //布局加载器对象 if (convertView == null ) { switch (type) { case TYPE_BANNER: convertView = inflater.inflate(R.layout.img_text_banner_item, parent, false ); viewHolder = new ViewHolder(); viewHolder.bannerImg = (ImageView) convertView .findViewById(R.id.model_news_title_iv); viewHolder.bannerTitle = (TextView) convertView .findViewById(R.id.model_news_title_tv); convertView.setTag(viewHolder); break ; case TYPE_COMMON_LIST_ITEM: convertView = inflater.inflate(R.layout.news_list_item, parent, false ); viewHolder2 = new ViewHolder2(); viewHolder2.commonImg = (ImageView) convertView .findViewById(R.id.news_list_profile_image_iv); viewHolder2.overviewTV = (TextView) convertView .findViewById(R.id.news_overview_tv); viewHolder2.titleTV = (TextView) convertView .findViewById(R.id.news_title_tv); convertView.setTag(viewHolder2); break ; case TYPE_THREE_IMG_ITEM: convertView = inflater.inflate(R.layout.more_img_text_item, parent, false ); viewHolder3 = new ViewHolder3(); viewHolder3.titleTV = (TextView) convertView .findViewById(R.id.news_list_item_text_iv); viewHolder3.imgOne = (ImageView) convertView .findViewById(R.id.news_list_item_img_one_iv); viewHolder3.imgTwo = (ImageView) convertView .findViewById(R.id.news_list_item_img_two_iv); viewHolder3.imgThree = (ImageView) convertView .findViewById(R.id.news_list_item_img_three_iv); convertView.setTag(viewHolder3); break ; } } else { switch (type) { case TYPE_BANNER: viewHolder = (ViewHolder) convertView.getTag(); break ; case TYPE_COMMON_LIST_ITEM: viewHolder2 = (ViewHolder2) convertView.getTag(); break ; case TYPE_THREE_IMG_ITEM: viewHolder3 = (ViewHolder3) convertView.getTag(); break ; } } // 填充数据到指定的布局文件中 switch (type) { case TYPE_BANNER: viewHolder.bannerImg.setImageResource(R.drawable.demo); //图片从资源中获取 viewHolder.bannerTitle.setText(entryList.get(position) //entryList是存放新闻消息实体List对象,获取新闻标题 .getFull_title()); break ; case TYPE_COMMON_LIST_ITEM: viewHolder2.commonImg.setImageResource(R.drawable.demo); viewHolder2.overviewTV .setText(entryList.get(position).getContent()); //获取新闻内容 viewHolder2.titleTV .setText(entryList.get(position).getFull_title()); //获取新闻内容 break ; case TYPE_THREE_IMG_ITEM: viewHolder3.titleTV .setText(entryList.get(position).getFull_title()); viewHolder3.imgOne.setImageResource(R.drawable.demo); viewHolder3.imgTwo.setImageResource(R.drawable.demo); viewHolder3.imgThree.setImageResource(R.drawable.demo); break ; default : break ; } return convertView; } |
这里展示部分的源码,完整的源码可以点击这里下载
Android开发之ListView添加多种布局效果演示的更多相关文章
- 【转】Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法
Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法 [原文链接] 这篇文章完美的解决了我几个月没结论的bug... 感谢热爱分享的技术达人~ 我是怎么走进这个大坑的 ...
- Android 开发之旅:深入分析布局文件&又是“Hello World!”
http://www.cnblogs.com/skynet/archive/2010/05/20/1740277.html 引言 上篇可以说是一个分水岭,它标志着我们从Android应用程序理论进入实 ...
- Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现)
我们有时候会遇到这么一个情况.就是我在一个ListView里面须要显示的东西事实上是有种类之分的.比方我要分冬天,夏天.秋天.春天,然后在这每一个季节以下再去载入各自的条目数据. 还有,比方我们的通讯 ...
- android 开发之 ListView 与Adapter 应用实践
在开发android中,ListView 的应用显得非常频繁,只要需要显示列表展示的应用,可以说是必不可少,下面是记录开发中应用到ListView与Adapter 使用的实例: ListView 所在 ...
- Android开发之ListView条目批量选择删除
ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局 ...
- Android开发之ListView详解 以及简单的listView优化
ListView列表视图 最常用的控件之一,使用场景例如:微信,手机QQ等等. android:divider:每个item之间的分割线,可以使用图片或者色值. android:dividerHeig ...
- android开发之Toast的多种应用
Toast最基本的功能就是弹出一个弱提示,这个很简单我就不说了,说说Toast一些其他的作用. 来公司的时候,公司产品的1.0版本已经发布出去了,但是1.0是一个必须联网才能使用的产品,在2.0中想让 ...
- Android开发之ListView设置隔行变色
public class HLCheckAdapter extends BaseAdapter { private List<HuoLiang> list; private Context ...
- Android开发之TextView实现跑马灯效果
TextView及其子类,当字符内容太长显示不下时可以省略号代替未显示的字符:省略号可以在显示区域的起始,中间,结束位置,或者以跑马灯的方式显示文字(textview的状态为被选中). 其实现只需在x ...
随机推荐
- SecureCRT的帮助文档
[Help]->[Help Topics] Ubuntu:file:///usr/share/doc/scrt/SecureCRTHelp/SecureCRT.htm
- jQuery.parseHTML() 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css样式大全(整理版)
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...
- GIS可视化
作为一名GIS专业的学生,一晃也毕业三年了,在supermap也呆了三年多了,做的最多的就是浏览器端的GIS展示,最近也想分享一下我们团队在浏览器端GIS可视化的一些成果,算是做个宣传吧!有用的着的可 ...
- gray-code——找规律
The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...
- websocket聊天时,图片压缩处理(url或者input-file)
业务背景:私信聊天,需要发送图片,但是图片过大需要压缩处理.此时只有图片url,可以使用以下方法:canvasDataURL(url, 目标图片宽度,图片要显示区域的父元素) 注:该文件包含了inpu ...
- Codeforces Round #243 (Div. 2)——Sereja and Table
看这个问题之前,能够先看看这个论文<一类算法复合的方法>,说白了就是分类讨论,可是这个思想非常重要 题目链接 题意: 首先给出联通块的定义:对于相邻(上下和左右)的同样的数字视为一个联通块 ...
- Android---61---TabHost简单使用
与TabHost结合使用的组件: TabWidget:代表选项卡的标签条 TabSpec:代表选项卡的一个Tab页面 TabHost不过一个简单的容器,它提供两个方法来创建.加入选项卡 newTabS ...
- java 逻辑运算符 短路(条件操作)
两个数字计算时都会先把数字转换成二进制后再进行换算,二进制就是由0和1组成的数字 http://yxwang0615.iteye.com/blog/1084288
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...