Android应用开发 MP3音乐播放器界面设计 2

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

Android应用开发--MP3音乐播放器界面设计(2)

2013年5月25日 简、美音乐播放器开发

真得很无奈,原本打算很快结束这个实战项目的,但因为各种满课、学科、杂事给耽误了进度,现在小巫的这个简、美音乐播放器基本上已经开发出来了个原型,以后会继续在这个原型基础上添加各种功能。这篇博文继续按照UI先搭建好,再实现业务逻辑。

这里有一点说明一下,关于歌词的滚动显示,小巫还没完全实现,需要去参考一下别人的实现方法,所以布局不太确定,暂时用TextView控件代替,后面可能需要自定义TextView来实现歌词显示的功能,所以这是这个UI需要注意的。

效果图:

           



以上第一个UI是主界面的,稍微美化了一下

列表布局music_list_item_layout.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/RelativeLayout1"    android:layout_width="match_parent"    android:layout_height="50.0dp"    android:orientation="vertical" >    <ImageView        android:id="@+id/albumImage"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        android:src="@drawable/item" />    <TextView        android:id="@+id/music_duration"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:layout_marginRight="5.0dp"        android:textColor="@android:color/white"        android:text="@string/time" />    <TextView        android:id="@+id/music_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_marginLeft="5dp"        android:layout_toRightOf="@+id/albumImage"        android:textColor="@android:color/white"        android:text="@string/siger" />    <TextView        android:id="@+id/music_Artist"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/music_title"        android:layout_below="@id/music_title"        android:textColor="@android:color/white"        android:text="@string/artist" /></RelativeLayout>


第二个是用来显示歌词和控制播放的UI,是这篇博文要实现的。

布局代码如下:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/RelativeLayout1"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/bg_playback" >    <RelativeLayout        android:id="@+id/header_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true" >        <Button            android:id="@id/repeat_music"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:background="@drawable/repeat_none_selector" />        <Button            android:id="@id/shuffle_music"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:background="@drawable/shuffle_none_selector" />        <TextView            android:id="@+id/musicTitle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignBaseline="@id/repeat_music"            android:layout_centerHorizontal="true"            android:text="@string/siger"            android:textAppearance="?android:attr/textAppearanceLarge"             android:ellipsize="marquee"            android:focusable="true"            android:focusableInTouchMode="true"            android:gravity="center_horizontal"            android:lines="1"            android:marqueeRepeatLimit="marquee_forever"            android:textColor="@android:color/white"            android:singleLine="true"/>        <TextView             android:id="@+id/musicArtist"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/musicTitle"            android:layout_marginTop="15dp"            android:layout_centerHorizontal="true"            android:textSize="18sp"            android:textColor="#0F0"            android:text="@string/artist"            />    </RelativeLayout>    <ScrollView        android:id="@+id/lrcScrollView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/header_layout" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:text="好歌不容错过"            android:textAppearance="?android:attr/textAppearanceLarge" />    </ScrollView>    <RelativeLayout        android:id="@+id/footer_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true" >        <RelativeLayout            android:id="@+id/seekbarLayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/lrcScrollView"            android:background="@drawable/player_progresslayout_bg" >            <SeekBar                android:id="@+id/audioTrack"                android:layout_width="match_parent"                android:layout_height="wrap_content"                 android:layout_centerVertical="true"                android:background="@drawable/player_progress_bg"                android:progressDrawable="@drawable/seekbar_img"                android:thumb="@drawable/media_player_progress_button"                />            <TextView                android:id="@+id/current_progress"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_below="@id/audioTrack"                android:text="0:25" />            <TextView                android:id="@+id/final_progress"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_below="@id/audioTrack"                android:text="3:59" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/relativeLayout2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/seekbarLayout" >            <Button                android:id="@id/play_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_above="@+id/relativeLayout2"                android:layout_centerHorizontal="true"                android:background="@drawable/pause_selector" />            <Button                android:id="@id/next_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/play_music"                android:layout_toRightOf="@+id/play_music"                android:background="@drawable/next_music_selector" />            <Button                android:id="@id/previous_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/play_music"                android:layout_toLeftOf="@+id/play_music"                android:background="@drawable/previous_music_selector" />            <Button                android:id="@+id/play_queue"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/next_music"                android:layout_toRightOf="@+id/next_music"                android:background="@drawable/play_queue_selector" />            <Button                android:id="@+id/search_music"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignBaseline="@+id/previous_music"                android:layout_toLeftOf="@+id/previous_music"                android:background="@drawable/search_selector" />        </RelativeLayout>    </RelativeLayout></RelativeLayout>


关于简、美音乐播放器是小巫本人自行设计的,是我想实现的效果,只是给个参考罢了,童鞋们自己可以按照自己的想法来布局,设计出更加美观好看的界面,小巫在这个方面是有些欠缺的。由于整个项目还处于开发状态,暂时不会共享项目源代码,直到把这个播放器开发到比较完善的时候才会上传资源,小巫也会把代码贴在每一篇博文上,需要的可以参考一下。



           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/gfjggtf/article/details/83827706