Android 界面设计练习——电视直播软件界面

    实现效果：

首页：

播放页：

代码：

1.ListView每一项的布局：

<?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:layout_marginTop="10dp">
    <ImageView
        android:id="@+id/pic"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="15dp"
        android:src="@mipmap/tv"/>
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="20sp"
        android:textColor="#000"/>
</LinearLayout>

2.首页布局：

<?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"
    tools:context="com.engineer.shizhibin.tvshow.MainActivity">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#ff1493">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="24sp"
            android:layout_marginLeft="10dp"
            android:layout_gravity="center_vertical"
            android:text="直播电视节目"
            android:textStyle="bold"/>
    </FrameLayout>
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
</LinearLayout>

3.播放页布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.engineer.shizhibin.tvshow.LiveActivity">

    <RelativeLayout
        android:id="@+id/rl_loading_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
        <ProgressBar
            android:id="@+id/pd_loading"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:indeterminate="false"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
        <TextView
            android:id="@+id/tv_loding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/pd_loading"
            android:textColor="#fff"
            android:textSize="24sp"
            android:layout_centerHorizontal="true"
            android:text="正在加载中..."/>
    </RelativeLayout>

    <!--顶部ｐａｎｅｌ-->
    <LinearLayout
        android:id="@+id/ll_top_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#000"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@mipmap/back"
            android:layout_gravity="center_vertical"
            android:paddingLeft="10dp"
            android:paddingRight="15dp"
            />
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="20sp"
            android:text="湖南卫视"
            android:layout_gravity="center_vertical"/>
        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="10:05"
            android:textColor="#fff"
            android:textSize="20sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="170dp"
            />
    </LinearLayout>
    <!--bottom panel-->
    <LinearLayout
        android:id="@+id/ll_play_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#000"
        android:layout_alignParentBottom="true">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:paddingLeft="10dp"
            android:src="@mipmap/play"
            android:layout_gravity="center_vertical"
            />
    </LinearLayout>

</RelativeLayout>