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;

    }

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

时间： 2024-08-05 19:32:06

Android开发之ListView添加多种布局效果演示的相关文章

【转】Android开发之ListView＋EditText－要命的焦点和软键盘问题解决办法

Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法 [原文链接] 这篇文章完美的解决了我几个月没结论的bug... 感谢热爱分享的技术达人~ 我是怎么走进这个大坑的..... 需求: 在listview中出一个EditText 接受用户输入消息. 前期解决方案: 给这个EditText绑定焦点事件.... 悲剧就开始了... 知道吗?当这个EditTextView被点了下,它的焦点就不断的获取,失去,获取,失去...  只点一下... 就频繁的重复..最后大部

【转】Android 开发之旅：深入分析布局文件&amp;又是“Hello World！”

引言 上篇可以说是一个分水岭,它标志着我们从Android应用程序理论进入实践,我们拿起手术刀对默认的“Hello World!”程序进行了3个手术,我们清楚了“Hello world!”是如何实现显示在屏幕上的,而且我们知道不仅可以根据布局文件main.xml来初始化屏幕,还可编程地进行.以后基本我们都会以实践的方式来深入Android开发.我们这次深入分析Android应用程序的布局文件,主要内容如下: 1.用户界面及视图层次 2.Android中布局定义方法 3.编写XML布局文件及加载X

Android 开发之旅：深入分析布局文件&amp;又是“Hello World！”

http://www.cnblogs.com/skynet/archive/2010/05/20/1740277.html 引言 上篇可以说是一个分水岭,它标志着我们从Android应用程序理论进入实践,我们拿起手术刀对默认的“Hello World!”程序进行了3个手术,我们清楚了“Hello world!”是如何实现显示在屏幕上的,而且我们知道不仅可以根据布局文件main.xml来初始化屏幕,还可编程地进行.以后基本我们都会以实践的方式来深入Android开发.我们这次深入分析Android

Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）

我们有时候会遇到这么一个情况.就是我在一个ListView里面需要显示的东西其实是有种类之分的.比如我要分冬天,夏天,秋天,春天,然后在这每个季节下面再去加载各自的条目数据.还有,比如我们的通讯录,我们需要按A,B,C这样的字母顺序分类然后显示.这个怎么实现呢? 下面我们不用ExpandableListView,而是只用ListView来实现这一显示效果. MainActivity.java [java] view plaincopy package com.xzq.listviewadapte

Android开发之ListView排序

下面是activity: [java] view plaincopy public class MainActivity extends Activity { private ListView mListView = null; private List<TestDate> mList = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s

Android开发之ListView中Adapter的优化

ListView是Android开发最常用的控件,适配器adapter是将要显示的数据映射到View中并添加到ListView中显示 在实现ListView时,我们需要定义适配器如BaseAdapter.ArrayAdapter.CursorAdapter.SimpleAdapter等,并且重写其一下四个方法: 1 public int getCount(): 2 public Object getItem(int position) 3  public long getItemId(int p

Android开发之ListView利用OnScrollListener实现分页加载数据

上篇博文和大家分享了下拉刷新,这是一个用户体验非常好的操作方式.新浪微薄就是使用这种方式的典型. 还有个问题,当用户从网络上读取微薄的时候,如果一下子全部加载用户未读的微薄这将耗费比较长的时间,造成不好的用户体验,同时一屏的内容也不足以显示如此多的内容.这时候,我们就需要用到另一个功能,那就是listview的分页了.通过分页分次加载数据,用户看多少就去加载多少. 通常这也分为两种方式,一种是设置一个按钮,用户点击即加载.另一种是当用户滑动到底部时自动加载.今天我就和大家分享一下这个功能的实现.

Android开发之ListView条目批量选择删除

ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局文件包括一个ListView另一个隐藏的布局,包括了两个Button一个TextView,默认布局为gone,当监听到长按响应事件时候显示. 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayou

Android开发之ListView中BaseAdapter的使用

BaseAdapter,官网链接--http://developer.android.com/intl/zh-cn/reference/android/widget/BaseAdapter.html 继承:Object 接口:ListAdapter  SpinnerAdapter 已知直接子类: ArrayAdapter<T>, CursorAdapter, SimpleAdapter 已知间接子类: ResourceCursorAdapter, SimpleCursorAdapter 使用B