HarmonyOS實戰(zhàn)—實現(xiàn)抖音點贊和取消點贊效果

作者：兮動人 2021-08-10 15:37:34

系統(tǒng) OpenHarmony

鴻蒙HarmonyOS是面向多智能終端、全場景的分布式操作系統(tǒng)，為消費者提供跨終端、全場景智慧時代的無縫體驗。

[[416604]]

想了解更多內(nèi)容，請訪問：

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

https://harmonyos.51cto.com

一、雙擊點贊和雙擊取消點贊

如：在抖音中雙擊屏幕之后就可以點贊，小紅心就會變亮。

把白色和紅色的心形圖片復制到 media 下

需要圖片的可以自取，下面白色圖片由于沒有背景，所以顯示的是白色的，下載后鼠標點擊就能看見了

因為要雙擊屏幕才能點贊，所以還要給布局組件id

代碼實現(xiàn)：

ability_main

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    ohos:id="$+id:dl" 
    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:white" 
        ohos:background_element="cyan" 
        > 
 
    </Image> 
 
 
 
</DirectionalLayout>

MainAbilitySlice

package com.xdr630.listenerapplication6.slice; 
 
import com.xdr630.listenerapplication6.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Component; 
import ohos.agp.components.DirectionalLayout; 
import ohos.agp.components.Image; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener { 
 
    Image image; 
 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到圖片組件 
        image = (Image) findComponentById(ResourceTable.Id_img); 
        //找到鋪滿屏幕布局的對象 
        DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl); 
        //2.給布局添加雙擊事件 
        dl.setDoubleClickedListener(this); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    //如果標記為false，表示沒有點贊，此時把白色變?yōu)榧t色 
    //如果標記為true，表示已經(jīng)點贊，再次雙擊后，會把紅色變回白色 
 
    boolean flag = false; 
 
    @Override 
    public void onDoubleClick(Component component) { 
        //修改圖片的紅星就可以了，只需要用到image就行了，所以把image定為成員變量 
 
        if (flag){ 
            image.setImageAndDecodeBounds(ResourceTable.Media_white); 
            //取消點贊變成白色，也要把flag設置為false 
            flag = false; 
        }else{ 
            image.setImageAndDecodeBounds(ResourceTable.Media_red); 
            //當啟動項目的時候，flag初始值是false，就會走下面的else的代碼，變成紅色后就要把flag變成true了 
            flag = true; 
        } 
    } 
}

運行：

雙擊屏幕點贊：

雙擊屏幕后取消點贊：

二、能否按照抖音的業(yè)務去實現(xiàn)呢?

業(yè)務分析：

雙擊屏幕之后點贊。(上面已實現(xiàn))，再次雙擊屏幕之后，不會取消點贊，只有點擊后紅心之后才能取消點贊。
單擊紅心也可以點贊，再次單擊紅心就會取消點贊

實現(xiàn)思路：

1.給最外層的布局添加雙擊事件，雙擊之后點贊，變成紅色心。

如果已經(jīng)被點贊，那么還是修改為紅色心，相當于不做任何處理。

2.給圖片添加單擊事件。

如果沒有點贊，單擊之后，白色心變成紅色心。

如果已經(jīng)點贊了，單擊之后，紅色心變成白色心。

代碼實現(xiàn)：

上面布局文件不變，MainAbilitySlice 如下：

給布局添加雙擊事件，因為再次雙擊不會取消點贊，所以把else代碼里設置為紅色后就把 flag 取反去掉，就不會出現(xiàn)再次雙擊取消點贊了。
給圖片添加單擊事件，因為涉及到點贊后為紅色，再取消就變?yōu)榘咨?，所以要?flag 變?yōu)橄喾吹牟僮?/li>

package com.xdr630.listenerapplication6.slice; 
 
import com.xdr630.listenerapplication6.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Component; 
import ohos.agp.components.DirectionalLayout; 
import ohos.agp.components.Image; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener, Component.ClickedListener { 
 
    Image image; 
 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到圖片組件 
        image = (Image) findComponentById(ResourceTable.Id_img); 
        //找到鋪滿屏幕布局的對象 
        DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl); 
        //2.給布局添加雙擊事件 
        dl.setDoubleClickedListener(this); 
        //3.給圖片添加單擊事件 
        image.setClickedListener(this); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    //如果標記為false，表示沒有點贊，此時把白色變?yōu)榧t色 
    //如果標記為true，表示已經(jīng)點贊，再次雙擊后，會把紅色變回白色 
 
    boolean flag = false; 
 
 
    @Override 
    public void onDoubleClick(Component component) { 
        //修改圖片的紅星就可以了，只需要用到image就行了，所以把image定為成員變量 
 
        if (flag){ 
            image.setImageAndDecodeBounds(ResourceTable.Media_white); 
            //取消點贊變成白色，也要把flag設置為false 
            flag = false; 
        }else{ 
            image.setImageAndDecodeBounds(ResourceTable.Media_red); 
            //當啟動項目的時候，flag初始值是false，就會走下面的else的代碼，此時設置為紅色，把flag去掉，再次雙擊后就還是紅色了 
        } 
    } 
 
    @Override 
    public void onClick(Component component) { 
        if (flag){ 
            image.setImageAndDecodeBounds(ResourceTable.Media_white); 
            flag = false; 
        }else{ 
            image.setImageAndDecodeBounds(ResourceTable.Media_red); 
            flag = true; 
        } 
    } 
}