一、简介
上篇博客概括的介绍了硅谷商城项目的首页技术要点。本篇内容给大家讲解硅谷商城项目分类,分类页面用的技术包括:采用FlycoTabLayout实现标签和分类切换、布局采用百分比适配、整体数据展示采用仿京东的分类页面、热卖类型布局横向滚动采用HorizontalScrollView。
二、详细资源地址
由于篇幅所限,详情情况见如下地址视频和笔记
github地址:https://github.com/atguigu01/Shopping
三、效果展示
四、技术详解
1、采用FlycoTabLayout实现标签和分类切换
详细事情情况参考https://github.com/H07000223/FlycoTabLayout;
2、布局采用百分比适配
1)导包
compile'com.android.support:percent:23.3.0'2)布局文件:
<android.support.percent.PercentRelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".type.fragment.ListFragment"> <ListView android:id="@+id/lv_left" android:layout_width="0dp" android:layout_height="match_parent" android:background="#11000000" android:scrollbars="none" app:layout_widthPercent="22%"/> <android.support.v7.widget.RecyclerView android:id="@+id/rv_right" android:layout_width="0dp" android:layout_height="match_parent" android:layout_toRightOf="@id/lv_left" app:layout_widthPercent="78%"/> android.support.percent.PercentRelativeLayout>3、热卖类型布局横向滚动采用HorizontalScrollView
<HorizontalScrollView android:scrollbars="none" android:id="@+id/hsl_hot_right" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/ll_hot_right" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"/> HorizontalScrollView>
4、整体数据展示采用仿京东的分类页面
左侧分类商品采用listview,右侧商品展示采用分类型recyclerview显示商品。