HarmonyOS實戰(zhàn)—實現(xiàn)相親APP
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
簡易版 相親APP
實現(xiàn)如下效果：
如果喜歡就點(diǎn)擊下面的“聯(lián)系方式”，不喜歡就點(diǎn)擊“下一個”
1. 布局實現(xiàn)
新建項目：MakeFriendsApplication
把以下九個girl圖片復(fù)制到 media 文件夾下
有需要上面圖片素材的小伙伴可以自?。篽ttps://www.aliyundrive.com/s/j59dy5redPR
當(dāng)然也可以自己在網(wǎng)上找，圖片信息如下：
可以在上面的實現(xiàn)看到布局是由：一個圖片+三個文本+兩個按鈕 組成的
布局實現(xiàn)：
- <?xml version="1.0" encoding="utf-8"?>
- <DirectionalLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:alignment="center"
- ohos:orientation="vertical">
- <Image
- ohos:id="$+id:img"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:image_src="$media:girl1"/>
- <Text
- ohos:id="$+id:name"
- ohos:height="50vp"
- ohos:width="150vp"
- ohos:text="姓名：王美花"
- ohos:text_size="20fp"/>
- <Text
- ohos:id="$+id:age"
- ohos:height="50vp"
- ohos:width="150vp"
- ohos:text="年齡：29"
- ohos:text_size="20fp"/>
- <Text
- ohos:id="$+id:address"
- ohos:height="50vp"
- ohos:width="150vp"
- ohos:text="地址：南京"
- ohos:text_size="20fp"/>
- <Button
- ohos:id="$+id:next"
- ohos:height="50vp"
- ohos:width="150vp"
- ohos:background_element="#92D050"
- ohos:text="下一個"
- ohos:text_size="20fp"
- ohos:text_color="#FFFFFF"/>
- <Button
- ohos:id="$+id:get"
- ohos:height="50vp"
- ohos:width="150vp"
- ohos:background_element="#92D050"
- ohos:text="獲取聯(lián)系方式"
- ohos:text_size="20fp"
- ohos:text_color="#FFFFFF"
- ohos:top_margin="10vp"/>
- </DirectionalLayout>
運(yùn)行：
2. 核心業(yè)務(wù)邏輯實現(xiàn)
先找到組件對象
業(yè)務(wù)：點(diǎn)擊了按鈕“下一個”就要修改上面的信息，能不能把上面的信息看作成一個整體的對象?
現(xiàn)在有9個相親對象，點(diǎn)擊“下一個”的時候，就會隨機(jī)把一個相親對象的信息去顯示在上面。
創(chuàng)建一個Javabean類去描述女朋友信息，有了Javabean類后才能在代碼中創(chuàng)建對象
在domain中新建類名為：GirlFriend，在類中的屬性有哪些?
如：圖片、姓名、地址、年齡都是GirlFriend類中的屬性
在資源管理器中獲取圖片，發(fā)現(xiàn)girl圖片是int類型的
所以在JavaBean中GirlFriend類中圖片類型使用int類型
其他屬性使用對應(yīng)的類型
最后生成標(biāo)準(zhǔn)的JavaBean即可
- package com.xdr630.makefriendsapplication.domain;
- public class GirlFriend {
- //照片
- private int photoID;
- //姓名
- private String name;
- //年齡
- private int age;
- //地址
- private String address;
- //空參 + 全參：alt + insert
- public GirlFriend() {
- }
- public GirlFriend(int photoID, String name, int age, String address) {
- this.photoID = photoID;
- this.name = name;
- this.age = age;
- this.address = address;
- }
- public int getPhotoID() {
- return photoID;
- }
- public void setPhotoID(int photoID) {
- this.photoID = photoID;
- }
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public int getAge() {
- return age;
- }
- public void setAge(int age) {
- this.age = age;
- }
- public String getAddress() {
- return address;
- }
- public void setAddress(String address) {
- this.address = address;
- }
- }
創(chuàng)建好了Javabean，就可以創(chuàng)建一個集合裝9個相親的對象，使用集合來存儲了，ArrayList，泛型就可以直接寫創(chuàng)建好的GirlFriend 類
在以后學(xué)習(xí)了和服務(wù)器交互之后，這些數(shù)據(jù)都是從服務(wù)器獲取的，就不是一個一個添加了
下面就是手動添加數(shù)據(jù)來源
創(chuàng)建一個女朋友對象(new GirlFriend )并添加到 list 當(dāng)中
為了方便，省的去查看Javabean中屬性的排序，Ctrl + P 就可以查看參數(shù)了
添加完成9個對象
接著給按鈕添加點(diǎn)擊事件，兩個按鈕都要添加，分別是“next”和“get”按鈕
實現(xiàn)本類中點(diǎn)擊事件
當(dāng)next按鈕被點(diǎn)擊后，就會執(zhí)行本類中的onClick方法
get 按鈕同上也要添加單擊事件
然后在 onClick 方法中判斷點(diǎn)擊是 next 按鈕 或 get 按鈕
因為在 onClick 方法中要用到按鈕的對象，所以把按鈕的對象提升為 成員變量 才能在onClick方法中被訪問的到，用到哪個就提哪個，這些組件都用的到，所以都提為成員變量。
在下面onClick方法當(dāng)中，要從集合中獲取girl信息，所以集合也要提為成員變量
Random對象也放在成員位置，表示在程序啟動之后就創(chuàng)建了一個，如果放在onClick方法中，當(dāng)點(diǎn)擊一次就創(chuàng)建一次，內(nèi)存冗余。
MainAbilitySlice
- package com.xdr630.makefriendsapplication.slice;
- import com.xdr630.makefriendsapplication.ResourceTable;
- import com.xdr630.makefriendsapplication.domain.GirlFriend;
- import ohos.aafwk.ability.AbilitySlice;
- import ohos.aafwk.content.Intent;
- import ohos.agp.components.Button;
- import ohos.agp.components.Component;
- import ohos.agp.components.Image;
- import ohos.agp.components.Text;
- import java.util.ArrayList;
- import java.util.Random;
- public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
- Image img;
- Text name;
- Text age;
- Text address;
- Button next;
- Button get;
- ArrayList<GirlFriend> list = new ArrayList<>();
- @Override
- public void onStart(Intent intent) {
- super.onStart(intent);
- super.setUIContent(ResourceTable.Layout_ability_main);
- //1.找到組件對象
- img = (Image) findComponentById(ResourceTable.Id_img);
- name = (Text) findComponentById(ResourceTable.Id_name);
- age = (Text) findComponentById(ResourceTable.Id_age);
- address = (Text) findComponentById(ResourceTable.Id_address);
- next = (Button) findComponentById(ResourceTable.Id_next);
- get = (Button) findComponentById(ResourceTable.Id_get);
- //2.創(chuàng)建一個集合裝9個相親的對象
- //添加9個對象
- //在以后學(xué)習(xí)了和服務(wù)器交互之后，這些數(shù)據(jù)都是從服務(wù)器獲取的
- list.add(new GirlFriend(ResourceTable.Media_girl1,"王美花1",29,"南京"));
- list.add(new GirlFriend(ResourceTable.Media_girl2,"王美花2",30,"上海"));
- list.add(new GirlFriend(ResourceTable.Media_girl3,"王美花3",31,"武漢"));
- list.add(new GirlFriend(ResourceTable.Media_girl4,"王美花4",28,"長沙"));
- list.add(new GirlFriend(ResourceTable.Media_girl5,"王美花5",25,"南昌"));
- list.add(new GirlFriend(ResourceTable.Media_girl6,"王美花6",26,"杭州"));
- list.add(new GirlFriend(ResourceTable.Media_girl7,"王美花7",23,"深圳"));
- list.add(new GirlFriend(ResourceTable.Media_girl8,"王美花8",22,"北京"));
- list.add(new GirlFriend(ResourceTable.Media_girl9,"王美花9",24,"廣州"));
- //3.給按鈕添加點(diǎn)擊事件
- next.setClickedListener(this);
- get.setClickedListener(this);
- }
- @Override
- public void onActive() {
- super.onActive();
- }
- @Override
- public void onForeground(Intent intent) {
- super.onForeground(intent);
- }
- Random r = new Random();
- @Override
- public void onClick(Component component) {
- if (component == next){
- //點(diǎn)擊的是下一個 --- 換一個girl的信息
- //從集合中獲取一個隨機(jī)的girl的信息
- //獲取一個隨機(jī)索引
- int randomIndex = r.nextInt(list.size());
- //通過隨機(jī)索引獲取隨機(jī)girl信息
- GirlFriend girlFriend = list.get(randomIndex);
- //把隨機(jī)出來的信息設(shè)置到界面當(dāng)中
- img.setImageAndDecodeBounds(girlFriend.getPhotoID());
- name.setText("姓名：" + girlFriend.getName());
- age.setText("年齡：" + girlFriend.getAge());
- address.setText("地址：" + girlFriend.getAddress());
- }else if (component == get){
- //獲取聯(lián)系方式
- //擴(kuò)展：可以跳轉(zhuǎn)到界面讓用戶充值界面，充值后才能看到girl信息
- }
- }
- }
運(yùn)行：
點(diǎn)擊“下一個”
當(dāng)點(diǎn)擊“下一個”按鈕時，信息也會隨之一起獲取的到，所以有需求的小伙伴可以擴(kuò)展下，當(dāng)點(diǎn)擊“下一個”按鈕時信息是隱藏的，只有當(dāng)點(diǎn)擊“獲取聯(lián)系方式”時才能顯示出對應(yīng)的信息，或也可以添加充值頁面，當(dāng)點(diǎn)擊“獲取聯(lián)系方式”時，就跳轉(zhuǎn)到充值頁面，只有充值完后才能看到對應(yīng)的信息。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
