Android实训2_音乐播放器界面制作_相对布局

实训2   音乐播放器界面制作

【实训名称】

音乐播放器界面制作

【实训效果】

【实训目的】

掌握Android中相对布局的使用

【实训素材】

drawable-hdpi文件夹：

【实训素材CSDN资源链接】

https://download.csdn.net/download/xiaohui_student/88351534?spm=1001.2014.3001.5503

【准备工作】

创建Android项目——Music Application 将实训素材drawable-hdpi文件夹移动至app/src/main/res目录下

【知识点】

1.RelativeLayout（相对布局）通过相对定位的方式指定子控件的位置。在XML布局文件中定义相对布局时使用<RelativeLayout>标签，基本语法格式如下所示。 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"         属性 = "属性值"         ......> </RelativeLayout> 2.在RelativeLayout中的子控件具备一些属性，用于指定子控件的位置，这些子控件的属性如下表所示。 属性名称 功能描述 android:layout_centerInParent 设置当前控件位于父布局的中央位置 android:layout_centerVertical 设置当前控件位于父布局的垂直居中位置 android:layout_centerHorizontal 设置当前控件位于父控件的水平居中位置 android:layout_above 设置当前控件位于某控件上方 android:layout_below 设置当前控件位于某控件下方 android:layout_toLeftOf 设置当前控件位于某控件左侧 android:layout_toRightOf 设置当前控件位于某控件右侧 android:layout_alignParentTop 设置当前控件是否与父控件顶端对齐 android:layout_alignParentLeft 设置当前控件是否与父控件左对齐 android:layout_alignParentRight 设置当前控件是否与父控件右对齐 android:layout_alignParentBottom 设置当前控件是否与父控件底端对齐 android:layout_alignTop 设置当前控件的上边界与某控件的上边界对齐 android:layout_alignBottom 设置当前控件的下边界与某控件的下边界对齐 android:layout_alignLeft 设置当前控件的左边界与某控件的左边界对齐 android:layout_alignRight 设置当前控件的右边界与某控件的右边界对齐

【相关代码】

将原来的app/src/main/res/layout/activity_main.xml文件删除，创建新的布局文件，文件名为activity_main.xml。

在app/src/main/layout/activity_main.xml文件中输入以下内容

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="@drawable/music_bg">     <Button         android:id="@+id/btn_icon"         android:layout_width="180dp"         android:layout_height="180dp"         android:layout_centerHorizontal="true"         android:layout_marginTop="180dp"         android:background="@drawable/music_icon"></Button>     <Button         android:id="@+id/btn_process"         android:layout_width="300dp"         android:layout_height="20dp"         android:layout_below="@id/btn_icon"         android:layout_centerHorizontal="true"         android:layout_marginTop="100dp"         android:background="@drawable/progress_icon"></Button>     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@id/btn_process"         android:layout_marginTop="80dp"         android:gravity="center_horizontal">         <Button             android:id="@+id/btn_left"             android:layout_width="50dp"             android:layout_height="50dp"             android:background="@drawable/left_icon">         </Button>         <Button             android:id="@+id/btn_middle"             android:layout_width="50dp"             android:layout_height="50dp"             android:layout_toRightOf="@id/btn_left"             android:layout_marginLeft="50dp"             android:background="@drawable/middle_icon">         </Button>         <Button             android:id="@+id/btn_right"             android:layout_width="50dp"             android:layout_height="50dp"             android:layout_toRightOf="@id/btn_middle"             android:layout_marginLeft="50dp"             android:background="@drawable/right_icon">         </Button>     </RelativeLayout> </RelativeLayout>