Android 音乐播放器（1）界面篇

一时失言乱红尘 2022-08-09 12:44 443阅读 0赞

\*\*先分享一下界面成品  
大概就是这样的界面格式参了苹果手机自带的音乐播放器 配色参考了QQ音乐 总体来说还有很多不完善的地方 之后还会进行界面的优化\*\*  
![20151023144329714][]

我先把代码贴出来 会加很详细的注释来讲解布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/beijing3" >//
    
        <LinearLayout
            android:id="@+id/p_lan"
            android:layout_width="fill_parent"
            android:layout_height="80dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="10dp" >
    
            <Button
                android:id="@+id/p_artist"
                android:layout_width="80dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:background="@drawable/artist" />
    
            <Button
                android:id="@+id/p_like"
                android:layout_width="80dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="30dp"
                android:background="@drawable/like" />
    
            <Button
                android:id="@+id/p_recent"
                android:layout_width="80dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="30dp"
                android:background="@drawable/recent" />
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/w_lan"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/p_lan"
            android:layout_marginTop="20dp" >
    
            <TextView
                android:id="@+id/w_artist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="艺术家"
                android:textColor="#FFFFFF"
                android:textSize="20dp" />
    
            <TextView
                android:id="@+id/w_like"    
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="35dp"
                android:text="我的喜爱"
                android:textColor="#FFFFFF"
                android:textSize="20dp" />
    
            <TextView
                android:id="@+id/w_recent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:text="最近播放"
                android:textColor="#FFFFFF"
                android:textSize="20dp" />
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/d_lan"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/w_lan"
            android:layout_marginTop="10dp"
            android:orientation="horizontal" >
    
            <TextView
                android:id="@+id/xian1"
                 android:layout_marginLeft="5dp"
                android:layout_width="90dp"
                android:layout_height="2dp"
                android:background="#FFFFFF"/>
    
            <TextView
                android:id="@+id/d_all"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="所有歌曲"
                 android:textColor="#49CB66"
                android:textSize="25dp" />
    
            <TextView
                android:id="@+id/xian2"
                android:layout_width="90dp"
                android:layout_height="2dp"
                android:layout_marginLeft="10dp"
                android:background="#FFFFFF" />
    
        </LinearLayout>
    
        <ListView
            android:id="@+id/list"
            android:layout_width="fill_parent"
         android:layout_height="200dp"
            android:layout_below="@+id/d_lan"
            android:layout_above="@+id/b_lan"
            >
    
        </ListView>
    
        <LinearLayout
            android:id="@+id/b_lan"
            android:layout_width="fill_parent"
            android:layout_height="70dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true" >
    
            <TextView
                android:id="@+id/b_name"
                android:layout_width="110dp"
                android:layout_height="40dp"
                android:text="歌名" />
    
            <Button
                android:id="@+id/b_previous"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/previous" />
    
            <Button
                android:id="@+id/b_bofang"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/bofang" />
    
            <Button
                android:id="@+id/b_next"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/next" />
        </LinearLayout>
    
    </RelativeLayout>

大布局使用的相对布局 本来使用线性布局也可以  
从上到下用了四个linearlayout 一个listview  
分别是图片布局 文字布局 所有歌曲标题布局  
歌曲清单列表  
播放栏布局  
为了保证图标的原型 不扁 基本我的控件的高度和宽度都是具体值  
还有间距 都设置了 具体的数值  
所有就有可能手机的分辨率问题出现 但是只要细心调就可以弄得很美观

背景图  
![这里写图片描述][20151023153608968]

图标  
![这里写图片描述][20151023153652212]  
![这里写图片描述][20151023153707483]  
![这里写图片描述][20151023153751929]  
![这里写图片描述][20151023153805250]  
![这里写图片描述][20151023153816802]  
![这里写图片描述][20151023153826620]  
![这里写图片描述][20151023153840340]

[20151023144329714]: /images/20220731/c14799e4c97c4b7e82be0f0570348c7a.png
[20151023153608968]: /images/20220731/1aa72c5c29c04059a35f6f9a3eedf06d.png
[20151023153652212]: /images/20220731/028ad06511ba4c0b94f707a25ee96b0b.png
[20151023153707483]: /images/20220731/c32e63a331b44fee8a37294ddca143cd.png
[20151023153751929]: /images/20220731/44aae0fa20374539b4de90c4c377d8bb.png
[20151023153805250]: /images/20220731/4136b21f892744c7b3f46b2fc4bcb81d.png
[20151023153816802]: /images/20220731/b67f10bb19404440a4bf8c7856bbd01f.png
[20151023153826620]: /images/20220731/f619c91a59dd457e88bdca26a80adfab.png
[20151023153840340]: /images/20220731/336a315b641246bd9b79a30d42c6a92d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue音乐播放器（1）

*1.vue.config.js** 可以参考： https://juejin.im/post/5bd02f98e51d457a944b634f https:/...

ゝ一世哀愁。/ 2024年04月19日 10:12/ 0 赞/ 111 阅读

相关 Android简单音乐播放器

话不多说先上效果 ![在这里插入图片描述][20191222014239725.gif_pic_center] 前言写这个音乐播放器实在是迫不得已。因为我们`A

ゞ浴缸里的玫瑰/ 2023年06月24日 08:23/ 0 赞/ 88 阅读

相关 android音乐播放器

需求描述：拥有播放，暂停，重新播放和停止等功能。并且随着音乐的进度，进图条会自动更新。手动拖动进度条也会更新音乐的进度。效果展示示例代码 MainActivi

淩亂°似流年/ 2023年06月11日 09:30/ 0 赞/ 49 阅读

相关 Android 音乐播放器

通过使用MediaPlayer类来简单实现，下面是详细步骤和代码 1. 创建一个MediaPlayer对象 2. 调用setDataSource()，设置音频文件路径 3

曾经终败给现在/ 2023年06月11日 09:30/ 0 赞/ 35 阅读

相关 Android音乐播放器

Android音乐播放器目录 Android音乐播放器目录搭建整体框架功能实

亦凉/ 2022年08月17日 15:12/ 0 赞/ 375 阅读

相关 Android 音乐播放器（1）界面篇

\\先分享一下界面成品大概就是这样的界面格式参了苹果手机自带的音乐播放器配色参考了QQ音乐总体来说还有很多不完善的地方之后还会进行界面的优化\\ ![20151

一时失言乱红尘/ 2022年08月09日 12:44/ 0 赞/ 444 阅读

相关音乐播放器（1）

MainActivity package com.sugesi.musicplayer; import andr

墨蓝/ 2022年06月10日 12:23/ 0 赞/ 396 阅读

相关 android inflater 用法&音乐播放器

在实际开发中LayoutInflater这个类还是非常有用的，它的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/

ゝ一世哀愁。/ 2022年06月10日 10:29/ 0 赞/ 262 阅读

相关简易音乐播放器（Android Studio）

Android期末作业，临时抱佛脚（手动滑稽分享下音乐播放的源码吧。（只能播放内嵌音乐 PS：完整工程下载及相关说明：[https://download.csdn.net

Bertha 。/ 2022年05月17日 04:25/ 0 赞/ 405 阅读

相关 android本地音乐播放器

<table style="border-collapse:collapse;table-layout:fixed;color:rgb(68,68,68);font-famil

深碍√TFBOYSˉ_/ 2022年01月26日 12:09/ 0 赞/ 434 阅读