写程序的过程中,想法总会不断地变,有时候会很纠结,到底做哪种效果好,怎么做好呢?
就比如这个音乐播放器,我原来的想法是把列表页面跟歌词页面放在同一个Activity中的两个Fragment,然后通过左右滑动来进行页面的切换。
但是看了酷狗的播放器,它是在启动页面点击了左下角的按钮,就会把歌词页面从右下角斜切上来,我觉得也挺帅的呀,又想做这个效果了。
不管怎么样,先做出一个来再说吧。
下面先看一下效果动态图,机器有点差,开个模拟器真是慢到死。
做得比较匆忙,其实还是有不少Bug的,还有一些功能,比如歌词也还没实现,请各位多包涵。
效果图:
下面我们分几步来讲:
界面:
目前只有两个界面,列表界面MainActivity和歌词DetailActivity。
列表界面也分两部分,上面是一个ListView,下面是一个RelativeLayout,里面放了一个按钮(去歌词界面),一个进度条,一个TextView去显示歌名,两个控制按钮,播放和前进(酷狗就是只有这两个按钮,有点好奇设计的理念是什么,为什么不加前一首?),这个看布局的xml就一目了然了。
\res\layout\activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ListView
android:id="@+id/lvSongs"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:cacheColorHint="#00000000" />
<RelativeLayout
android:layout_width="match_parent"
android:background="#BBBBBB"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="@+id/btnDetail"
android:layout_width="48dip"
android:layout_height="48dip"
android:layout_margin="0dip"
android:background="@drawable/music_app"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"/>
<SeekBar
android:id="@+id/pbDuration"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_marginTop="3dip"
android:layout_height="10dip"
android:layout_marginBottom="3dip"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/btnDetail"
android:maxHeight="1dip"
android:minHeight="1dip"
android:progressDrawable="@drawable/progress_style"
android:thumbOffset="0dip"
android:thumb="@drawable/seekbar_thumb"/>
<TextView
android:id="@+id/tvCurrentMusic"
android:layout_width="190dp"
android:layout_height="32dip"
android:layout_alignBaseline="@+id/btnNext"
android:layout_toRightOf="@+id/btnDetail"
android:gravity="left|center_vertical"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<Button
android:id="@+id/btnStartStop"
android:layout_width="32dip"
android:layout_height="32dip"
android:layout_alignBaseline="@+id/btnNext"
android:layout_below="@+id/pbDuration"
android:layout_toLeftOf="@+id/btnNext"
android:background="@drawable/play"
android:layout_marginRight="5dip"
/>
<Button
android:id="@+id/btnNext"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentRight="true"
android:layout_below="@+id/pbDuration"
android:layout_marginRight="20dip"
android:background="@drawable/forward" />
</RelativeLayout>
</LinearLayout>
其中进度条是用自定义的风格的(也是在CSDN上找的,还没去具体了解,到时了解了再讲一下)。
下面是DetailActivity的布局xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res/com.example.nature"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#00EEEE"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<TextView
android:id="@+id/tvLyric"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="9"
android:gravity="center_vertical"
android:text="To Continue...." />
<LinearLayout
android:id="@+id/llProgress"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<TextView
android:id="@+id/tvTimeElapse