android商品详情页面设计详解

2020-10-28 18:31:28 浏览数 (1)

本文实例为大家分享了android商品详情展示的具体代码,供大家参考,具体内容如下

首先看下效果图(样式,布局可以根据产品要求改变), 先大致说一下,整体结构使用的是LinearLayout实现,分上下两部分,上边就是我们能滑动的自定义布局,下面就是“进入店铺”,“立即购买”这两个无关紧要的布局; 下面是根据产品的要求更改的,每个APP几乎都不一样,所以说是无关紧要;

布局文件骨架:

代码语言:javascript复制
<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,然后里面想放什么放什么;

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

0 人点赞