HarmonyOS 鸿蒙Next中单一方向布局实现音乐播放UI

HarmonyOS 鸿蒙Next中单一方向布局实现音乐播放UI 本小节我们将使用DirectionalLayout（单一方向排列布局，我们也可以将其称为线性布局）来实现下面UI图的示例。

UI图

一般我们从UI工程师手里拿到UI界面设计图后，上面有很多尺寸标记等属性。在我们学习了所有布局和组件后，我们完全可以使用一个或者多个布局和组件组合在一起，实现复杂的界面效果。

上面我自己手动拖拽了一个音乐播放界面，没有标注各个属性值，仅用于学习DirectionalLayout布局的使用，不要在意它的美观。

首先我们拿到后，根据上面的标注信息以及组件功能要点等一系列参数，将整个UI界面图根据布局划分多个模块进行父布局占位，然后再根据划分的布局来编写具体的子组件信息。

布局划分

我根据用户的交互性将整个页面以上下结构划分为两部分，上部分为展示型、下部分为控件型。在底部控件区域，是一系列操作按钮，它们在一个布局中，居中排列。

在上部分的展示区域，我又根据控件类型将区域以左右结构划分为两个部分，左区域显示歌曲作者头像，右侧区域显示歌曲信息。

在右侧歌曲信息区域又划分为上下两个区域，上区域用于展示歌曲名称及作词作曲主唱信息，下区域显示歌词内容。

布局占位

在上面我们已经通过不同的功能，不同的特性将整个UI图拆解成多个部分，现在我们将使用DirectionalLayout布局来进行具体布局占位。

  1. 首先，我们将整个布局根据权重分为上下两个区域，上区域占4份，下区域占1份。

布局权重

  1. 接下来我们来进行上区域的左右占位。

布局左右

  1. 上区域的左右布局占位我们已经完成，接下来就是上区域的右侧歌词区域占位，是上下区域占位。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="#5c6d71"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:topLayout"
        ohos:width="match_parent"
        ohos:height="0vp"
        ohos:weight="4"
        ohos:orientation="horizontal">
        <DirectionalLayout
            ohos:id="$+id:leftLayout"
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1">
            <Text
                ohos:width="match_parent"
                ohos:height="match_parent"
                ohos:background_element="#0097A7"
                ohos:text="左"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:rightLayout"
            ohos:width="0vp"
            ohos:height="match_parent"
            ohos:weight="1"
            ohos:orientation="vertical">
            <DirectionalLayout
                ohos:id="$+id:rightTopLayout"
                ohos:width="match_parent"
                ohos:height="0vp"
                ohos:weight="1">
                <Text
                    ohos:width="match_parent"
                    ohos:height="match_parent"
                    ohos:background_element="#00796B"
                    ohos:text="上"/>
            </DirectionalLayout>
            <DirectionalLayout
                ohos:id="$+id:rightBottomLayout"
                ohos:width="match_parent"
                ohos:height="0vp"
                ohos:weight="4">
                <Text
                    ohos:width="match_parent"
                    ohos:height="match_parent"
                    ohos:background_element="#00BCD4"
                    ohos:text="下"/>
            </DirectionalLayout>
        </DirectionalLayout>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:id="$+id:centerLayout"
        ohos:width="match_parent"
        ohos:height="0vp"
        ohos:background_element="#009688"
        ohos:weight="1">
        <Text
            ohos:width="match_parent"
            ohos:height="match_parent"
            ohos:text="下"/>
    </DirectionalLayout>
</DirectionalLayout>

以上便是我们将拆解的UI图进行代码布局占位，接下来我们将根据各个区域的实际显示的控件进行完善界面。

定义组件实现UI图

我们先从上下左右的顺序开始编写组件，我们可以看到原图中左侧是一个圆形的图片，用于展示歌曲作者头像。用于显示图像的组件是Image，会在后续的章节中详细讲解。之前我们是使用DirectionalLayout和Text进行占位时，为了明显期间我们代码写的比较啰嗦，在实际的业务中，我们尽可能使用最优写法。

<DirectionalLayout
    ohos:id="$+id:topLayout"
    ohos:width="match_parent"
    ohos:height="0vp"
    ohos:weight="4"
    ohos:orientation="horizontal">
    <Image
        ohos:id="$+id:leftLayout"
        ohos:width="0vp"
        ohos:height="match_parent"
        ohos:weight="1"
        ohos:image_src="$media:changpian"/>
    <DirectionalLayout
        ohos:id="$+id:rightLayout"
        ohos:width="0vp"
        ohos:height="match_parent"
        ohos:weight="1"
        ohos:orientation="vertical">
        <DirectionalLayout
            ohos:id="$+id:rightTopLayout"
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1">
            <Text
                ohos:width="match_parent"
                ohos:height="match_parent"
                ohos:background_element="#00796B"
                ohos:text="上"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:rightBottomLayout"
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="4">
            <Text
                ohos:width="match_parent"
                ohos:height="match_parent"
                ohos:background_element="#00BCD4"
                ohos:text="下"/>
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

接下来我们将实现右侧的歌词信息布局中的组件。

歌词信息

上布局区域我们把组件都给填充好了，接下来我们将填充下布局区域的组件。在上边文字显示我们目前是以静态方式给定的，所以创建了多个Text组件。

<DirectionalLayout
    ohos:id="$+id:centerLayout"
    ohos:width="match_parent"
    ohos:height="0vp"
    ohos:weight="1"
    ohos:alignment="center"
    ohos:left_margin="200vp"
    ohos:right_margin="200vp"
    ohos:orientation="horizontal">
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:pinghengqi"/>
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:kuaitui"/>
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:bofang"/>
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:kuaijin"/>
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:shengyin"/>
    <Image
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:image_src="$media:liebiao"/>
</DirectionalLayout>

我们启动TV模拟器，运行查看是否和我们刚开始的UI图相似（一些尺寸上的差异暂时忽略不计）。

运行结果

为何图片显示一半？

我们在media中存入的图片应该在32-bit color以下，才能全部渲染。

作者：IT明


更多关于HarmonyOS 鸿蒙Next中单一方向布局实现音乐播放UI的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，实现音乐播放UI的单一方向布局可以通过使用DirectionalLayout或DependentLayout来实现。DirectionalLayout是一种线性布局，支持水平和垂直两种方向，适合用于单一方向的UI排列。以下是一个简单的示例代码，展示如何使用DirectionalLayout实现音乐播放UI：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="24vp">

    <Image
        ohos:id="$+id:album_cover"
        ohos:width="200vp"
        ohos:height="200vp"
        ohos:image_src="$media:album_cover"
        ohos:layout_alignment="center_horizontal"
        ohos:margin_bottom="16vp"/>

    <Text
        ohos:id="$+id:song_title"
        ohos:width="match_content"
        ohos:height="wrap_content"
        ohos:text="Song Title"
        ohos:text_size="24fp"
        ohos:layout_alignment="center_horizontal"
        ohos:margin_bottom="8vp"/>

    <Text
        ohos:id="$+id:artist_name"
        ohos:width="match_content"
        ohos:height="wrap_content"
        ohos:text="Artist Name"
        ohos:text_size="18fp"
        ohos:layout_alignment="center_horizontal"
        ohos:margin_bottom="16vp"/>

    <Slider
        ohos:id="$+id:progress_slider"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:min="0"
        ohos:max="100"
        ohos:progress="50"
        ohos:margin_bottom="16vp"/>

    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:orientation="horizontal"
        ohos:layout_alignment="center_horizontal">

        <Button
            ohos:id="$+id:prev_button"
            ohos:width="wrap_content"
            ohos:height="wrap_content"
            ohos:text="Prev"
            ohos:margin_end="16vp"/>

        <Button
            ohos:id="$+id:play_button"
            ohos:width="wrap_content"
            ohos:height="wrap_content"
            ohos:text="Play"
            ohos:margin_end="16vp"/>

        <Button
            ohos:id="$+id:next_button"
            ohos:width="wrap_content"
            ohos:height="wrap_content"
            ohos:text="Next"/>
    </DirectionalLayout>
</DirectionalLayout>

在这个示例中，DirectionalLayout被设置为垂直方向，所有子组件按从上到下的顺序排列。Image组件用于显示专辑封面，Text组件用于显示歌曲标题和艺术家名称，Slider组件用于显示播放进度，Button组件用于控制播放、暂停和切换歌曲。通过调整DirectionalLayout的orientation属性，可以轻松实现水平或垂直布局。

更多关于HarmonyOS 鸿蒙Next中单一方向布局实现音乐播放UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过DirectionalLayout实现单一方向布局的音乐播放UI。DirectionalLayout支持水平或垂直排列组件。例如，使用Orientation.VERTICAL垂直排列播放控制按钮、进度条和歌曲信息。关键代码示例如下：

DirectionalLayout layout = new DirectionalLayout(context);
layout.setOrientation(Orientation.VERTICAL);

// 添加播放控制按钮
Button playButton = new Button(context);
playButton.setText("播放");
layout.addComponent(playButton);

// 添加进度条
ProgressBar progressBar = new ProgressBar(context);
layout.addComponent(progressBar);

// 添加歌曲信息
Text songInfo = new Text(context);
songInfo.setText("歌曲名称 - 歌手");
layout.addComponent(songInfo);
回到顶部