鴻蒙版瑞幸咖啡開發日記之咖啡詳情頁

• • 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>

總結

以上是生活随笔為你收集整理的鸿蒙版瑞幸咖啡开发日记（四）咖啡详情页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。