Android简易音乐播放器之界面实现（第一篇）

刚踏入大四，因为找实习，突然想做个简易的音乐播放器练习一下。为了记录自己的开发过程，于是写成了博客。由于本人是一枚学生，可能在开发过程中有很多不规范的地方以及不足，希望大家提出并交流，共同进步。

第一步：实现界面

在最初的时候想要实现怎样的界面才能好看些，参考了许多，最后准备模仿网易云音乐实现自己的界面。因为考虑到这个播放器功能简单，所以也没有去做类似于网易云音乐那样华丽的界面，可以滑动、切换等等......只是简单的表象是网易云音乐的样子，希望大家勿喷。下面就是播放器的首页：

下面是实现这个界面的代码：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <include layout="@layout/top"/>    <ScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scrollbars="none" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <TextView                android:id="@+id/myMusic"                android:layout_width="match_parent"                android:layout_height="60dp"                android:background="#deef"                android:layout_margin="0dp"                android:padding="15dp"                android:gravity="center|left"                android:drawableLeft="@drawable/local"                android:text="  本地音乐"/>            <View                android:layout_width="match_parent"                android:layout_height="1dp"                android:background="#ccc"/>            <TextView                android:layout_width="match_parent"                android:layout_height="60dp"                android:background="#deef"                android:layout_margin="0dp"                android:padding="15dp"                android:gravity="center|left"                android:drawableLeft="@drawable/download"                android:text="  下载管理"/>            <RelativeLayout                android:layout_width="match_parent"                android:layout_height="26dp"                android:background="#DCDCDC" >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="15dp"                    android:layout_centerInParent="true"                    android:layout_alignParentLeft="true"                    android:textSize="12sp"                    android:text="创建的歌单"/>                <ImageView                    android:layout_width="20dp"                    android:layout_height="18dp"                    android:layout_marginRight="10dp"                    android:layout_centerInParent="true"                    android:layout_alignParentRight="true"                    android:src="@drawable/music_menu"/>            </RelativeLayout>            <ListView                android:layout_width="match_parent"                android:layout_height="wrap_content"/>        </LinearLayout>    </ScrollView>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1" >    </LinearLayout>    <include layout="@layout/bottom" /></LinearLayout>

注：1、因为考虑到后期可能会有button滑动效果，所以添加了Scrollview包括整个中间的布局（虽然现在没有，可能后期也不会做。视情况而定）

2、Scrollview使用需要注意的一点是Scrollview里面只能包含一个子View。当有多个View的时候，可以用LinearLayout等布局包含，使其直接子View只有一个

3、为了使bottom控件在LinearLayout中能在最底部显示，添加了一个LinearLayout布局并且使其layout_weight = 1，目的就是为了占满屏幕剩余空间

这是top和bottom的布局，我一并贴了出来

<?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="60dp"    android:background="#fff">        <ImageView            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_alignParentLeft="true"            android:layout_centerInParent="true"            android:layout_marginLeft="15dp"            android:src="@drawable/home_menu"/>        <ImageView            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_marginRight="20dp"            android:layout_toLeftOf="@+id/home_music"            android:layout_centerInParent="true"            android:src="@drawable/cloud"/>        <ImageView            android:id="@+id/home_music"            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_centerInParent="true"            android:src="@drawable/music"/>        <ImageView            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_marginLeft="20dp"            android:layout_centerInParent="true"            android:layout_toRightOf="@+id/home_music"            android:src="@drawable/people"/>        <ImageView            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:layout_marginRight="15dp"            android:src="@drawable/home_search"/></RelativeLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"   >        <LinearLayout            android:id="@+id/lrcLayout"            android:clickable="true"            android:focusable="true"            android:layout_width="0dp"            android:layout_height="60dp"            android:layout_weight="2"            android:orientation="horizontal"  >            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="5dp"                android:layout_gravity="center"                android:src="@drawable/eshen"   />            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="60dp"                android:layout_marginLeft="10dp"                android:orientation="vertical"  >                <com.example.myapplication.MarqueeTextView                    android:id="@+id/music_title"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginTop="5dp"                    android:singleLine="true"                    android:ellipsize="marquee"                    android:focusable="true"                    android:focusableInTouchMode="true"                    android:text="单车"                    android:textSize="16sp"                    android:textColor="#000"  />                <com.example.myapplication.MarqueeTextView                    android:id="@+id/music_duration"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginBottom="3dp"                    android:text="陈奕迅"                    android:textSize="16sp"                    android:textColor="#000"/>            </LinearLayout>        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="60dp"            android:layout_weight="1"            android:orientation="horizontal">            <ImageView                android:id="@+id/previous_music"                android:layout_width="wrap_content"                android:layout_height="20dp"                android:layout_weight="1"                android:layout_marginRight="10dp"                android:layout_gravity="center"                android:src="@drawable/previous"   />            <ImageView                android:id="@+id/play_music"                android:layout_width="wrap_content"                android:layout_height="40dp"                android:layout_weight="1"                android:layout_marginRight="10dp"                android:layout_gravity="center"                android:src="@drawable/play"   />            <ImageView                android:id="@+id/next_music"                android:layout_width="wrap_content"                android:layout_height="20dp"                android:layout_weight="1"                android:layout_gravity="center"                android:layout_marginRight="5dp"                android:src="@drawable/next"   />        </LinearLayout>    </LinearLayout>    <SeekBar        android:id="@+id/mainSeekBar"        android:layout_width="match_parent"        android:layout_height="2dp"  /></LinearLayout>

注：对于bottom代码我也有点小疑问，就是如何能够使SeekBar进度调布满全屏。这个问题是我没有解决好的，希望知道的大神能给予指导。谢谢

结尾：以上呢，就是项目的开篇。刚开始写博客，经验不足，所以第一天的内容比较少。明天会继续更新博客，贴出更多的内容