PinnedSectionListView使用详解

最近项目中用到了github上的PinnedSectionListView，正好有时间就来说说它的用法。它是继承了listview，用法跟listview一样的。效果就是可以固定标签页在顶部，当第二个标签到上方的时候向上滑会把第一个标签给顶上去。先来看看github上的实现效果吧。





1.它的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
style="@style/mydata_all_center_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#fff">

<com.view.pinnedsectionlistview.PinnedSectionListView
android:id="@+id/listview_scrol"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@null"
android:footerDividersEnabled="false"
android:headerDividersEnabled="false"
/>

</RelativeLayout>

2.在MainActivity 的 onCreate（）中findViewById：

PinnedSectionListView listview_scrol = (PinnedSectionListView)view.findViewById(R.id.listview_scrol);

3.设置它的adapter：

SectionedAdapter newadapter=new SectionedAdapter(getactivity,addList);
listview_scrol.setAdapter(newadapter);

getactivity是Context，addList是数据。

List<HomeItem> scoller = new ArrayList<HomeItem>();
private List<HomeItem> addList(List<GetCategoryWithGoodsBean>  list){
//把数据添加到一个list里面
List<HomeItem> items = new ArrayList<HomeItem>();

for(int i=0;i<list.size();i++){
HomeItem item=new HomeItem();
HomeItem scoll=new HomeItem();
item.type=item.ITEM_VIEW_TYPE_HEADER;//把头布局放进list里面   这是头部的flag
item.CategoryName=list.get(i).CategoryName;
item.CategoryId=list.get(i).CategoryId;
items.add(item);
scoll.scollerTo=items.size();
scoller.add(scoll);
for(int j=0;j<list.get(i).GoodsList.size();j++){
HomeItem item1=new HomeItem();
item1.BannerImagePath=list.get(i).GoodsList.get(j).BannerImagePath;
item1.FlagPath=list.get(i).GoodsList.get(j).FlagPath;
item1.OriginName=list.get(i).GoodsList.get(j).OriginName;
item1.BrandName=list.get(i).GoodsList.get(j).BrandName;
item1.GoodsName=list.get(i).GoodsList.get(j).GoodsName;
item1.type=item.ITEM_VIEW_TYPE_BODY_ONE;//把条目数据放进list里面    这是item的flag
item1.GoodsNumber=list.get(i).GoodsList.get(j).GoodsNumber;
item1.Price=list.get(i).GoodsList.get(j).GoodsPrice.Price;
items.add(item1);
}
}
return items;
}

上面是把后台请求回来的数据存在一个list里面，传给adapter。其中重要的是添加头部的flag和item的flag。因为在adapter里面要用这个flag来判断返回哪个布局。

4.adapter继承BaseAdapter，并实现PinnedSectionListAdapter：

/**
* 首页adapter
*
* @author wm.liu
*
*/
public class SectionedAdapter extends BaseAdapter implements
PinnedSectionListAdapter {
private Context getactivity;
private List<HomeItem> list;

public SectionedAdapter(Context getactivity, List<HomeItem> list) {
this.getactivity = getactivity;
this.list = list;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return list.get(position);
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public boolean isItemViewTypePinned(int viewType) {//返回是否是头部
return viewType == HomeItem.ITEM_VIEW_TYPE_HEADER;
}

@Override
public int getItemViewType(int position) {//返回每个item的flag
return list.get(position).type;
}

@Override
public int getViewTypeCount() {//返回头部的个数
return top_head_count;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {

int itemViewType = getItemViewType(position);
final HomeItem myItem = list.get(position);
if(itemViewType == HomeItem.ITEM_VIEW_TYPE_HEADER) {
if(convertView==null){
convertView = View.inflate(getactivity, R.layout.newarrival_header_item, null);//头布局
}
TextView textItem = (TextView) convertView.findViewById(R.id.textItem);
TextView tv_more = (TextView) convertView.findViewById(R.id.tv_more);
textItem.setText(myItem.CategoryName);

} else {
if(convertView==null){
convertView = View.inflate(getactivity, R.layout.comments_item, null);//item布局
}
TextView goods_originname = (TextView) convertView.findViewById(R.id.goods_originname);
ImageView goods_img=(ImageView) convertView.findViewById(R.id.goods_img);
ImageView iv_flag=(ImageView) convertView.findViewById(R.id.iv_flag);
TextView goods_name=(TextView) convertView.findViewById(R.id.goods_name);

ImageLoader.getInstance().displayImage(myItem.BannerImagePath, goods_img);
ImageLoader.getInstance().displayImage(myItem.FlagPath, iv_flag);
goods_originname.setText(myItem.OriginName+"【"+myItem.BrandName+"】");
goods_name.setText(myItem.GoodsName);
}
return convertView;
}
}

GIF太大发不出来

涉及到公司项目就不发源码了。。。。。

附带github上面的源码地址：https://github.com/beworker/pinned-section-listview