完整APP项目源码(含服务)-仿京东分类

完整APP项目(含服务器源码)第二课 - 仿京东商品分类

首先分京东商品分类的结构:左边是一级分类 , 右边是二级分类, 二级分类下是三级分类, 如下图:

 

分析结构如下:

昨天是个listview , 右边是一个GridView.

list实现是很常用的, 但是GridView分组目前Android SDK没有提供这个功能. 这里我们采用的是第三方库: StickyGridHeadersGridView 可以前往github下载.

部分代码片段 , main.xml

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/bg_activity">
    <include layout="@layout/titlebar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ListView
             android:id="@+id/category_left_lstv"
             android:layout_width="match_parent"
             android:layout_height="fill_parent"
             android:layout_weight="3"
             android:choiceMode="singleChoice"
             android:divider="@color/separator_line"
             android:dividerHeight="1px"
             android:listSelector="#00000000"
             android:scrollbars="none" >
         </ListView>

        <com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
             android:id="@+id/category_right_gdvv"
             android:layout_width="match_parent"
             android:layout_height="fill_parent"
             android:layout_marginLeft="@dimen/margin_space"
             android:layout_marginRight="@dimen/margin_space"
             android:layout_weight="1"
             android:numColumns="3"
             android:listSelector="@android:color/transparent"
             android:background="@color/bg_activity"
             android:scrollbars="none"/>
 	</LinearLayout>

</LinearLayout>

   

 

   代码中使用StickyGridHeadersGridView

   

mLeftLstv = (ListView)view.findViewById(R.id.category_left_lstv);
mRightGdv = (StickyGridHeadersGridView)view.findViewById(R.id.category_right_gdvv);
mRightGdv.setAreHeadersSticky(false);	//设置标题栏不随着列表滑动而滑动
mLeftAdapter = new SPCategoryLeftAdapter(getActivity());
mRightAdapter = new SPCategoryRightAdapter(getActivity());
		
mLeftLstv.setAdapter(mLeftAdapter);
mRightGdv.setAdapter(mRightAdapter);

 

 

   关键是Adapter的实现: 

   Adapter需要实现implements StickyGridHeadersSimpleAdapter接口, 并实现以下两个方法:

   public long getHeaderId(int position)    

   标题ID , 如果该ID与上一ID不同就会调用的getHeaderView创建一个HeadView

   public View getHeaderView(int position, View convertView, ViewGroup parent)

   该函数返回一个HeadView布局文件.

   

@Override
	public long getHeaderId(int position) {
		SPCategory parentCategory = mCategoryLst.get(position).getParentCategory();
		return parentCategory.getId() ;
	}

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

		HeaderViewHolder headerHolder;
		if (convertView == null) {
			headerHolder = new HeaderViewHolder();
			convertView = LayoutInflater.from(mContext).inflate(R.layout.category_grid_title_item, parent, false);
			headerHolder.titleTxtv = (TextView) convertView.findViewById(R.id.catelogy_right_title_txtv);
			convertView.setTag(headerHolder);
		} else {
			headerHolder = (HeaderViewHolder) convertView.getTag();
		}
		SPCategory parentCategory = mCategoryLst.get(position).getParentCategory();
		headerHolder.titleTxtv.setText(parentCategory.getName());
		return convertView;
	}

    

    完整源码下载地址: demo tpshop安卓源码下载