zoukankan      html  css  js  c++  java

  • 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;
        }

    这里展示部分的源码，完整的源码可以点击这里下载
  • 相关阅读:
    day06_02 继承
    day06_03 多继承区别
    day03_04 字符集编码转换
    day04_03 序列化与反序列化
    day04_06 单线程生成器的并行效果（协程）
    day04_02 装饰器 高阶版
    day04_05 内置方法
    复合控件的开发心得
    从子节点找父节点的循环sql
    asp中试用存储过程
  • 原文地址：https://www.cnblogs.com/dazhao/p/4934797.html
Copyright © 2011-2022 走看看