高仿手机淘宝搜索结果页(一)

2019-09-18 21:56 来源:未知
  1. 准备
  2. 交互2.1 上滑隐藏、下滑显示2.2 滑动到顶端2.3 更多菜单UI2.4 列表和网格展示切换
  3. 获取搜索结果列表数据
  4. 排序4.1 销量排序接口联调 4.2 综合排序UI 4.3 综合排序接口联调

模仿饿了么详情页可以跟随手指移动 viewpager变详情页

github,教程

图片 1

详细内容请移步github,欢迎Star

图片 2

高仿蘑菇街欢迎页

教程|github

  1. 网上虽然已经很多了,但是自己去实现一遍,可以加深印象。在实现的过程中可以学到很多其他东西
  2. 在开发过程中,我们可能会遇到在网上搜索某种实现,然后应用到自己的项目中,而我分享的代码都会收录到安卓开发宝典中,方便以后查找。
  3. 记录自己觉得比较有用的实现,以免后面找不到。

注:由于内容比较多,我会分多次分享,代码会走在前面,想提前查看代码的可以查看我的github

Android模仿京东商品详情 选择规格特效

教程

注:这里采用回调方式,主要是为了处理网络图片,可以采用自己项目图片加载框架,避免冲突或重复引用.如果是本地图片也可以采用以下方式设置资源:

欢迎Star or Follow我的GitHub欢迎搜索微信公众号SamuelAndroid关注我,文章末尾有公众号二维码。

Android模仿淘宝 商品详情拖动查看图文详情效果

教程

  1. 布局中添加自定义的CircleMenuLayout
<?xml version="1.0" encoding="utf-8"?><menu xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto"> <item android: android:icon="@mipmap/tb_icon_actionbar_more" android:title="" app:showAsAction="always"> <menu> <item android: android:icon="@mipmap/tb_icon_more_cart_56" android:title="消息" app:showAsAction="never" /> <item android: 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>

闪屏页是如何像云一样消失的

教程|github

图片 3

 circleMenu.setMenuItemIconsAndTexts(mItemImgs, mItemTexts);

做电商的朋友们都会拿淘宝或者京东做对标,这也难怪这两家算是电商行业做的最好的了,那我今天就高仿一下手机淘宝搜索结果页,相似度可以达到95%以上。

注:CircleMenuLayout的background使用辐射渐变,有关shape的使用可以查看我另一篇文章Shape使用总结,这里我要特别说明的是,辐射渐变在5.0以下设备不起效果

<h2 >3. 获取搜索结果列表数据</h2>上面已经讲了如何获取淘宝搜索结果的接口,有了接口,我们就要请求,当前最火的网络请求框架非Retrofit和Rxjava莫属,作为开发人员应当时刻保持对新技术的敏锐。所以我这里也要紧跟潮流。我这里就不上代码了,直接跳转到我的github查看详细内容.

使用CoordinatorLayout打造知乎界面

教程|github

今天给大家分享的是项目中要实现一个可以滑动的圆形分享菜单(这个网上也有很多,来伊份商城里也有类似的界面。具体实现我就不再赘述,直接给大家讲一下如何使用

图片 4公众号

饿了么丝滑无缝过度搜索栏的实现

教程|github

图片 5

上一篇高仿摩拜单车个人中心的文章,吐槽这个已经烂大街了,我很惭愧。今天就趁此机会给大家讲讲为什么我还要去做(不愿看我吐槽的可以跳过)。

以上就是整个布局结构,其中实现滑动隐藏与显示的关键代码就是在需要隐藏的地方加上app:layout_scrollFlags="scroll|enterAlways",详细内容可以到我的github查看源码,有关CoordinatorLayout的使用我后面会写篇文章出来。

饿了么是怎么让Image变成详情页的

教程|github

图片 6

1、优化适配;2、上传到jcenter,方便使用。

<h2 >2.3 更多菜单UI</h2>Toolbar的一级菜单google已经取消了icon的展示,这里我采用子菜单的方式让icon能正常显示出来,这里也算是纪录,以免以后忘记,具体代码如下(icon自己找的,和真实的淘宝有点区别):

这里有各种炫酷的。你需要的或是将来需要的各种android页面动效,持续更新中。。。

图片 7公众号

<h2 >1. 准备</h2>号称自己相似程度是95%以上,不能只是说说,要有真材实料才行。所以这次我会取淘宝的真实数据来展示。手机淘宝通过fiddler是无法抓到包的,所以我通过访问淘宝的H5版本来查看淘宝搜索结果页的接口,

来来来,一起再撸一个Material风格loadingView

教程|github

欢迎Star or Follow我的GitHub也可以搜索微信公众号SamuelAndroid关注我,文章末尾有公众号二维码。

图片 8搜索结果页

合集

  • 比ExpandableListView更强大的分组列表实现
  • 约束布局实战
  • shape使用总结
  • CoordinatorLayout高仿个人中心

<h2 >2.1 上滑隐藏、下滑显示</h2>如果不知道这里的显示效果,可以看一下文章开头的动图,上滑会隐藏搜索栏和五个tab。这样的显示效果,使用CoordinatorLayout最适合不过了。布局结构如下:

滚动隐藏底部导航,全新交互

教程|github

  1. 设置显示资源和文本内容
  • 比ExpandableListView更强大的分组列表实现
  • 约束布局实战
  • shape使用总结
  • CoordinatorLayout高仿个人中心
  • 自定义ViewGroup之圆形菜单
  • PopupWindow的使用和去除黑色边框

一分钟让你拥有微信拖拽透明返回PhotoView

教程|github

图片 9

好处还是很多的

<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>

如何让详情页缩小为横向列表

教程|github

图片 10

图片 11

<h2 >2.2 滑动到顶端</h2>滑动到顶端相信大家都有相关经历,我这里说一下自己的实现步骤:步骤一、检测是否能滑动,我这里使用RecyclerView的canScrollVertically方法;步骤二、为了能让显示更平滑,需要加上动画效果,使用属性动画即可,具体代码下面会有;步骤三、优化阶段,上面已经实现了这个功能,但是为了有更好的体验,这里要需要在已经显示且继续向下滑动时候,则不执行显示动画,反之亦然,具体代码就是代码里的两个return判断。具体代码如下(详细内容可以移步到我的github):

CoordinatorLayout 自定义Behavior并不难

教程|github

<h2 >2. 交互</h2>手机淘宝搜索结果页的交互中规中矩,也符合Google提出Material Design的设计理念,接下来我一一实现。

Android 通过自定义View实现纵向跑马灯效果

教程

更多内容可以关注我的公众号或者搜索SamuelAndroid关注我:

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 {//表示可以滑动 animator = ValueAnimator.ofFloat; if (animator.isRunning() || params.width > 0)//滑动中或已经显示,不要执行 return; } else { animator = ValueAnimator.ofFloat; if (animator.isRunning() || params.width == 0) { return; } } animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float value =  valueAnimator.getAnimatedValue(); params.width =  (ConvertUtils.dp2px * value); params.height =  (ConvertUtils.dp2px * value); upImg.setLayoutParams; } }); animator.setDuration; animator.start(); super.onScrolled(recyclerView, dx, dy); } });
  • 那些年收藏的Android开源库集合(UI效果)&version=12020010&nettype=WIFI&fontScale=100&pass_ticket=XFavRg9dFhPA2ijnWXSxADn6rGBIxZxEoURU0HQf22wVmzuVJxwdSLP+/F1RBsG4)
    这个里面记录了大量的动画效果,类型很全,适合自己研究的

  • 那些年收藏的Android开源库集合(控件上)&version=12020010&nettype=WIFI&fontScale=100&pass_ticket=xukwRp+9kQiqSO+lFjAMaKdeGS+zgqpErcLaaxwLORXAhkvFIeseh5NVT3vbYgmE)
    很多 RN的东西,不错正好好搞 RN

  • 那些年收藏的Android开源库集合(控件下)&version=12020010&nettype=WIFI&fontScale=100&pass_ticket=xukwRp+9kQiqSO+lFjAMaKdeGS+zgqpErcLaaxwLORXAhkvFIeseh5NVT3vbYgmE)

circleMenu.setMenus(menuList, new CircleMenuLayout.OnLoadResCallback() { @Override public void showItem(Object o, ImageView img, TextView txt) { Menu m =  o; Glide.with.load.into; txt.setText; } });

欢迎搜索 SamuelAndroid 或者扫描下面的二维码关注我的公众号,即可查看更多内容和及时收到更新内容

一句代码实现标题栏、导航栏滑动隐藏

教程|github

仿豌豆荚详情页

这是一个非常好的练手项目,内容涵盖丰富,有页面动画,页面和控件滑动坚挺的详细讲解,虽然有一点小bug,但是瑕不掩瑜啊!
强烈推荐,新人 ***** 5克星必备啊!!!

教程 | github

<FrameLayout xmlns:andro 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" android:background="#333" tools:context="com.huaye.odyandroidstore.customview.CircleMenuActivity"> <com.huaye.circlemenu.CircleMenuLayout android: android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:background="@drawable/circle_menu_bg"> <RelativeLayout android: android:layout_width="wrap_content" android:layout_height="wrap_content"> <de.hdodenhof.circleimageview.CircleImageView android:layout_width="90dp" android:layout_height="90dp" android:layout_centerInParent="true" app:border_width="5dp" app:border_color="@android:color/white" android:src="@mipmap/icon_ku_156" /> </RelativeLayout> </com.huaye.circlemenu.CircleMenuLayout></FrameLayout>

5秒让你的View变3D,ThreeDLayout使用和实现

教程|github)

图片 12

图片 13

TextView Spanned实现图文混排以及点击交互

教程|github)

版权声明:本文由彩民之家高手论坛发布于编程技术,转载请注明出处:高仿手机淘宝搜索结果页(一)