HarmonyOS實(shí)戰(zhàn)—實(shí)現(xiàn)相親APP

作者：兮動(dòng)人 2021-08-26 15:28:05

系統(tǒng) OpenHarmony

本篇帶給大家運(yùn)用HarmonyOS打造一款相親APP，愿社區(qū)的每一位單身的同志都能通過逛社區(qū)找到心儀的對象。

[[419696]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

簡易版相親APP

實(shí)現(xiàn)如下效果：

如果喜歡就點(diǎn)擊下面的“聯(lián)系方式”，不喜歡就點(diǎn)擊“下一個(gè)”

HarmonyOS實(shí)戰(zhàn)—實(shí)現(xiàn)相親APP-鴻蒙HarmonyOS技術(shù)社區(qū)

1. 布局實(shí)現(xiàn)

新建項(xiàng)目：MakeFriendsApplication

把以下九個(gè)girl圖片復(fù)制到 media 文件夾下

有需要上面圖片素材的小伙伴可以自?。篽ttps://www.aliyundrive.com/s/j59dy5redPR

當(dāng)然也可以自己在網(wǎng)上找，圖片信息如下：

可以在上面的實(shí)現(xiàn)看到布局是由：一個(gè)圖片+三個(gè)文本+兩個(gè)按鈕組成的

布局實(shí)現(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="下一個(gè)" 
        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ù)邏輯實(shí)現(xiàn)

先找到組件對象

業(yè)務(wù)：點(diǎn)擊了按鈕“下一個(gè)”就要修改上面的信息，能不能把上面的信息看作成一個(gè)整體的對象?

現(xiàn)在有9個(gè)相親對象，點(diǎn)擊“下一個(gè)”的時(shí)候，就會(huì)隨機(jī)把一個(gè)相親對象的信息去顯示在上面。

創(chuàng)建一個(gè)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)建一個(gè)集合裝9個(gè)相親的對象，使用集合來存儲(chǔ)了，ArrayList，泛型就可以直接寫創(chuàng)建好的GirlFriend 類

在以后學(xué)習(xí)了和服務(wù)器交互之后，這些數(shù)據(jù)都是從服務(wù)器獲取的，就不是一個(gè)一個(gè)添加了

下面就是手動(dòng)添加數(shù)據(jù)來源

創(chuàng)建一個(gè)女朋友對象(new GirlFriend )并添加到 list 當(dāng)中

為了方便，省的去查看Javabean中屬性的排序，Ctrl + P 就可以查看參數(shù)了

添加完成9個(gè)對象

接著給按鈕添加點(diǎn)擊事件，兩個(gè)按鈕都要添加，分別是“next”和“get”按鈕

實(shí)現(xiàn)本類中點(diǎn)擊事件

當(dāng)next按鈕被點(diǎn)擊后，就會(huì)執(zhí)行本類中的onClick方法

get 按鈕同上也要添加單擊事件

然后在 onClick 方法中判斷點(diǎn)擊是 next 按鈕或 get 按鈕

因?yàn)樵?onClick 方法中要用到按鈕的對象，所以把按鈕的對象提升為成員變量才能在onClick方法中被訪問的到，用到哪個(gè)就提哪個(gè)，這些組件都用的到，所以都提為成員變量。

在下面onClick方法當(dāng)中，要從集合中獲取girl信息，所以集合也要提為成員變量

Random對象也放在成員位置，表示在程序啟動(dòng)之后就創(chuàng)建了一個(gè)，如果放在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)建一個(gè)集合裝9個(gè)相親的對象 
 
 
        //添加9個(gè)對象 
        //在以后學(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)擊的是下一個(gè) --- 換一個(gè)girl的信息 
            //從集合中獲取一個(gè)隨機(jī)的girl的信息 
 
            //獲取一個(gè)隨機(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)擊“下一個(gè)”

當(dāng)點(diǎn)擊“下一個(gè)”按鈕時(shí)，信息也會(huì)隨之一起獲取的到，所以有需求的小伙伴可以擴(kuò)展下，當(dāng)點(diǎn)擊“下一個(gè)”按鈕時(shí)信息是隱藏的，只有當(dāng)點(diǎn)擊“獲取聯(lián)系方式”時(shí)才能顯示出對應(yīng)的信息，或也可以添加充值頁面，當(dāng)點(diǎn)擊“獲取聯(lián)系方式”時(shí)，就跳轉(zhuǎn)到充值頁面，只有充值完后才能看到對應(yīng)的信息。

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com