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)仿电商app商品详情页按钮浮动效果
  • Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解
  • Android仿京东、天猫商品详情页
(0)

相关推荐

  • Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解

    一.淘宝商品详情页效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView的竖直排列,以及滑动事件的处理.如下图 三.具体实现 1.继承viewGroup自定义布局View 重写onMeasure()和onLayout方法,在onLayout方法中完成对两个子ScrollView的竖直排列布局,代码如下: 布局文件: <RelativeLayout xmlns:android="http:/

  • 安卓(android)仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到

  • Android仿京东、天猫商品详情页

    前言 前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一张效果: 项目结构分析 首先我们来分析一下要实现上面的效果,我们需要怎么做.顶部是一个可以滑动切换Tab,可以用ViewPager+Fragment实现,也可以使用系统的TabLayout控件实现:而下面的 View是一个可以滑动拖动效果的View,可以采用网上一个叫做DragLayout的控件,我这里是自己实现了一个,主要

  • android商品详情页面设计详解

    本文实例为大家分享了android商品详情展示的具体代码,供大家参考,具体内容如下 首先看下效果图(样式,布局可以根据产品要求改变), 先大致说一下,整体结构使用的是LinearLayout实现,分上下两部分,上边就是我们能滑动的自定义布局,下面就是"进入店铺","立即购买"这两个无关紧要的布局: 下面是根据产品的要求更改的,每个APP几乎都不一样,所以说是无关紧要: 布局文件骨架: <LinearLayout xmlns:android="http

  • ​​​​​​​Android H5通用容器架构设计详解

    目录 背景 术语对齐 探索 如何优雅地提供接口调用? 怎样封装多个不同类型的H5容器容器? 整体架构 通用容器 框架容器 基础组件 这样的架构能带来什么样的好处? 背景 大家如果经历过Hybrid项目的开发,即项目中涉及到H5与Native之间的交互,那么很有可能会遇到各种各样的H5容器.为什么会有那么多各种各样的容器呢...这也是轮子多的通病了,轮子多到业务方不知道选哪个.当然,也有可能大家压根就不会使用到H5容器,直接用系统WebView就完事儿了,比如我的前东家就是这样做的.那这篇文章的主

  • Android Fragment的用法实例详解

    碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示.Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了. Fragment组件 Fragment是Android 3.0的时候被引入的,主要目的是为了给大屏幕(如平板电脑)添加动态和灵活的UI支持.利用Fragment实现更好的用户体验. Fragment加载 1.静态加载:添加Fragment到Activity布局中,以xml的形式. 2.动态加载: <LinearLayout android

  • Android Intent与IntentFilter案例详解

    1. 前言        在Android中有四大组件,这些组件中有三个组件与Intent相关,可见Intent在Android整个生态中的地位高度.Intent是信息的载体,用它可以去请求组件做相应的操作,但是相对于这个功能,Intent本身的结构更值得我们去研究. 2. Intent与组件        Intent促进了组件之间的交互,这对于开发者非常重要,而且它还能做为消息的载体,去指导组件做出相应的行为,也就是说Intent可以携带数据,传递给Activity/Service/Broa

  • Android 菜单栏DIY实现效果详解

    目录 前言 实现的效果和思路 1. 绘制底部布局 2. 添加子view 3. 处理事件分发 4. 做个动画 5. 小结 前言 个人打算开发个视频编辑的APP,然后把一些用上的技术总结一下,这次主要是APP的底部菜单栏用到了一个自定义View去绘制实现的,所以这次主要想讲讲自定义View的一些用到的点和自己如何去DIY一个不一样的自定义布局. 实现的效果和思路 可以先看看实现的效果 两个页面的内容还没做,当前就是一个Demo,可以看到底部的菜单栏是一个绘制出来的不规则的一个布局,那要如何实现呢.可

  • Android pdf viewer在android studio应用问题说明详解

    之前一直是做.NET开发的,最近需要弄一个新闻app,能力有限,只能借助HTML5 WebAPP+android studio来完成这项工作. android studio主要用WebView来加载发布好的WebApp,打包生产APP. 其中由于显示一些pdf文档,所以研究了一下,记录一下心得,同时也希望帮助到新手们. android 显示网络pdf,基本原理:先将pdf文件通过DownloadManager下载到手机sdk某个文件夹中,然后通过android-pdf-viewer插件进行显示.

  • Android 自定义标题栏的实例详解

     Android 自定义标题栏的实例详解 开发 Android APP 经常会用到自定义标题栏,而有多级页面的情况下还需要给自定义标题栏传递数据. 本文要点: 自定义标题填充不完整 自定义标题栏返回按钮的点击事件 一.代码 这里先介绍一下流程: 1. 创建一个标题栏布局文件 mytitlebar.xml 2. 在style.xml中创建 mytitlestyle 主题 3. 创建类 CustomTitleBar 4. 在需要自定义标题栏的Activity的OnCreate方法中实例化 Custo

  • sweet alert dialog 在android studio应用问题说明详解

    看到这个sweet-alert-dialog很亲切,因为前端开发本人用的提示就是这个js插件,java牛人很厉害,直接弄成一个java包插件,Good! 下面记录如何引用到工程,并使用: sweet-alert-dialog插件可以直接到github上下载 地址:https://github.com/pedant/sweet-alert-dialog 或者直接到发布好的页面下载: https://github.com/pedant/sweet-alert-dialog/releases 我下载的

  • Android PhotoView使用步骤实例详解

    Android PhotoView使用步骤实例详解 1.步骤一:在布局文件中的代码: <uk.co.senab.photoview.PhotoView android:id="@+id/img_showimgview" android:layout_width="match_parent" android:layout_height="match_parent" /> 2.步骤二:进行找到控件的id photoview = (Phot

  • Android开发之对话框案例详解(五种对话框)

    下面通过实例代码给大家分享5种android对话框,具体内容详情如下所示: 1 弹出普通对话框 --- 系统更新 2 自定义对话框-- 用户登录 3 时间选择对话框 -- 时间对话框 4 进度条对话框 -- 信息加载.. 5 popuWindow对话框 1 弹出普通对话框 --- 系统更新  //弹出普通对话框 public void showNormalDialog(View v) { AlertDialog.Builder builder = new Builder(this); //设置D

随机推荐