android商品详情页面设计详解

 更新时间:2017年12月05日 10:56:01   作者:ZhengJiaoCsdn  
这篇文章主要为大家详细介绍了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 换肤技术资料整理

    Android 换肤技术资料整理

    这篇文章主要介绍了 Android 换肤技术总结的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android自定义控件之创建可复用的组合控件

    Android自定义控件之创建可复用的组合控件

    这篇文章主要为大家详细介绍了Android自定义控件之创建可复用的组合控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android在fragment中编写toobar的步骤详解

    Android在fragment中编写toobar的步骤详解

    这篇文章主要介绍了Android在fragment中编写toobar,本文分步骤通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • android实用工具类分享(获取内存/检查网络/屏幕高度/手机分辨率)

    android实用工具类分享(获取内存/检查网络/屏幕高度/手机分辨率)

    这篇文章主要介绍了android实用工具类,包括获取内存、检查网络、屏幕高度、手机分辨率、获取版本号等功能,需要的朋友可以参考下
    2014-03-03
  • Android studio 2020中的Android SDK 下载教程

    Android studio 2020中的Android SDK 下载教程

    这篇文章主要介绍了Android studio 2020中的Android SDK 下载教程,本文图文并茂给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Flutter实现支付宝集五福手画福字功能

    Flutter实现支付宝集五福手画福字功能

    支付宝一年一度的集五福活动又开始了,其中包含了一个功能就是手写福字,还包括撤销一笔,清除重写,保存相册等。本文将介绍如何使用Flutter实现这些功能,感兴趣的可以了解一下
    2022-01-01
  • Android使用HorizontalScrollView实现水平滚动

    Android使用HorizontalScrollView实现水平滚动

    这篇文章主要为大家详细介绍了Android使用HorizontalScrollView实现水平滚动,并点击有相应的反应效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 深入浅析Android JSON解析

    深入浅析Android JSON解析

    android中网络数据传输是经常被用到的,通常我们使用xml或者json,而json更加轻量,便捷,我们使用的更多。我自己在项目中使用很多,今天就说说android中怎么去解析JSON,帮助自己总结内容,同时帮助别人少走弯路
    2015-12-12
  • Android中的Retrofit+OkHttp+RxJava缓存架构使用

    Android中的Retrofit+OkHttp+RxJava缓存架构使用

    Retrofit和OkHttp API以及JVM扩展RxJava都是开源项目,大家可以轻松在GitHub上找到,下载和基本配置部分这里我们不作重点,主要还是来看一下Android中的Retrofit+OkHttp+RxJava缓存架构使用:
    2016-06-06
  • Android Jetpack架构组件 ViewModel详解

    Android Jetpack架构组件 ViewModel详解

    这篇文章主要介绍了Android Jetpack架构组件 ViewModel详解,ViewModel类让数据可在发生屏幕旋转等配置更改后继续存在,ViewModel类旨在以注重生命周期的方式存储和管理界面相关的数据。感兴趣可以来学习一下
    2020-07-07

最新评论