HarmonyOS實戰—實作跑馬燈效果

1. Text文本框展示大段内容文字

• 文本中展示大段文字，除了這種方式之外，還有其他方式

• 可以使用跑馬燈的形式展示，但需要兩個前提條件，如下：

下面兩個都是預設屬性，也可以省略不寫

• ohos:truncation_mode="ellipsis_at_start"

  ，表示前面的内容省略掉，以“

  ...

  ”的形式，如：

<Text
    ohos:id="$+id:text1"
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:background_element="#55121212"
    ohos:text="小明:你說我這窮日子過到啥時侯是個頭啊？小紅:那得看你能活多久了"
    ohos:text_size="40vp"
    ohos:truncation_mode="ellipsis_at_start"
   />           

• 把寬度改為

  300vp

• 如果想顯示前面的内容，省略後面的内容，隻要把

  ohos:truncation_mode="ellipsis_at_end"

• ohos:truncation_mode="auto_scrolling"

  表示滾動效果

• ohos:auto_scrolling_count="10"

  表示跑馬燈滾動的次數，10表示滾動十次，

  unlimited

  表示無限次數

• ohos:auto_scrolling_duration="2000"

  表示跑的速度，2000是時間機關，毫秒，多少時間跑完，表示2秒跑完這段内容

2. 實作案例

• 建立項目：TextLargeApplication

ability_main

<?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">

    <Text
        ohos:id="$+id:text1"
        ohos:height="100vp"
        ohos:width="300vp"
        ohos:background_element="#55121212"
        ohos:text="小明:你說我這窮日子過到啥時侯是個頭啊？小紅:那得看你能活多久了"
        ohos:text_size="40vp"
        ohos:truncation_mode="auto_scrolling"
        ohos:auto_scrolling_count="unlimited"
        ohos:auto_scrolling_duration="2000"
        />

</DirectionalLayout>           

MainAbilitySlice

package com.xdr630.textlargeapplication.slice;

import com.xdr630.textlargeapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.擷取Text
        Text text1 = (Text) findComponentById(ResourceTable.Id_text1);

        //2.給Text文本添加單擊事件
        //表示當單擊一下的時候，開啟跑馬燈效果
        text1.setClickedListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        //開啟跑馬燈效果
        //兩種方式擷取文本的對象
        //1.方法的參數，參數表示被點選元件的對象
        //2.可以把 onStart 方法中的Text對象，挪到成員位置

        //使用第一種方法實作：
        //先強轉，因為開啟跑馬燈的方法不是父類component裡的方法，而是Text文本裡的方法
        //是以，把component強轉為Text
        Text t = (Text) component;
        t.startAutoScrolling();
    }
}           

• 運作：

• 因為設定了

  auto_scrolling_count="unlimited

  屬性，是以會無限次的滾動。當然也可以設定滾動多少次，以及滾動的時間。