Android實現電臺播放器界面

最近在做一個播放器的小項目，現在把播放器界面佈局文件抽取了出來有用到的可以直接copy到項目中。

先看哈效果：

XML佈局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@color/colorWhite"
    tools:context=".home.activity.RadioDetailsActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorWhite">

    <ImageView
        android:id="@+id/radio_details_img_back"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:src="@drawable/zw_icon_back"/>

    <TextView
        android:id="@+id/radio_details_text_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="15sp"
        android:textColor="@color/colorBlack" />

    <TextView
        android:id="@+id/radio_details_text_schedules"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:text="@string/schedules_text"/>
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/colorTop"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:textSize="15sp"
        android:textColor="@color/colorBlack" />

    <com.ranlegeran.simplexmly.media.IjkVideoView
        android:id="@+id/ijk_video_view"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_marginTop="10dp"
        android:layout_gravity="center">

    <ImageView
        android:id="@+id/radio_details_img_cover"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        android:src="@drawable/redeem_bg_icon"/>
    </com.ranlegeran.simplexmly.media.IjkVideoView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:layout_marginBottom="7dp"
        android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="收藏"
        android:textSize="16sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="下載"
        android:textSize="16sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="分享"
        android:textSize="16sp"/>
    </LinearLayout>

    <SeekBar
        android:id="@+id/radio_details_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:minHeight="2dp"
        android:maxHeight="2dp"
        android:progressDrawable="@drawable/shape_seekbar_bg"
        android:thumb="@drawable/seekbar_dot_bg"
        android:focusable="true" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

    <ImageView
        android:id="@+id/radio_details_img_list"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        android:src="@drawable/default_ptr_rotate"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radio_details_img_list"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="5dp"
        android:text="單曲循環"
        android:textSize="10sp"
        android:textColor="#6E6E6E" />

    <ImageView
        android:id="@+id/radio_details_img_music_last"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_toLeftOf="@+id/radio_details_img_music_play"
        android:layout_marginRight="30dp"
        android:layout_centerVertical="true"
        android:src="@drawable/notify_btn_dark_prev_normal_xml" />

    <ImageView
        android:id="@+id/radio_details_img_music_play"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerInParent="true"
        android:src="@drawable/notify_btn_dark_pause_normal_xml"/>

    <ImageView
        android:id="@+id/radio_details_img_music_next"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_toRightOf="@+id/radio_details_img_music_play"
        android:layout_marginLeft="30dp"
        android:layout_centerVertical="true"
        android:src="@drawable/notify_btn_dark_next_normal_xml"/>

    <ImageView
        android:id="@+id/radio_details_img_set_time"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="15dp"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_icon_time" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginRight="5dp"
        android:layout_below="@+id/radio_details_img_set_time"
        android:layout_alignParentRight="true"
        android:text="定時關閉"
        android:textSize="10sp"
        android:textColor="#6E6E6E"/>
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="25dp"
        android:background="@color/colorViewLine"/>

    </LinearLayout>
</LinearLayout>

用到的自定義資源文件

shape_seekbar_bg.xml如下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--未選中未加載的-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp" />

            <solid android:color="#9C9C9C" />
        </shape>
    </item>
    <!--選中，已加載過的-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp" />

                <solid android:color="#FA5343" />
            </shape>
        </clip>
    </item>
    <!--緩存加載出來的-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dp" />

                <solid android:color="#9C9C9C" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_dot_bg.xml如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#FA5343" />
    <corners android:radius="8dp"/>
    <size
        android:height="10dp"
        android:width="10dp"/>
</shape>

有需要的大家複製即可使用。