Android开发之ListView添加多种布局效果演示

最新推荐文章于 2023-05-25 10:09:17 发布
最新推荐文章于 2023-05-25 10:09:17 发布
阅读量150 收藏
点赞数
文章标签： 移动开发
原文链接：http://www.cnblogs.com/dazhao/p/4934797.html
版权

在这个案例中展示的新闻列表，使用到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;
     }

这里展示部分的源码，完整的源码可以点击这里下载

转载于:https://www.cnblogs.com/dazhao/p/4934797.html

b10l07
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android listview radiobutton,RadioButton与ListView的混合使用
weixin_32867521的博客
05-27 397
许久没有写过博客了，近来在做Android开发，突然想到这里，以后可以在这里贴些代码，做些记录，与大家分享交流。Android开发中，常常会用到RadioButton与ListView的混合使用，用户点击一条Item，然后记录下选中的状态，其中最重要的是记录好用户点击选中Item的位置。布局文件很简单：xmlns:tools="http://schemas.android.com/tools"an...
在Android中ListView多种Item布局的实现
01-27
模拟聊天界面的ListView中的两种布局的实现
ListView实现两种布局
12-16
一个简单的聊天界面示例，来演示如何在ListView的getView方法里更优雅地实现加载不同的布局。
ListView（recycleView）和布局其他控件一起滑动
得已
07-06 2675
如何让ListView及以上的布局一起滑动，或者说，如何让整个Activity的布局都随着ListView一起滑动就是其实很简单，不排除其他的实现方法，但个人实现方法是使用一个特殊的ScrollView以及一个重写的ListView重写ListView：public class UnScrollListView extends ListView { public UnScrollListV...
Android中ListView与ScrollView混合使用
小旭的专栏
11-12 5878
ListView与ScrollView混合使用主要有两种效果： 1、ListView在ScrollView中高度固定。滑动ListView时，ListView滚动。ListView到头或者滑动ScrollView时整个页面滚动。 listView.setOnTouchListener(new View.OnTouchListener() { @Override
Android应用源码之listview 的各种动画效果.zip
12-10
本资料包"Android应用源码之listview 的各种动画效果.zip"聚焦于ListView的各种动画效果，旨在帮助开发者提升用户体验，使应用程序更加生动有趣。源码分析将深入探讨如何在ListView中实现这些效果。 一、ListView的...
Android-ListViewDemo.zip_android开发_Java_
08-11
在Android应用开发中，ListView是十分常见且重要的一个组件，尤其在展示大量数据时，它提供了高效的滚动性能和丰富的交互效果。本项目“Android-ListViewDemo”是一个基于Java语言的示例，它演示了如何在Android平台...
Android ListView获得选项中的值
09-02
在Android开发中，ListView是一个常用的组件，用于展示列表形式的数据，同时它还支持多种交互功能，比如点击列表项进行相应的操作。为了实现这一功能，我们需要了解如何为ListView设置监听器以及如何从监听器中获取...
安卓Android源码——ListView上下翻页效果.zip
10-12
这个压缩包"安卓Android源码——ListView上下翻页效果.zip"很可能是包含了一个示例项目，演示了如何在ListView中实现上下翻页的效果。这样的效果通常涉及到滚动监听、数据加载优化以及用户体验提升等方面。下面将...
custom_ListView:具有自定义布局和适配器的Android上ListView的简单演示
05-08
在Android开发中，ListView是一种常用的组件，用于展示可滚动的列表数据。本项目"custom_ListView"是一个关于如何在Android应用中实现具有自定义布局和适配器的ListView的实例教程。通过这个项目，我们可以深入理解...
【Android基础】(6)布局和ListView控件
scarthr的专栏
12-16 705
一 Android布局 五大布局：LinearLayout、RelativeLayout、FrameLayout、AbsoluteLayout、TableLayout，个人认为后面两个布局基本可以用前面的布局组合来实现，所以只是用前面的3个布局基本可以买足一切怪异、另类的布局了。 从Android2.2开始，新增了MATCH_PARENT，其值和FILL_PARENT值一样都是-1。WRAP_
android ListView item里动态增加多个LinearLayout的问题
xu_song的专栏
04-28 5535
先上图  这是项目的源码 http://download.csdn.net/detail/xu_song/5312262 有兴趣的话，可以尝试着去解决   我想实现的功能就是在listView 的item加入多个LinearLayout,但是也不知道多少个,这个值是根据setAdapter的一个ArrayList对象取出来的。 （比如列表第一个item加入一个，第二个item加入二
Android 入门第四讲01-列表ListView（用代码添加布局文件（添加控件+布局），ListView原理，ListView使用步骤，ListView填充数据案例，ListView填充多个数据）
Rose J 的博客
07-13 5700
安卓入门第四讲01-列表ListView1.用代码添加布局文件1.添加控件1.添加布局2.ListView的原理3.ListView的使用步骤 1.用代码添加布局文件 1.添加控件 第一步先给layout文件的布局添加一个id 第二步在activity里通过代码拿到布局再添加控件 第三步根据布局的属性来控制方位 提示：如果添加的控件覆盖了原来的控件，看谁在上面，这里拿按钮做例子，添加的按钮在上面，所以下面的按钮就失效了 1.添加布局 第一步先新建一个布局 第二步在activity添加布局 2.Li
android listview headerview 分割线,Android ListView添加头布局和脚布局实例详解
weixin_30789297的博客
05-25 220
Android ListView添加头布局和脚布局之前学习喜马拉雅的时候做的一个小Demo，贴出来，供大家学习参考；如果我们当前的页面有多个接口、多种布局的话，我们一般的选择无非就是1、多布局；2、各种复杂滑动布局外面套一层ScrollView(好low)；3、头布局脚布局。有的时候我们用多布局并不能很好的实现，所以头布局跟脚布局就是我们最好的选择了；学过了ListView的话原理很简单，没啥理解...
Android中动态添加ListView子布局
最新发布
weixin_47024334的博客
05-25 1147
ListView、子布局在res/Layout目录下创建一个ListView子布局、数据的实体类、和最重要的适配器，最后就是主程序的操作代码本文主要进行如何动态添加ListView。
android中进行布局管理界面_一、利用ListView进行布局
分享+记录
08-16 1797
首先添加一张效果图： UserMessge这里可以添加一些用户信息，这里我定义的是TextView,当然也可以定义成EditView这样就实现了编辑的功能。。 当然，我的本意其实是点了更新之后，TextView变为EditView，更新按钮变为确认的。 当然这些都不是本节的内容，就不多说了。 上重点： 使用ListView,在xml中定义ListView的时候其实就可以发
android RecyclerView实现ListView和GridView混合的效果。
sziitjin的博客
05-11 1885
如何实现ListView和GridView混合的效果，效果图： 一、可以使用以下方式： 1、以往的方式 1）使用ListView内嵌GridView。 2、RecycleView 1）使用单个RecycleView。 2）使用RecycleView内嵌RecycleView。 二、使用单个RecycleView。 1、如下图，由于使用一个RecycleView，我们可以把每个一红矩形看成一个item,那么就会有item1（标题）占整个屏幕的宽度，item2（内容）占屏幕的宽度的1/3。
android如何在listview使用addheaderview,ListView在列表的头部和底部添加布局——addHeaderView，addFooterView...
weixin_36143628的博客
05-27 758
addHeaderView()方法：主要是向listView的头部添加布局addFooterView()方法：主要是向listView的底部添加布局以addHeaderView为例：View headView = getLayoutInflater().inflate(R.layout.igame_wb_details_task_list_layout_header, null);mLvList....
Android开发：ListView用SimpleAdapter来实现自定义布局和点击
weixin_45676887的博客
03-06 3285
ListView用SimpleAdapter来实现自定义布局和点击 简单的ListView只能实现文字的列表显示。这里就不过多的介绍了，可自行百度找下。 而这次我介绍的是ListView用SimpleAdapter来实现自定义布局和点击。 一、首先要自定义一个列表的样式list_item_layout.xml文件。 <!--list_item_layout.xml--> <LinearLayout xmlns:android="http://schemas.android.com/apk/
Android开发实战技巧精华篇(1)
"Android开发技巧总汇1" 这篇资源是一个关于Android开发的详细指南，主要针对初学者和有一定经验的开发者，旨在提供一系列实用的开发技巧和实例解析。这份资料共分为四册，第一册涵盖了多个关键主题，帮助读者深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值