1.
在BigDragableLuncher控件中有3个页面布局.
其中左侧的为:musiclist.xml 右侧的为:gridspecial.xml
中间的为: DragableLuncher控件,其中又有3个可滑动页面,分为左中右.
2.
musiclist.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/musiclist_bkg"
>
<TextView
android:text="歌曲列表"
android:textSize="22sp"
android:background="#a0000000"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="30dip" />
<ListView
android:id="@+id/listview1"
android:layout_width="fill_parent"
android:layout_height="415dip"
android:cacheColorHint="#00000000"
>
</ListView>
</LinearLayout>
其中listview 的item view 如下:
<?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="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dip"
>
<!--歌曲的图标-->
<ImageView
android:id="@+id/iv1"
android:src="@drawable/ic_mp3"
android:layout_width="46dip"
android:layout_height="46dip" />
<RelativeLayout
android:id="@+id/rela1"
android:layout_toRightOf="@+id/iv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!--歌曲名字-->
<TextView
android:id="@+id/tv1"
android:text="TextView"
android:textSize="20sp"
android:textColor="#ffffff"
android:singleLine="true"
android:layout_width="228dip"
android:layout_height="wrap_content" />
<!--歌曲播放总时间-->
<TextView
android:id="@+id/tv2"
android:text="TextView"
android:textSize="18sp"
android:textColor="#7eeb3d"
android:layout_centerHorizontal="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_toRightOf="@+id/iv1"
android:layout_below="@+id/rela1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!--文件夹图标-->
<ImageView
android:id="@+id/iv2"
android:src="@drawable/folder"
android:layout_width="19dip"
android:layout_height="19dip" />
<!--文件路径-->
<TextView
android:id="@+id/tv3"
android:text="TextView"
android:textSize="13sp"
android:textColor="#ffff00"
android:layout_toRightOf="@+id/iv2"
android:singleLine="true"
android:layout_width="215dip"
android:layout_height="wrap_content" />
<!--文件大小-->
<TextView
android:id="@+id/tv4"
android:text="TextView"
android:textSize="13sp"
android:textColor="#dadbe2"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
3.
gridspecial.xml
<?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"
android:background="@drawable/gridspecial_bkg"
>
<!--专辑列表-->
<GridView
android:id="@+id/gridview1"
android:numColumns="auto_fit"
android:columnWidth="90dip"
android:horizontalSpacing="10dip"
android:verticalSpacing="10dip"
android:stretchMode="columnWidth"
android:layout_width="fill_parent"
android:layout_height="445dip">
</GridView>
</LinearLayout>
其中 gridview 中的每一个界面布局如下:
<?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">
<RelativeLayout
android:id="@+id/rll"
android:layout_width="100dip"
android:layout_height="115dip">
<!--专辑封面-->
<ImageView
android:id="@+id/gridspecial_view1"
android:background="@drawable/default_album"
android:layout_centerHorizontal="true"
android:layout_width="72dip"
android:layout_height="72dip" />
<!--歌手名字-->
<TextView
android:id="@+id/artist_xxx"
android:text="歌手"
android:textSize="13sp"
android:textColor="#cdffffff"
android:layout_below="@+id/gridspecial_view1"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="17dip" />
<!--专辑名-->
<TextView
android:id="@+id/album_xxx"
android:text="专辑名"
android:textSize="12sp"
android:textColor="#cdffffff"
android:layout_below="@+id/artist_xxx"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
4.中间的DragableLuncher又分左中右三个页面:
左:left_mediaview.xml 中:center_special.xml 右:right_lrc.xml
5.
left_mediaview.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!--用于播放gif动画-->
<RelativeLayout
android:id="@+id/relative1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.liuyan.mp3play.customview.RunGif
android:id="@+id/runGif1"
android:layout_width="fill_parent"
android:layout_height="240dip" />
</RelativeLayout>
<!--向右箭头-->
<ImageView
android:id="@+id/iv2"
android:src="@drawable/right_arrows"
android:layout_alignParentRight="true"
android:layout_marginTop="76dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
其中有一个自定义view为 RunGif继承自view
android自带 Movie类可以用来显示gif动画
public class RunGif extends View {
public Movie mMovie;
public long mMovieStart;
public static boolean flag = false;
public RunGif(Context context) {
super(context);
mMovie = Movie.decodeStream(getResources().openRawResource(R.raw.mediaview_gif1));
}
//设置是否播放的标志
public boolean setFlag(boolean b){
flag = b;
return flag;
}
public RunGif(Context context, AttributeSet attrs) {
super(context, attrs);
mMovie = Movie.decodeStream(getResources().openRawResource(R.raw.mediaview_gif1));
}
//绘制动画
@Override
protected void onDraw(Canvas canvas) {
long now = android.os.SystemClock.uptimeMillis();
if (flag == true){
if (mMovieStart == 0){
mMovieStart = now;
}
if (mMovie != null){
int dur = mMovie.duration();
if (dur == 0){
dur = 15000;
}
//计算出显示第几帧
int relTime = (int) ((now - mMovieStart)%dur);
//设置需要显示的帧
mMovie.setTime(relTime);
//显示
mMovie.draw(canvas,90,30);
invalidate();
}
}
}
}
6.
center_special.xml
<?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="match_parent"
android:orientation="vertical">
<!--专辑封面显示区-->
<RelativeLayout
android:id="@+id/reltive1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:layout_width="wrap_content"
android:layout_height="250.6dip">
<!--显示倒影-->
<ImageView
android:id="@+id/inverted_view"
android:layout_marginTop="14.2dip"
android:layout_marginLeft="43.7dip"
android:layout_width="160.5dip"
android:layout_height="250.6dip" />
<!--显示背景图片-->
<ImageView
android:id="@+id/music_view"
android:src="@drawable/album_bkg"
android:layout_width="228.6dip"
android:layout_height="250.7dip" />
<!--默认专辑封面-->
<ImageView
android:id="@+id/music_AlbumArt"
android:src="@drawable/album"
android:layout_width="160.5dip"
android:layout_height="160.5dip"
android:layout_marginTop="14.1dip"
android:layout_marginLeft="43.8dip"/>
</RelativeLayout>
<!--←-->
<ImageView
android:id="@+id/iv1"
android:src="@drawable/left_arrows"
android:layout_alignParentLeft="true"
android:layout_marginTop="75dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--右键头-->
<ImageView
android:id="@+id/iv2"
android:src="@drawable/right_arrows"
android:layout_alignParentRight="true"
android:layout_marginTop="75dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
7.
right_lrc.xml
<?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="match_parent"
android:orientation="vertical">
<!--左箭头-->
<ImageButton
android:id="@+id/iv1"
android:src="@drawable/left_arrows"
android:layout_alignParentLeft="true"
android:layout_marginTop="74dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--歌词显示区域-->
<com.example.liuyan.mp3play.customview.LrcView
android:id="@+id/LrcShow"
android:layout_width="fill_parent"
android:layout_height="230dip"
android:text="无歌曲播放"
android:textColor="#99ffffff"
android:layout_marginTop="10dip"
android:gravity="center"
/>
</RelativeLayout>
其中用到了一个自定义view用来显示歌词(继承textview)
将在下一篇博客继续