Android开发之ListView添加多种布局效果演示-白红宇

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

阅读量：6160 次

发布时间：2019-06-21

本文共 8845 字，大约阅读时间需要 29 分钟。

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

第一步：创建放置ListView控件的news_list_listView.xml布局，如下

                            
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns: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=""
    
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=""
    
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=""
    
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方法加载布局视图。

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

                            
@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

你可能感兴趣的文章