前段時(shí)間接到了這樣一個(gè)需求瞄沙，要求實(shí)現(xiàn)一個(gè)和當(dāng)樂游戲詳情界面類似的界面己沛；這是當(dāng)樂游戲詳情頁面的效果！距境！
當(dāng)樂游戲詳情頁
經(jīng)過一段時(shí)間的摸索申尼，爬過不少坑后，該界面總算是被實(shí)現(xiàn)出來了...
公司的效果
層次結(jié)構(gòu)
玩了幾次當(dāng)樂的界面后垫桂，發(fā)現(xiàn)其實(shí)當(dāng)樂的界面并不難實(shí)現(xiàn)晶姊。首先從UI布局層次結(jié)構(gòu)入手，該頁面是由3種處在不同層次的View組合而成伪货，然后通過中間層View的移動(dòng)進(jìn)而改變界面的顯示狀態(tài)们衙，以達(dá)到動(dòng)態(tài)的效果。</br>
通過觀察碱呼，該頁面分為3個(gè)不同的層次：
- 處于最底層的蒙挑，不會(huì)動(dòng)的View，該View用于顯示游戲截圖愚臀。
- 處于中間層的忆蚀，會(huì)移動(dòng)的View，該View用于展示游戲詳情姑裂，該View由兩個(gè)部分組成馋袜，一個(gè)是用來展示游戲簡介的內(nèi)容頭部分View，也就是游戲圖標(biāo)所在的部分舶斧；另外一個(gè)是用來展示和游戲相關(guān)的內(nèi)容信息的View欣鳖，也就是當(dāng)樂可以進(jìn)行滑動(dòng)的ViewPage。
- 處于最頂層的茴厉，toolbar 和底部工具欄 所處在的層次</br>
層次結(jié)構(gòu)如圖所示：</br>
層次結(jié)構(gòu)
- 綠色部分表是的處于底部的View泽台，也就是用來展示游戲截圖的部分什荣。
- 黃色表示的是中間層，用來展示游戲詳情及其和游戲相關(guān)的內(nèi)容怀酷。
- 藍(lán)色表和紅色分別表示Toolbar 和 bottom Bar稻爬。
通過這層次結(jié)構(gòu)的分析，便能很容易寫出這種效果的界面蜕依。下面將開始實(shí)現(xiàn)布局代碼桅锄。
界面布局代碼
界面的布局代碼由幾個(gè)部分組成
用來展示游戲簡介的布局
游戲簡介布局
如上圖所示，以下代碼便是為了實(shí)現(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>
布局的最終效果
用于展示游戲詳情的信息的布局
游戲相關(guān)信息的布局
如上圖所示竞滓，以下代碼便是要實(shí)現(xiàn)上面的效果，該部分由游戲簡介的信息及其和游戲相關(guā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>
這個(gè)界面由兩個(gè)部分組成商佑，一個(gè)是我上面已經(jīng)編寫的用于展示游戲簡介的View，在代碼里面厢塘，通過了include 將其加載了進(jìn)來茶没；</br>
另外一個(gè)部分是用于展示和游戲相關(guān)的信息的界面(如，游戲評(píng)論晚碾、游戲評(píng)測抓半、游戲禮包等等東西)，在當(dāng)樂的界面里面格嘁，用戶進(jìn)行滑動(dòng)實(shí)現(xiàn)不同界面的切換笛求，由此，便可以猜的到糕簿，類似于游戲評(píng)論探入、游戲評(píng)測的界面，必定是一個(gè)Fragment懂诗，然后通過ViewPager作為容器蜂嗽，填充不同的Fragment；最后殃恒，當(dāng)用戶進(jìn)行滑動(dòng)時(shí)植旧，便能切換不同的頁面。
toolbar 布局
由于滑動(dòng)時(shí)需要?jiǎng)討B(tài)設(shè)置Toolbar的透明度离唐，所有需要自己手動(dòng)創(chuàng)建一個(gè)簡單的工具欄病附。</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>
主界面的代碼實(shí)現(xiàn)
接下來便是將上面的幾個(gè)View組合起來亥鬓，進(jìn)而實(shí)現(xiàn)當(dāng)樂游戲詳情界面的基本布局完沪。</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>
為來實(shí)現(xiàn)層次效果的，需要使用到RelativeLayout進(jìn)行布局贮竟，通過RelativeLayout的特性：當(dāng)你不指定各個(gè)View的相對(duì)位置時(shí)丽焊，寫在前面的View將被系統(tǒng)繪制在布局的最底層较剃；和棧的有點(diǎn)相似咕别。</br>
- 所以在該布局里面技健，首先編寫id為
img_vpViewPager，該View便是用于展示游戲截圖的View惰拱。 - 接下來便是編寫用于展示游戲簡介及其和游戲相關(guān)內(nèi)容的View雌贱，
<include layout="@layout/layout_content"/>代碼便是將我們上面寫的游戲展示信息的View加載進(jìn)去了。 - 最后便是加載ToolBar
<include layout="@layout/layout_bar"/>
這是我們現(xiàn)在的效果
當(dāng)然偿短，當(dāng)這僅僅只是一個(gè)界面欣孤，并不能像當(dāng)樂一樣對(duì)界面進(jìn)行移動(dòng)。接下來昔逗，便需要開始編寫布局移動(dòng)的邏輯了降传。
布局最終效果
