跳至主要內容

详情界面


喜马拉雅视频教程08-推荐完成了,我们去做一下详情界面

前面我们已经把推荐界面完成了,接下来的话,我们做详情页面吧。 screenshot1560567763594.jpg

喜马拉雅的内容结果是这样子的:

分类—->专辑列表—>单个专辑里的每一条节目内容

我们这里直接获取到的是推荐列表,并没有去获取分类,这个同学们可以去做一下哈。

我们获取到的是专辑列表,所以,接下来我们去获取单一专辑里的内容。

也就是获取到专辑里的详情。

当用户点击推荐里的item时,就会跳转到详情界面,获取到专辑里的内容。

item的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selector_album_item_bg"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/item_id_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:padding="15dp"
        android:text="77"
        android:textSize="20sp"/>

    <LinearLayout
        android:id="@+id/title_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"
        android:layout_toRightOf="@id/item_id_text"
        android:orientation="vertical">

        <TextView
            android:id="@+id/trick_title_text"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:text="彩蛋,这是我最好的和篇文章呢"
            android:textColor="@color/color_black"
            android:textSize="16sp"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:src="@mipmap/play_count_icon"/>

            <TextView
                android:id="@+id/track_play_count_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="245.3万"
                android:textSize="12sp"/>
        </LinearLayout>

    </LinearLayout>

    <TextView
        android:id="@+id/update_time_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@id/title_container"
        android:gravity="center"
        android:text="2018-09"/>

</RelativeLayout>

设置状态栏透明,全屏状态

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        getWindow().setStatusBarColor(Color.TRANSPARENT);

素材标注地址

地址:lanhuapp.com 账号:lanhu@sunofbeaches.com 密码:lanhu123

密码在群的公告里

同学们可以使用这个账号来获取到标注内容,我会持续更新UI的图。