MP3Play项目实战 (2)

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）

将在下一篇博客继续