鸿蒙版瑞幸咖啡开发日记（四）咖啡详情页

鸿蒙版瑞幸咖啡开发日记之咖啡详情页

1.整体布局思路
2.具体开发流程
- 2.1 中间滑动内容
- - 2.1.1 顶部轮播图的开发
  - 2.1.2 收藏口味
  - 2.1.3 详情页咖啡名称
  - 2.1.4 口味和温度选择
  - 2.1.5 商品详情介绍
- 2.2 底部结算栏
- - 2.2.1 整体布局方式
  - 2.2.2 具体开发
3.整体布局文件

这里我们首先看一下最终的效果图，几乎与原版是一样的，有一点点小小的区别在于顶部轮播图小圆点的切换。

1.整体布局思路

首先除顶部外，其余部分均采用了ScrollView进行展示，因为用户需要向下拖动查看内容
其次由于底部结算栏是一直固定在底部的，所以整体布局我是使用了相对布局DependentLayout进行布局，由中间滑动界面Scrollview和底部结算栏DirectionLayout组成

2.具体开发流程

我打算从整体思路为基点，阐述具体的开发流程，因此从中间滑动内容和底部结算栏分别进行描述。

2.1 中间滑动内容

2.1.1 顶部轮播图的开发

从演示内容来看，顶部是一个轮播图，图片是我在网上随便找的哈，你也根据自己的喜好自己更改哦【彩蛋：最近是情人节，所以我喝了瑞幸的狠狠爱你可可鸳鸯】
轮播图可以通过鸿蒙提供的PageSlider进行开发：

首先构造轮播图的图片模板文件template_coffee_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="230vp"ohos:width="match_parent"ohos:orientation="vertical"><Imageohos:id="$+id:coffee_image"ohos:height="match_parent"ohos:width="match_parent"ohos:scale_mode="stretch"ohos:clip_alignment="center"/></DirectionalLayout>

由于PageSlider需要我们进行适配，所以我们需要构造自己的适配器CoffeeImagePageSliderProvider【这里可以去看官方文档：鸿蒙PageSlider组件】
当然，你也可以看完我的PageSlider开发流程，再给你总结一个脑图，亲妈教学一步到位(#^ . ^#)

public class CoffeeImagePageSliderProvider extends PageSliderProvider {private List<Integer> images;private AbilitySlice abilitySlice;public CoffeeImagePageSliderProvider(List<Integer> images, AbilitySlice abilitySlice) {this.images = images;this.abilitySlice = abilitySlice;}@Overridepublic int getCount() {return images.size();}@Overridepublic Object createPageInContainer(ComponentContainer componentContainer, int i) {DirectionalLayout template = (DirectionalLayout) LayoutScatter.getInstance(abilitySlice).parse(ResourceTable.Layout_template_coffee_detail, null, false);Image detailImage = (Image) template.findComponentById(ResourceTable.Id_coffee_image);int pixel = images.get(i);detailImage.setPixelMap(pixel);componentContainer.addComponent(template);return template;}@Overridepublic void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {//滑出屏幕的组件进行移除componentContainer.removeComponent((Component) o);}@Overridepublic boolean isPageMatchToObject(Component component, Object o) {return true;}
}

总结：

我们可以看到自己的适配器Provider继承了PageSliderProvider，因此我们只需要重写父类里面的四个方法即可：
getCount()：主要是获取轮播图总共有几张图片
createPageInContainer()：将图片渲染到刚刚1.中的提到模板后，将图片添加到容器中
destroyPageFromContainer()：滑出屏幕的组件进行移除
isPageMatchToObject()：设置为true

回到我们需要加载轮播图的Slice界面中，设置适配器和拿到PageSlider组件

public class CoffeeDetailSlice extends AbilitySlice {private int[] images = {ResourceTable.Media_lunbo2,ResourceTable.Media_lunbo4};private CoffeeImagePageSliderProvider coffeeDetailImageProvider;@Overrideprotected void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_coffee_detail);// 从Layout_coffee_detail中拿到展示轮播图的组件PageSliderPageSlider ps = (PageSlider) this.findComponentById(ResourceTable.Id_coffee_detail_pageSlider);// 初始化自己的适配器CoffeeImagePageSliderProvidercoffeeDetailImageProvider = new CoffeeImagePageSliderProvider(initPage(),this);// 给PageSlider进行适配器设置ps.setProvider(coffeeDetailImageProvider);}private List<Integer> initPage() {List<Integer> imagesArray = new ArrayList<>();for (int image : images) {imagesArray.add(image);}return imagesArray;}
}

OK到这里，我们的轮播图就开发完成了，你可以启动真机或者模拟器运行查看最终的结果！是不是很炫酷啊，所以我这里给您总结一下开发流程：

2.1.2 收藏口味

大家还记得我们的总体布局是使用的DependentLayout嘛，因此如果我们不知道位置关系，它会自动件覆盖显示，我们这里的收藏口味图标在屏幕右侧，因此我们右对齐显示就行，另外，我给大家计算记下尺寸关系

上面的轮播图片我们设置的高度为230vp，而我们这里的爱心布局高度是50vp，我们正好要显示在中间，因此距离顶部的高度top_margin应该是230 - 50/2 = 205vp
设置布局的背景模板star_taste.xml

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval"><solid ohos:color="#fff"/>
</shape>

进行图片的设置

<DependentLayoutohos:id="$+id:star_dl"ohos:height="50vp"ohos:width="50vp"ohos:background_element="$graphic:star_taste"ohos:align_parent_right="true"ohos:right_margin="30vp"ohos:top_margin="205vp"><Imageohos:image_src="$media:star"ohos:center_in_parent="true"ohos:scale_mode="stretch"ohos:height="30vp"ohos:width="30vp"/>
</DependentLayout>

有了图片的设置，文字那也很简单了，只要计算距离顶部的尺寸后，设置一下即可

<Textohos:align_parent_right="true"ohos:right_margin="26vp"ohos:top_margin="260vp"ohos:height="match_content"ohos:width="match_content"ohos:text="收藏口味"ohos:text_color="#6a6a6a"ohos:text_alignment="center"ohos:text_size="16fp"/>

2.1.3 详情页咖啡名称

名称就是一个简单的文本组件设置，但是这里注意是相对布局，所以指明一下位置below="$id:coffee_detail_pageSlider"即可

 <Textohos:id="$+id:coffee_title"ohos:below="$id:coffee_detail_pageSlider"ohos:margin="8vp"ohos:height="match_content"ohos:width="match_content"ohos:text="狠狠爱你可可鸳鸯"ohos:text_size="24fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/>

2.1.4 口味和温度选择

这里温度的选择我是使用了一个DirectionalLayout作为整体布局组件，然后里面套了一个Text和两个Button，这里也要注意是相对布局，所以要设置位于上面的咖啡名称下面

两个按钮的背景文件如下：

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"><corners ohos:radius="8vp"/><solid ohos:color="#ebedf9"/>
</shape>

整个温度选择布代码如下：

<!--温度选择-->
<DirectionalLayoutohos:id="$+id:temperature_choose"ohos:below="$id:coffee_title"ohos:height="40vp"ohos:width="match_parent"ohos:orientation="horizontal"ohos:left_margin="8vp"ohos:top_margin="10vp"><Textohos:height="match_content"ohos:width="match_content"ohos:text="温度"ohos:text_size="18fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/><Buttonohos:left_margin="20vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="冰"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:temperature_choose"ohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="热"ohos:text_size="14fp"ohos:text_color="#242995"ohos:text_alignment="center"/></DirectionalLayout>

有了温度选择，口味选择一样的道理

<!--糖度选择-->
<DirectionalLayoutohos:id="$+id:sweet_choose"ohos:below="$id:temperature_choose"ohos:height="40vp"ohos:width="match_parent"ohos:orientation="horizontal"ohos:left_margin="8vp"ohos:top_margin="10vp"><Textohos:height="match_content"ohos:width="match_content"ohos:text="糖度"ohos:text_size="18fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:temperature_choose"ohos:left_margin="20vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="不另外加糖"ohos:text_size="14fp"ohos:text_color="#242995"ohos:text_alignment="center"/><Buttonohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="半糖"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/><Buttonohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="标准糖"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/>
</DirectionalLayout>

2.1.5 商品详情介绍

我这里，主要是使用了一个DirectionalLayout作为整体布局组件，然后垂直方向一个Text组件和四个Image组件，其次就是为了美观一些padding的设置了

<DirectionalLayoutohos:below="$id:sweet_choose"ohos:padding="3vp"ohos:top_margin="4vp"ohos:left_margin="14vp"ohos:right_margin="14vp"ohos:height="match_content"ohos:width="match_parent"ohos:orientation="vertical"ohos:background_element="$graphic:common_background"><Textohos:bottom_margin="6vp"ohos:height="match_content"ohos:width="match_content"ohos:text="商品详情"ohos:text_size="15vp"ohos:text_color="#333"ohos:text_alignment="center"/><Imageohos:height="600vp"ohos:width="match_parent"ohos:image_src="$media:detail1"ohos:scale_mode="stretch"/><Imageohos:height="400vp"ohos:width="match_parent"ohos:image_src="$media:detail2"ohos:scale_mode="stretch"/><Imageohos:height="340vp"ohos:width="match_parent"ohos:image_src="$media:detail3"ohos:scale_mode="stretch"/><Imageohos:height="600vp"ohos:width="match_parent"ohos:image_src="$media:detail4"ohos:scale_mode="stretch"/></DirectionalLayout>

2.2 底部结算栏

2.2.1 整体布局方式

从上到下是垂直布局，也就是上面一层信息和下面的两个按钮
上面一层中的价格与选择信息和右边的数量选择是水平布局
价格和选择信息是垂直布局
两个按钮是水平布局

2.2.2 具体开发

<!--底部购买栏-->
<DirectionalLayoutohos:height="110vp"ohos:width="match_parent"ohos:orientation="vertical"ohos:left_padding="15vp"ohos:right_margin="15vp"ohos:top_padding="15vp"ohos:bottom_padding="2vp"ohos:align_parent_bottom="true"><DependentLayoutohos:height="44vp"ohos:width="match_parent"ohos:orientation="horizontal"><DirectionalLayoutohos:height="44vp"ohos:width="240vp"ohos:orientation="vertical"><Textohos:height="match_content"ohos:width="match_content"ohos:text="￥18"ohos:text_color="#dd5810"ohos:text_weight="700"ohos:text_size="18fp"ohos:text_alignment="center"/><Textohos:top_margin="3vp"ohos:height="match_content"ohos:width="match_content"ohos:text="厚乳拿铁￥18+热￥0+不另外加糖￥0"ohos:text_color="#727272"ohos:text_size="13fp"ohos:text_alignment="center"/></DirectionalLayout><DirectionalLayoutohos:height="match_parent"ohos:width="80vp"ohos:align_parent_right="true"ohos:orientation="horizontal"><Imageohos:id="$+id:minus"ohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:minus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/><Textohos:layout_alignment="vertical_center"ohos:id="$+id:num"ohos:height="match_content"ohos:width="match_content"ohos:left_margin="2vp"ohos:right_margin="2vp"ohos:text="1"ohos:text_alignment="vertical_center"ohos:text_size="20fp"/><Imageohos:id="$+id:add"ohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:plus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/></DirectionalLayout></DependentLayout><DirectionalLayoutohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"ohos:alignment="vertical_center"ohos:padding="2vp"><Buttonohos:background_element="$graphic:btn_buy_now"ohos:left_margin="17vp"ohos:height="34vp"ohos:width="140vp"ohos:text="立即购买"ohos:text_size="18fp"ohos:text_color="#bfa179"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:btn_add_cart"ohos:left_margin="10vp"ohos:height="34vp"ohos:width="140vp"ohos:text="加入购物车"ohos:text_size="18fp"ohos:text_color="#fff"ohos:text_alignment="center"/></DirectionalLayout>
</DirectionalLayout>

3.整体布局文件

整个布局的文件是coffee_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><!--中间滑动内容--><ScrollViewohos:rebound_effect="true"ohos:height="670vp"ohos:width="360vp"ohos:bottom_margin="110vp"><DependentLayoutohos:height="match_content"ohos:width="match_parent"ohos:orientation="vertical"><PageSliderohos:id="$+id:coffee_detail_pageSlider"ohos:height="match_content"ohos:width="match_parent"ohos:orientation="horizontal"/><DependentLayoutohos:id="$+id:star_dl"ohos:height="50vp"ohos:width="50vp"ohos:background_element="$graphic:star_taste"ohos:align_parent_right="true"ohos:right_margin="30vp"ohos:top_margin="205vp"><Imageohos:image_src="$media:star"ohos:center_in_parent="true"ohos:scale_mode="stretch"ohos:height="30vp"ohos:width="30vp"/></DependentLayout><Textohos:align_parent_right="true"ohos:right_margin="26vp"ohos:top_margin="260vp"ohos:height="match_content"ohos:width="match_content"ohos:text="收藏口味"ohos:text_color="#6a6a6a"ohos:text_alignment="center"ohos:text_size="16fp"/><Textohos:id="$+id:coffee_title"ohos:below="$id:coffee_detail_pageSlider"ohos:margin="8vp"ohos:height="match_content"ohos:width="match_content"ohos:text="狠狠爱你可可鸳鸯"ohos:text_size="24fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/><!--温度选择--><DirectionalLayoutohos:id="$+id:temperature_choose"ohos:below="$id:coffee_title"ohos:height="40vp"ohos:width="match_parent"ohos:orientation="horizontal"ohos:left_margin="8vp"ohos:top_margin="10vp"><Textohos:height="match_content"ohos:width="match_content"ohos:text="温度"ohos:text_size="18fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/><Buttonohos:left_margin="20vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="冰"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:temperature_choose"ohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="热"ohos:text_size="14fp"ohos:text_color="#242995"ohos:text_alignment="center"/></DirectionalLayout><!--糖度选择--><DirectionalLayoutohos:id="$+id:sweet_choose"ohos:below="$id:temperature_choose"ohos:height="40vp"ohos:width="match_parent"ohos:orientation="horizontal"ohos:left_margin="8vp"ohos:top_margin="10vp"><Textohos:height="match_content"ohos:width="match_content"ohos:text="糖度"ohos:text_size="18fp"ohos:text_color="#323232"ohos:text_weight="600"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:temperature_choose"ohos:left_margin="20vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="不另外加糖"ohos:text_size="14fp"ohos:text_color="#242995"ohos:text_alignment="center"/><Buttonohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="半糖"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/><Buttonohos:left_margin="7vp"ohos:height="match_parent"ohos:width="90vp"ohos:text="标准糖"ohos:text_size="14fp"ohos:text_color="#6a6a6a"ohos:text_alignment="center"/></DirectionalLayout><DirectionalLayoutohos:below="$id:sweet_choose"ohos:padding="3vp"ohos:top_margin="4vp"ohos:left_margin="14vp"ohos:right_margin="14vp"ohos:height="match_content"ohos:width="match_parent"ohos:orientation="vertical"ohos:background_element="$graphic:common_background"><Textohos:bottom_margin="6vp"ohos:height="match_content"ohos:width="match_content"ohos:text="商品详情"ohos:text_size="15vp"ohos:text_color="#333"ohos:text_alignment="center"/><Imageohos:height="600vp"ohos:width="match_parent"ohos:image_src="$media:detail1"ohos:scale_mode="stretch"/><Imageohos:height="400vp"ohos:width="match_parent"ohos:image_src="$media:detail2"ohos:scale_mode="stretch"/><Imageohos:height="340vp"ohos:width="match_parent"ohos:image_src="$media:detail3"ohos:scale_mode="stretch"/><Imageohos:height="600vp"ohos:width="match_parent"ohos:image_src="$media:detail4"ohos:scale_mode="stretch"/></DirectionalLayout></DependentLayout></ScrollView><!--底部购买栏--><DirectionalLayoutohos:height="110vp"ohos:width="match_parent"ohos:orientation="vertical"ohos:left_padding="15vp"ohos:right_margin="15vp"ohos:top_padding="15vp"ohos:bottom_padding="2vp"ohos:align_parent_bottom="true"><DependentLayoutohos:height="44vp"ohos:width="match_parent"ohos:orientation="horizontal"><DirectionalLayoutohos:height="44vp"ohos:width="240vp"ohos:orientation="vertical"><Textohos:height="match_content"ohos:width="match_content"ohos:text="￥18"ohos:text_color="#dd5810"ohos:text_weight="700"ohos:text_size="18fp"ohos:text_alignment="center"/><Textohos:top_margin="3vp"ohos:height="match_content"ohos:width="match_content"ohos:text="厚乳拿铁￥18+热￥0+不另外加糖￥0"ohos:text_color="#727272"ohos:text_size="13fp"ohos:text_alignment="center"/></DirectionalLayout><DirectionalLayoutohos:height="match_parent"ohos:width="80vp"ohos:align_parent_right="true"ohos:orientation="horizontal"><Imageohos:id="$+id:minus"ohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:minus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/><Textohos:layout_alignment="vertical_center"ohos:id="$+id:num"ohos:height="match_content"ohos:width="match_content"ohos:left_margin="2vp"ohos:right_margin="2vp"ohos:text="1"ohos:text_alignment="vertical_center"ohos:text_size="20fp"/><Imageohos:id="$+id:add"ohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:plus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/></DirectionalLayout></DependentLayout><DirectionalLayoutohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"ohos:alignment="vertical_center"ohos:padding="2vp"><Buttonohos:background_element="$graphic:btn_buy_now"ohos:left_margin="17vp"ohos:height="34vp"ohos:width="140vp"ohos:text="立即购买"ohos:text_size="18fp"ohos:text_color="#bfa179"ohos:text_alignment="center"/><Buttonohos:background_element="$graphic:btn_add_cart"ohos:left_margin="10vp"ohos:height="34vp"ohos:width="140vp"ohos:text="加入购物车"ohos:text_size="18fp"ohos:text_color="#fff"ohos:text_alignment="center"/></DirectionalLayout></DirectionalLayout></DependentLayout>

鸿蒙版瑞幸咖啡开发日记（四）咖啡详情页相关推荐

鸿蒙版瑞幸咖啡开发日记（二）首页功能实现
鸿蒙版瑞幸咖啡开发日记之首页功能实现 1.需开发的功能归纳 2.首页功能开发 2.1 顶部TabList开发 2.2 一级分类数据渲染 2.3 右侧大分类模板渲染 2.4 右侧具体咖啡数据渲染 2.5 ...
鸿蒙版瑞幸咖啡开发日记（一）首页布局设计
鸿蒙版瑞幸咖啡开发日记之首页布局设计 1.整体布局设计思路 2.三大模块开发 2.1 头部信息栏的开发 2.2 中间菜单栏的开发 2.2.1 一级分类菜单 2.2.2 二级分类菜单思路整理 2.2.3 ...
鸿蒙版瑞幸咖啡开发日记（三）购物车结算栏开发
鸿蒙版瑞幸咖啡开发日记之已点咖啡结算栏开发 1.整体设计思路 2.购物车结算栏布局设计 2.1 右侧购物车图标 2.2 购物车结算栏 2.3 已点咖啡数量圆圈 2.4 已点咖啡模板这里我实现的效果其 ...
鸿蒙版瑞幸咖啡开发日记（五）咖啡详情页逻辑实现
鸿蒙版瑞幸咖啡开发日记之咖啡详情页逻辑实现 1.逻辑归纳 2.开发流程 2.1 咖啡标题 2.2 温度和糖度选择 2.3 数量选择 2.4 结算后返回 3.整体代码我们先来看一下总体的效果 1.逻辑 ...
第七章 Web开发实战2——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
OpenResty学习——第七章 Web开发实战2——商品详情页
本文转自https://blog.csdn.net/jinnianshilongnian/article/details/84704211,好文要顶,感谢博主分享! 本章以京东商品详情页为例,京东商品 ...
HelloDjango 第 08 篇：开发博客文章详情页
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...
ofo创始人戴威开“美版瑞幸”：估值2亿美元网友却喊他退押金
雷递网乐天 5月17日 ofo创始人戴威日前被曝参与About Time Coffee创业. 据外媒披露,2022年2月,一家带有红色霓虹灯标志的小咖啡店在纽约市最田园诗般的街区之一格拉梅西公园开业 ...
芯科EmberZNet_ZigBee3.0_EFR32MG开发日记四：ZigBee例程下载至开发套件
检查硬件连接把JLink仿真器20P数据线正确安插在ZigBee开发套件的液晶底板上,ZigBee模块及任意一块传感器模块正确安插在液晶底板上.通过USB线把仿真器与计算机连接起来. 在Simpli ...
React开发（223）:详情页根据数组map处理返回值
<Col span={6}>{isDicTonList &&isDicTonList.map((item, index) => {if (item.key === a ...