Android 仿當樂游戲詳情頁面(一)

前段時間接到了這樣一個需求，要求實現(xiàn)一個和當樂游戲詳情界面類似的界面；這是當樂游戲詳情頁面的效果??！


當樂游戲詳情頁

經過一段時間的摸索，爬過不少坑后，該界面總算是被實現(xiàn)出來了...


公司的效果

層次結構

玩了幾次當樂的界面后，發(fā)現(xiàn)其實當樂的界面并不難實現(xiàn)。首先從UI布局層次結構入手，該頁面是由3種處在不同層次的View組合而成，然后通過中間層View的移動進而改變界面的顯示狀態(tài)，以達到動態(tài)的效果。</br>
通過觀察，該頁面分為3個不同的層次：

  1. 處于最底層的，不會動的View，該View用于顯示游戲截圖。
  2. 處于中間層的，會移動的View，該View用于展示游戲詳情，該View由兩個部分組成，一個是用來展示游戲簡介的內容頭部分View，也就是游戲圖標所在的部分；另外一個是用來展示和游戲相關的內容信息的View，也就是當樂可以進行滑動的ViewPage。
  3. 處于最頂層的，toolbar 和底部工具欄 所處在的層次</br>

層次結構如圖所示：</br>


層次結構
  • 綠色部分表是的處于底部的View，也就是用來展示游戲截圖的部分。
  • 黃色表示的是中間層，用來展示游戲詳情及其和游戲相關的內容。
  • 藍色表和紅色分別表示Toolbar 和 bottom Bar。

通過這層次結構的分析，便能很容易寫出這種效果的界面。下面將開始實現(xiàn)布局代碼。

界面布局代碼

界面的布局代碼由幾個部分組成

用來展示游戲簡介的布局

游戲簡介布局

如上圖所示，以下代碼便是為了實現(xiàn)上圖的效果。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/head"
    android:layout_width="match_parent"
    android:layout_height="@dimen/game_detail_head_height">

    <View
        android:id="@+id/temp"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@color/transparent" />

    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="@dimen/game_detail_head_indicator_height"
        android:gravity="center" />

    <RelativeLayout
        android:id="@+id/head_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/temp"
        android:background="@color/white">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="130dp"
            android:layout_marginTop="8dp"
            android:text="游戲名"
            android:textColor="@color/text_black_color"
            android:textSize="@dimen/text_larger" />

        <TextView
            android:id="@+id/detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/name"
            android:layout_below="@+id/name"
            android:text="角色扮演"
            android:textColor="@color/text_gray_color"
            android:textSize="@dimen/text_medium" />

        <TextView
            android:id="@+id/feature"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/name"
            android:layout_below="@+id/detail"
            android:text="特性111111"
            android:textColor="@color/text_gray_color"
            android:textSize="@dimen/text_medium" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentBottom="true"
            android:background="@color/line_color" />
    </RelativeLayout>

    <View
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignBottom="@+id/icon"
        android:layout_alignParentRight="true"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/default_icon" />
</RelativeLayout>
布局的最終效果

用于展示游戲詳情的信息的布局

游戲相關信息的布局

如上圖所示，以下代碼便是要實現(xiàn)上面的效果，該部分由游戲簡介的信息及其和游戲相關的信息(Viewpage)組合而成。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/game_detail_bar"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include
        layout="@layout/layout_game_detail_head"
        android:layout_width="match_parent"
        android:layout_height="@dimen/game_detail_head_height" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        style="@style/TabLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/line_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/content_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

這個界面由兩個部分組成，一個是我上面已經編寫的用于展示游戲簡介的View，在代碼里面，通過了include 將其加載了進來；</br>
另外一個部分是用于展示和游戲相關的信息的界面(如，游戲評論、游戲評測、游戲禮包等等東西)，在當樂的界面里面，用戶進行滑動實現(xiàn)不同界面的切換，由此，便可以猜的到，類似于游戲評論、游戲評測的界面，必定是一個Fragment，然后通過ViewPager作為容器，填充不同的Fragment；最后，當用戶進行滑動時，便能切換不同的頁面。

toolbar 布局

由于滑動時需要動態(tài)設置Toolbar的透明度，所有需要自己手動創(chuàng)建一個簡單的工具欄。</br>
以下代碼便是Toolbar的具體布局.。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/game_detail_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tool_bar_height"
    android:fitsSystemWindows="true">

    <View
        android:id="@+id/bar_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary" />

    <TextView
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:onClick="onClick"
        android:paddingLeft="-5dp"
        android:paddingRight="8dp"
        android:text="test"
        android:textColor="#fff"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/download_manager"
        style="@style/BarImgStyle"
        android:layout_alignParentRight="true"
        android:onClick="onClick"
        android:scaleType="fitCenter"
        android:src="@mipmap/icon_download" />

</RelativeLayout>

主界面的代碼實現(xiàn)

接下來便是將上面的幾個View組合起來，進而實現(xiàn)當樂游戲詳情界面的基本布局。</br>
代碼如下：

<?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">

    <android.support.v4.view.ViewPager
        android:id="@+id/img_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <include layout="@layout/layout_content"/>

    <View
        android:id="@+id/state_bar_temp"
        android:layout_width="match_parent"
        android:layout_height="@dimen/state_bar_height"
        android:background="@color/colorPrimary"/>

    <include
        layout="@layout/layout_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tool_bar_height"/>
</RelativeLayout>

為來實現(xiàn)層次效果的，需要使用到RelativeLayout進行布局，通過RelativeLayout的特性：當你不指定各個View的相對位置時，寫在前面的View將被系統(tǒng)繪制在布局的最底層；和棧的有點相似。</br>

  • 所以在該布局里面，首先編寫id為img_vpViewPager，該View便是用于展示游戲截圖的View。
  • 接下來便是編寫用于展示游戲簡介及其和游戲相關內容的View，<include layout="@layout/layout_content"/> 代碼便是將我們上面寫的游戲展示信息的View加載進去了。
  • 最后便是加載ToolBar<include layout="@layout/layout_bar"/>

這是我們現(xiàn)在的效果

當然，當這僅僅只是一個界面，并不能像當樂一樣對界面進行移動。接下來，便需要開始編寫布局移動的邏輯了。


布局最終效果

Android 仿當樂游戲詳情頁(二)

android 仿當樂游戲詳情頁面（三）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容