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

一时失言乱红尘 2022-08-09 12:44 386阅读 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 条评论，386人围观）

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

相关阅读

相关 Vue音乐播放器（1）

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

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

相关 Android音乐播放器

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

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

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

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

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

相关 Android实现网络音乐播放器

本文是一个简单的音乐播放器布局代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout

淡淡的烟草味﹌/ 2022年07月28日 10:57/ 0 赞/ 241 阅读

相关 Android之Mediaplayer音乐播放器

Main3Acticity.java package csdn.example.com.notification.PlayerAudioTest;

心已赠人/ 2022年06月13日 13:27/ 0 赞/ 223 阅读

相关音乐播放器（1）

MainActivity package com.sugesi.musicplayer; import andr

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

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

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

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

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

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

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

相关音乐播放器

项目效果 ![在这里插入图片描述][70] 音乐播放器的简述 “背景图片” 图片首先运用canvas的方式将图片通过drawimage的方法画到canv

浅浅的花香味﹌/ 2022年05月11日 05:16/ 0 赞/ 424 阅读

相关 android本地音乐播放器

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

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