单一方向布局实现音乐播放UI

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

UI图拆解

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

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

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

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

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

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

布局占位

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

① 首先，我们将整个布局根据权重分为上下两个区域，上区域占4份，下区域占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">
        <Text
            ohos:width="match_parent"
            ohos:height="match_parent"
            ohos:text="上"/>
    </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>

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

<?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">
            <Text
                    ohos:width="match_parent"
                    ohos:height="match_parent"
                    ohos:background_element="#03A9F4"
                    ohos:text="右"/>
        </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>

③ 上区域的左右布局占位我们已经完成，接下来就是上区域的右侧歌词区域占位，是上下区域占位。

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

讨论

为什么高度已经设置成match_parent，图片还是显示一半呢？是必须为114px才行吗？欢迎讨论！！！

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

上布局区域我们把组件都给填充好了，接下来我们将填充下布局区域的组件。在上边文字显示我们目前是以静态方式给定的，所以创建了多个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以下，才能全部渲染。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

单一方向布局实现音乐播放UI

UI图拆解

布局占位

定义组件实现UI图

讨论

为何图片显示一半？

推荐阅读更多精彩内容