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,然后里面想放什么放什么;

点击打开链接免费下载源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • RXjava网络获取图片数据的方法

    RXjava网络获取图片数据的方法

    这篇文章主要为大家详细介绍了RXjava网络获取图片数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Android开发技巧之ViewStub控件惰性装载

    Android开发技巧之ViewStub控件惰性装载

    布局文件中的控件并不一定在程序启动时全都用到,有一些控件只在特定的情况下才会被使用到;我们急需一种机制来改变<include>标签的这种行为,只在需要时装载控件。这种机制就是本节要介绍的ViewStub控件
    2013-01-01
  • Android中ListView下拉刷新的实现代码

    Android中ListView下拉刷新的实现代码

    这篇文章主要介绍了Android中ListView下拉刷新的实现代码的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android 虚拟按键与沉浸式的适配方法

    Android 虚拟按键与沉浸式的适配方法

    今天小编就为大家分享一篇Android 虚拟按键与沉浸式的适配方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • Android自定义滑动删除效果的实现代码

    Android自定义滑动删除效果的实现代码

    这篇文章将从现有 Android 滑动删除的痛点,到搭建好一个基本的框架,到最终提供一份完整的 Demo为止,争取为读者提供最大的可定制化,需要的朋友可以参考下
    2018-03-03
  • 详细分析Android-Zygote的启动过程

    详细分析Android-Zygote的启动过程

    在Android系统中,所有的应用程序进程以及系统服务进程SystemServer都是由Zygote进程孕育(fork)出来的,这也许就是为什么要把它称为Zygote(受精卵)的原因吧。由于Zygote进程在Android系统中有着如此重要的地位,本文将详细分析它的启动过程
    2021-06-06
  • Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Compose在动画方面下足了功夫,提供了丰富的API。但也正由于API种类繁多,如果想一气儿学下来,最终可能会消化不良,导致似懂非懂。结合例子学习是一个不错的方法,本文就带大家边学边做,通过实现一个微博长按点赞的动画效果,学习了解Compose动画的常见思路和开发技巧
    2022-07-07
  • Android实现简单的答题系统

    Android实现简单的答题系统

    这篇文章主要为大家详细介绍了Android实现简单的答题系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)

    Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)

    Android中Textview和图片同行显示,文字超出用省略号显示,图片自动靠右边。看到这个问题本来认为是一个很正常的需求,看起来很简单,但是做起来却遇到了很蛋疼的问题,怎么搞的都不行,堵了很长时间,下面说一下解决的方案,希望遇到这样问题的朋友可以使用。
    2016-12-12
  • Android开发中解析xml文件XmlUtils工具类与用法示例

    Android开发中解析xml文件XmlUtils工具类与用法示例

    这篇文章主要介绍了Android开发中解析xml文件XmlUtils工具类与用法,结合实例形式分析了Android开发中解析xml文件工具类定义与相关使用技巧,需要的朋友可以参考下
    2018-01-01

最新评论