做电商的朋友们都会拿淘宝或者京东做对标，这也难怪这两家算是电商行业做的最好的了，那我今天就高仿一下手机淘宝搜索结果页，相似度可以达到95%以上。
欢迎Star or Follow我的GitHub
欢迎搜索微信公众号SamuelAndroid关注我，文章末尾有公众号二维码。
效果如下
搜索结果页
目录
- 准备
- 交互
2.1 上滑隐藏、下滑显示
2.2 滑动到顶端
2.3 更多菜单UI
2.4 列表和网格展示切换 (待续） - 获取搜索结果列表数据
- 排序(待续)
4.1 销量排序接口联调 (待续)
4.2 综合排序UI (待续)
4.3 综合排序接口联调（待续）
<h2 id="1">1. 准备</h2>
号称自己相似程度是95%以上，不能只是说说，要有真材实料才行。所以这次我会取淘宝的真实数据来展示。手机淘宝通过fiddler是无法抓到包的，所以我通过访问淘宝的H5版本来查看淘宝搜索结果页的接口(点我搜索SD卡),
<h2 id="2">2. 交互</h2>
手机淘宝搜索结果页的交互中规中矩，也符合Google提出Material Design的设计理念，接下来我一一实现。
<h2 id="2.1">2.1 上滑隐藏、下滑显示</h2>
如果不知道这里的显示效果，可以看一下文章开头的动图，上滑会隐藏搜索栏和五个tab。这样的显示效果，使用CoordinatorLayout最适合不过了。布局结构如下：
<android.support.design.widget.CoordinatorLayout
...
>
<android.support.design.widget.AppBarLayout
...
>
<android.support.v7.widget.Toolbar
...
// 实现滑动隐藏于显示的关键属性
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
...
>
<TextView
...
android:text="SD卡" />
<ImageView
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<RadioGroup
...
// 实现滑动隐藏于显示的关键属性
app:layout_scrollFlags="scroll|enterAlways"
>
<RadioButton
...
android:text="全部" />
<RadioButton
...
android:text="天猫" />
<RadioButton
...
android:text="店铺"/>
<RadioButton
...
android:text="淘攻略" />
<RadioButton
...
android:text="挑尖货" />
</RadioGroup>
<LinearLayout
...
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
...
>
<LinearLayout
...
>
<TextView
...
android:text="综合排序" />
<ImageView
...
android:src="@mipmap/spinner_down" />
</LinearLayout>
<TextView
...
android:text="销量优先" />
<ImageView
...
/>
</LinearLayout>
<LinearLayout
...
>
<TextView
...
android:text="筛选" />
<ImageView
/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
//搜索结果展示区域
<android.support.v7.widget.RecyclerView
...
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<LinearLayout
...
>
<ImageView
...
/>
<ImageView
...
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
以上就是整个布局结构，其中实现滑动隐藏与显示的关键代码就是在需要隐藏的地方加上app:layout_scrollFlags="scroll|enterAlways"，详细内容可以到我的github查看源码,有关CoordinatorLayout的使用我后面会写篇文章出来。
<h2 id="2.2">2.2 滑动到顶端</h2>
滑动到顶端相信大家都有相关经历，我这里说一下自己的实现步骤：
步骤一、检测是否能滑动，我这里使用RecyclerView的canScrollVertically方法；
步骤二、为了能让显示更平滑，需要加上动画效果，使用属性动画即可，具体代码下面会有；
步骤三、优化阶段，上面已经实现了这个功能，但是为了有更好的体验，这里要需要在已经显示且继续向下滑动时候，则不执行显示动画，反之亦然，具体代码就是代码里的两个return判断。具体代码如下（详细内容可以移步到我的github）：
mps.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
//滑动到顶部按钮展示
ValueAnimator animator;
final LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) upImg.getLayoutParams();
if (recyclerView.canScrollVertically(-1)) {//表示可以滑动
animator = ValueAnimator.ofFloat(0f, 1f);
if (animator.isRunning() || params.width > 0)//滑动中或已经显示，不要执行
return;
} else {
animator = ValueAnimator.ofFloat(1f, 0f);
if (animator.isRunning() || params.width == 0) {
return;
}
}
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
params.width = (int) (ConvertUtils.dp2px(36) * value);
params.height = (int) (ConvertUtils.dp2px(36) * value);
upImg.setLayoutParams(params);
}
});
animator.setDuration(1000);
animator.start();
super.onScrolled(recyclerView, dx, dy);
}
});
<h2 id="2.3">2.3 更多菜单UI</h2>
Toolbar的一级菜单google已经取消了icon的展示，这里我采用子菜单的方式让icon能正常显示出来，这里也算是纪录，以免以后忘记，具体代码如下(icon自己找的，和真实的淘宝有点区别)：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_settings"
android:icon="@mipmap/tb_icon_actionbar_more"
android:title=""
app:showAsAction="always">
<menu>
<item
android:id="@+id/message"
android:icon="@mipmap/tb_icon_more_cart_56"
android:title="消息"
app:showAsAction="never" />
<item
android:id="@+id/home"
android:icon="@mipmap/tb_icon_more_home_56"
android:title="首页"
app:showAsAction="never" />
<item
android:icon="@mipmap/tb_icon_more_my_56"
android:title="帮助"
app:showAsAction="never" />
<item
android:icon="@mipmap/tb_icon_more_nearby_56"
android:title="我要反馈"
app:showAsAction="never" />
<item
android:icon="@mipmap/tb_icon_more_msg_56"
android:title="分享"
app:showAsAction="never" />
</menu>
</item>
</menu>
<h2 id="3">3. 获取搜索结果列表数据</h2>
上面已经讲了如何获取淘宝搜索结果的接口，有了接口，我们就要请求，当前最火的网络请求框架非Retrofit和Rxjava莫属，作为开发人员应当时刻保持对新技术的敏锐。所以我这里也要紧跟潮流。我这里就不上代码了，直接跳转到我的github查看详细内容.
注：由于内容比较多，我会分多次分享，代码会走在前面，想提前查看代码的可以查看我的github
欢迎搜索 SamuelAndroid 或者扫描下面的二维码关注我的公众号，即可查看更多内容和及时收到更新内容
公众号
网友评论