文本类组件与滚动视图

1 文本框组件(Text)

例程：Text

...\Text\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:layout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_size="26.5fp"
        />

</DirectionalLayout>

...\Text\entry\src\main\java\com\minwei\text\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        DirectionalLayout layout = (DirectionalLayout)findComponentById(
            ResourceTable.Id_layout);
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(0, 0, 0));
        layout.setBackground(background);

        Text text = (Text)findComponentById(
            ResourceTable.Id_text_helloworld);
        text.setText("红底蓝字" + text.getTextSize());
        text.setPadding(50, 10, 50, 10);
        background = new ShapeElement();
        background.setRgbColor(new RgbColor(255, 0, 0));
        text.setBackground(background);
        text.setTextColor(new Color(0xff0000ff));

        text = new Text(this);
        text.setTextSize(100);
        text.setText("绿底红字" + text.getTextSize());
        text.setPadding(50, 10, 50, 10);
        text.setMarginTop(60);
        background = new ShapeElement();
        background.setRgbColor(new RgbColor(0, 255, 0));
        text.setBackground(background);
        text.setTextColor(new Color(0xffff0000));
        layout.addComponent(text);

        text = new Text(this);
        text.setTextSize(120);
        text.setText("蓝底绿字" + text.getTextSize());
        text.setPadding(50, 10, 50, 10);
        text.setMarginTop(60);
        background = new ShapeElement();
        background.setRgbColor(new RgbColor(0, 0, 255));
        text.setBackground(background);
        text.setTextColor(new Color(0xff00ff00));
        layout.addComponent(text);
    }
    ...
}

运行效果如下图所示：

2 编辑框组件(TextField)

<TextField
    ohos:id="$+id:tf"
    ohos:height="match_content"
    ohos:width="600vp"
    ohos:start_margin="25vp"
    ohos:end_margin="25vp"
    ohos:layout_alignment="vertical_center"
    ohos:text="https://developer.huawei.com"
    ohos:text_size="40vp"
    ohos:text_color="#ff7f27"
    />

((Button)findComponentById(ResourceTable.Id_btn))
    .setClickedListener(new ClickedListener() {
        @Override
        public void onClick(Component component) {
            Intent intent = new Intent();
            intent.setOperation(new OperationBuilder()
                .withDeviceId("")
                .withBundleName("com.minwei.textfield")
                .withAbilityName("com.minwei.textfield.BrowserAbility")
                .build());
            startAbility(intent.setParam("url",
                ((TextField)findComponentById(ResourceTable.Id_tf))
                    .getText()));
        }
    });

例程：TextField

com.minwei.textfield右键
　　New
　　　　Ability
　　　　　　Empty Page Ability(Java)
　　　　　　　　Page Name: BrowserAbility

...\TextField\entry\src\main\resources\base\graphic\background_textfield.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners ohos:radius="25"/>
    <stroke ohos:width="1vp" ohos:color="#ff7f27"/>
</shape>

...\TextField\entry\src\main\resources\base\graphic\background_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners ohos:radius="100"/>
    <solid ohos:color="#ff7f27"/>
</shape>

...\TextField\entry\src\main\resources\base\layout\ability_main.xml

<?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:left_padding="20vp"
    ohos:right_padding="20vp"
    ohos:alignment="center"
    ohos:orientation="horizontal"
    ohos:background_element="#000000">

    <TextField
        ohos:id="$+id:tf"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:padding="2vp"
        ohos:background_element="$graphic:background_textfield"
        ohos:hint="输入网址"
        ohos:text="https://www.baidu.com"
        ohos:text_size="20fp"
        ohos:text_color="#ff7f27"/>

    <Button
        ohos:id="$+id:btn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:left_padding="20vp"
        ohos:right_padding="20vp"
        ohos:top_padding="2vp"
        ohos:bottom_padding="4vp"
        ohos:left_margin="10vp"
        ohos:background_element="$graphic:background_button"
        ohos:text="Go"
        ohos:text_size="20fp"
        ohos:text_color="#ffffff"
        />

</DirectionalLayout>

...\TextField\entry\src\main\resources\base\layout\ability_browser.xml

<?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"
    ohos:background_element="#000000">

    <Text
        ohos:id="$+id:txt"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:multiple_lines="true"
        ohos:text_size="28fp"
        ohos:text_color="#00a2e8"/>

</DirectionalLayout>

...\TextField\entry\src\main\java\com\minwei\textfield\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        findComponentById(ResourceTable.Id_btn)
            .setClickedListener(new ClickedListener() {
                @Override
                public void onClick(Component component) {
                    Intent intent = new Intent();
                    intent.setOperation(new OperationBuilder()
                        .withDeviceId("")
                        .withBundleName("com.minwei.textfield")
                        .withAbilityName("com.minwei.textfield.BrowserAbility")
                        .build());
                    startAbility(intent.setParam("url",
                        ((TextField)findComponentById(ResourceTable.Id_tf))
                            .getText()));
                }
            });
    }
    ...
}

...\TextField\entry\src\main\java\com\minwei\textfield\slice\BrowserAbilitySlice.java

public class BrowserAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        Text text = (Text)findComponentById(ResourceTable.Id_txt);
        text.setText(intent.getStringParam("url"));
        text.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                terminateAbility();
            }
        });
    }
    ...
}

运行效果如下图所示：

　

3 计时器组件(TickTimer)

<TickTimer
    ohos:id="$+id:tt"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text_size="100vp"
    ohos:text_color="#ffffff"
    />

TickTimer tickTimer = (TickTimer)findComponentById(
    ResourceTable.Id_tt);
tickTimer.start();

tickTimer.setClickedListener(new ClickedListener() {
    private boolean running = true;

    @Override
    public void onClick(Component component) {
        if (running)
            tickTimer.stop();
        else
            tickTimer.start();

        running = !running;
    }
});

例程：TickTimer

...\TickTimer\entry\src\main\resources\base\layout\ability_main.xml

<?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"
    ohos:background_element="#000000">

    <TickTimer
        ohos:id="$+id:tt"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="80fp"
        ohos:text_color="#ffffff"
        />

</DirectionalLayout>

...\TickTimer\entry\src\main\java\com\minwei\ticktimer\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        TickTimer tickTimer = (TickTimer)findComponentById(
            ResourceTable.Id_tt);
        tickTimer.start();

        tickTimer.setClickedListener(new ClickedListener() {
            private boolean running = true;

            @Override
            public void onClick(Component component) {
                if (running)
                    tickTimer.stop();
                else
                    tickTimer.start();

                running = !running;
            }
        });
    }
    ...
}

运行效果如下图所示：

4 时钟组件(Clock)

<Clock
    ohos:id="$+id:clk"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text_size="100vp"
    ohos:text_color="#ffffff"
    />

Clock clock = (Clock)findComponentById(ResourceTable.Id_clk);
clock.setClickedListener(new ClickedListener() {
    @Override
    public void onClick(Component component) {
        if (clock.is24HourMode())
            clock.set24HourModeEnabled(false);
        else
            clock.set24HourModeEnabled(true);
    }
});

例程：Clock

...\Clock\entry\src\main\resources\base\layout\ability_main.xml

<?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"
    ohos:background_element="#000000">

    <Clock
        ohos:id="$+id:clk"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="40fp"
        ohos:text_color="#ffffff"
        />

</DirectionalLayout>

...\Clock\entry\src\main\java\com\minwei\clock\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        Clock clock = (Clock)findComponentById(ResourceTable.Id_clk);
        clock.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (clock.is24HourMode())
                    clock.set24HourModeEnabled(false);
                else
                    clock.set24HourModeEnabled(true);
            }
        });
    }
    ...
}

运行效果如下图所示：

　

5 滚动视图组件(ScrollView)

<ScrollView
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:rebound_effect="true">

    <Text
        ohos:id="$+id:txt"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:multiple_lines="true"
        ohos:text="$string:lots_of_text"
        ohos:text_size="33vp"
        ohos:text_alignment="top"
        ohos:text_color="#00ff00"
        />

</ScrollView>

例程：ScrollView

...\ScrollView\entry\src\main\resources\base\element\string.json

{
  "string": [
    ...
    {
      "name": "lots_of_text",
      "value": "臣亮言先帝创业未半而中道崩殂今天下三分益州疲弊此诚危急存亡之秋也然侍卫之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也宫中府中俱为一体陟罚臧否不宜异同若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之理不宜偏私使内外异法也侍中侍郎郭攸之费祎董允等此皆良实志虑忠纯是以先帝简拔以遗陛下愚以为宫中之事事无大小悉以咨之然后施行必能裨补阙漏有所广益将军向宠性行淑均晓畅军事试用于昔日先帝称之曰能是以众议举宠为督愚以为营中之事悉以咨之必能使行阵和睦优劣得所亲贤臣远小人此先汉所以兴隆也亲小人远贤臣此后汉所以倾颓也先帝在时每与臣论此事未尝不叹息痛恨于桓灵也侍中尚书长史参军此悉贞良死节之臣愿陛下亲之信之则汉室之隆可计日而待也臣本布衣躬耕于南阳苟全性命于乱世不求闻达于诸侯先帝不以臣卑鄙猥自枉屈三顾臣于草庐之中咨臣以当世之事由是感激遂许先帝以驱驰后值倾覆受任于败军之际奉命于危难之间尔来二十有一年矣先帝知臣谨慎故临崩寄臣以大事也受命以来夙夜忧叹恐托付不效以伤先帝之明故五月渡泸深入不毛今南方已定兵甲已足当奖率三军北定中原庶竭驽钝攘除奸凶兴复汉室还于旧都此臣所以报先帝而忠陛下之职分也至于斟酌损益进尽忠言则攸之祎允之任也愿陛下托臣以讨贼兴复之效不效则治臣之罪以告先帝之灵若无兴德之言则责攸之祎允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激今当远离临表涕零不知所言"
    }
  ]
}

...\ScrollView\entry\src\main\resources\base\layout\ability_main.xml

<?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:left_padding="4vp"
    ohos:top_padding="10vp"
    ohos:right_padding="4vp"
    ohos:bottom_padding="10vp"
    ohos:background_element="#0000ff">

    <ScrollView
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:rebound_effect="true">

        <Text
            ohos:id="$+id:txt"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:multiple_lines="true"
            ohos:text="$string:lots_of_text"
            ohos:text_size="32fp"
            ohos:text_alignment="top"
            ohos:text_color="#00ff00"
            />

    </ScrollView>

</DirectionalLayout>

运行效果如下图所示：

更多精彩，敬请期待……

达内集团C++教学部 2021年9月15日