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

2015-11-02 17:27 阅读 6,395 次 评论 8 条
版权声明:本文著作权归TeachCourse所有,未经许可禁止转载,谢谢支持!
转载请注明出处:http://teachcourse.cn/588.html

摘要:

在这个案例中展示的新闻列表,使用到ListView控件,然后在适配器中添加多种布局效果,这里通过重写BaseAdapter类中的getViewType()和getItemViewType()来做判断,指定ListView列表中指定位置的item加载对应的布局,在getView中返回对应的视图,之前由于不清楚getViewTypeCount()和getItemViewType()方法,使用得比较少,一直以为需要添加多个适配器,现在看来当时的想法说明自己见识还不够,哈哈。
ListView多布局样式
第一步:创建放置ListView控件的news_list_listView.xml布局,如下

<?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

<?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>
<?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>
<?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,重写getViewTypegetItemViewTypegetItemgetItemIdgetCountgetView方法,其中重点是getViewType和getItemViewType方法,通过这两个方法判断需要加载的布局,getViewTypeCount返回布局视图数量,getItemViewType方法加载布局视图。

    @Override
    public int getItemViewType(int position) {
        int p = position;
        if (p == 0) {
            return TYPE_BANNER;
        } else if (p > 0 && 0 == p % 4) {
            return TYPE_THREE_IMG_ITEM;
        } else {
            return TYPE_COMMON_LIST_ITEM;
        }
    }

    @Override
    public int getViewTypeCount() {

        return 3;
    }
    @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:
            try {
                viewHolder.bannerImg.setImageBitmap(getImage(entryList.get(
                        position).getImg()));
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            // viewHolder.bannerImg.setImageResource(R.drawable.demo);
            viewHolder.bannerTitle.setText(entryList.get(position)
                    .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;
    }

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

关注公众号 扫一扫二维码,加我QQ

如果文章对你有帮助,欢迎点击上方按钮关注作者

来源:TeachCourse每周一次,深入学习Android教程,关注(QQ1589359239或公众号TeachCourse)
转载请注明出处:http://teachcourse.cn/588.html

资源分享

ListView添加多个item
分类:Android 标签:, ,
重置路由器电脑网络显示黄色叹号怎么办? 重置路由器电脑网络显示黄色叹号
解决短信接收自动填写输入框的问题 解决短信接收自动填写输入框的问
Building and Running Overview Building and Running Overvi
关于ViewPager冲突问题分析及解决思路 关于ViewPager冲突问题分析及解

发表评论

呲牙 憨笑 坏笑 偷笑 色 微笑 抓狂 睡觉 酷 流汗 鼓掌 大哭 可怜 疑问 晕 惊讶 得意 尴尬 发怒 奋斗 衰 骷髅 啤酒 吃饭 礼物 强 弱 握手 OK NO 勾引 拳头 差劲 爱你

表情

  1. Ahuan
    Ahuan 【农民】 @回复

    博主,我问下,当多个页面的listView用的一个自定义Adapter时,但有部分值发生了改变,怎样控制了??

    • TeachCourse博主
      TeachCourse博主 【县长】【站长】 @回复

      调用Adapter的notifyDataSetChanged方法刷新列表,可以参考一下《关于调用notifyDataSetChanged刷新PullToRefreshListView列表无反应解决办法》,如果无法解决你的问题,可以再联系!!!

  2. 路易大叔
    路易大叔 【农民】 @回复

    你学的挺杂啊

    • TeachCourse博主
      TeachCourse博主 【县长】【站长】 @回复

      只要还是学习Android开发,对于网站、数据库也懂一些,经历嘛,总会有点接触! [呲牙]

  3. boke112导航
    boke112导航 【队长】 @回复

    博主对安卓系统研究很深啊,小白路过

  4. 微历史
    微历史 【农民】 @回复

    安卓开发大神呀

    • TeachCourse博主
      TeachCourse博主 【县长】【站长】 @回复

      谢谢夸奖!不敢当,不敢当呀