android商品详情页面设计详解
本文实例为大家分享了android商品详情展示的具体代码,供大家参考,具体内容如下
首先看下效果图(样式,布局可以根据产品要求改变),
先大致说一下,整体结构使用的是LinearLayout实现,分上下两部分,上边就是我们能滑动的自定义布局,下面就是“进入店铺”,“立即购买”这两个无关紧要的布局;
下面是根据产品的要求更改的,每个APP几乎都不一样,所以说是无关紧要;
布局文件骨架:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--因为要在整体布局右下角放一个置顶图标,所以用frameLayout包裹一下--> <FrameLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <!--自定义的相对布局--> <www.gd.com.goodsdetails.view.ScrollViewContainer android:layout_width="match_parent" android:layout_height="match_parent"> <!--上半区域的scrollview,因为上半区域也要滑动--> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="240dp"> <!--这块区域放轮播图--> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="500dp"> <!--这块区域放商品详情信息--> </FrameLayout> <!-- 中间继续拖动条目(继续拖动,查看图文详情) 可以根据产品需求更改自己想要的样式(一般这里都是一些简单的文字) --> <RelativeLayout android:layout_width="match_parent" android:layout_height="40dp"> ...... </RelativeLayout> </LinearLayout> </ScrollView><!--结束:上半区域的scrollview--> <!--下面需要显示的webview了--> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" /> </www.gd.com.goodsdetails.view.ScrollViewContainer> <!--一键滑到顶部的图片--> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="15dp" /> </FrameLayout> <!--*******************************************************--> <!--这些无关紧要,“进入店铺”,“立即购买”--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <span style="white-space:pre"> </span>...... </LinearLayout> </LinearLayout>
真个页面最大的难点就是这个自定义的布局文件:ScrollViewContainer
不过非常爽的就是大家不用自己写,直接从demo中把ScrollViewContainer复制到自己的项目中即可使用,非常方便;
效果图就是我们项目中真是使用的,ScrollViewContainer同样分为上下两部分,从“拖动条目”分开;
上半部分最上面一般都会放置一个轮播图,然后下面放一些商品详情,让大家选择的一些属性信息;
这些大家可以根据需求自己添加;
下半部分一般都是放一个webview但是“京东”放置了三个;
我们不用纠结放置几个,因为我们可以把下面的webview更改为ScrollView,然后里面想放什么放什么;
点击打开链接免费下载源码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android在fragment中编写toobar的步骤详解
这篇文章主要介绍了Android在fragment中编写toobar,本文分步骤通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-01-01android实用工具类分享(获取内存/检查网络/屏幕高度/手机分辨率)
这篇文章主要介绍了android实用工具类,包括获取内存、检查网络、屏幕高度、手机分辨率、获取版本号等功能,需要的朋友可以参考下2014-03-03Android studio 2020中的Android SDK 下载教程
这篇文章主要介绍了Android studio 2020中的Android SDK 下载教程,本文图文并茂给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03Android使用HorizontalScrollView实现水平滚动
这篇文章主要为大家详细介绍了Android使用HorizontalScrollView实现水平滚动,并点击有相应的反应效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-11-11Android中的Retrofit+OkHttp+RxJava缓存架构使用
Retrofit和OkHttp API以及JVM扩展RxJava都是开源项目,大家可以轻松在GitHub上找到,下载和基本配置部分这里我们不作重点,主要还是来看一下Android中的Retrofit+OkHttp+RxJava缓存架构使用:2016-06-06Android Jetpack架构组件 ViewModel详解
这篇文章主要介绍了Android Jetpack架构组件 ViewModel详解,ViewModel类让数据可在发生屏幕旋转等配置更改后继续存在,ViewModel类旨在以注重生命周期的方式存储和管理界面相关的数据。感兴趣可以来学习一下2020-07-07
最新评论