Android 仿当乐游戏详情页面(一)

作者: dorn19978 | 来源:发表于2016-05-04 14:37 被阅读1297次

前段时间接到了这样一个需求，要求实现一个和当乐游戏详情界面类似的界面；这是当乐游戏详情页面的效果！！

当乐游戏详情页

经过一段时间的摸索，爬过不少坑后，该界面总算是被实现出来了...

公司的效果

层次结构

玩了几次当乐的界面后，发现其实当乐的界面并不难实现。首先从UI布局层次结构入手，该页面是由3种处在不同层次的View组合而成，然后通过中间层View的移动进而改变界面的显示状态，以达到动态的效果。
通过观察，该页面分为3个不同的层次：

处于最底层的，不会动的View，该View用于显示游戏截图。
处于中间层的，会移动的View，该View用于展示游戏详情，该View由两个部分组成，一个是用来展示游戏简介的内容头部分View，也就是游戏图标所在的部分；另外一个是用来展示和游戏相关的内容信息的View，也就是当乐可以进行滑动的ViewPage。
处于最顶层的，toolbar 和底部工具栏所处在的层次

层次结构如图所示：

层次结构

绿色部分表是的处于底部的View，也就是用来展示游戏截图的部分。
黄色表示的是中间层，用来展示游戏详情及其和游戏相关的内容。
蓝色表和红色分别表示Toolbar 和 bottom Bar。

通过这层次结构的分析，便能很容易写出这种效果的界面。下面将开始实现布局代码。

界面布局代码

界面的布局代码由几个部分组成

用来展示游戏简介的布局

游戏简介布局

如上图所示，以下代码便是为了实现上图的效果。

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

布局的最终效果

用于展示游戏详情的信息的布局

游戏相关信息的布局

如上图所示，以下代码便是要实现上面的效果，该部分由游戏简介的信息及其和游戏相关的信息(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 将其加载了进来；
另外一个部分是用于展示和游戏相关的信息的界面(如，游戏评论、游戏评测、游戏礼包等等东西)，在当乐的界面里面，用户进行滑动实现不同界面的切换，由此，便可以猜的到，类似于游戏评论、游戏评测的界面，必定是一个Fragment，然后通过ViewPager作为容器，填充不同的Fragment；最后，当用户进行滑动时，便能切换不同的页面。

toolbar 布局

由于滑动时需要动态设置Toolbar的透明度，所有需要自己手动创建一个简单的工具栏。
以下代码便是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>

主界面的代码实现

接下来便是将上面的几个View组合起来，进而实现当乐游戏详情界面的基本布局。
代码如下：

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

为来实现层次效果的，需要使用到RelativeLayout进行布局，通过RelativeLayout的特性：当你不指定各个View的相对位置时，写在前面的View将被系统绘制在布局的最底层；和栈的有点相似。

所以在该布局里面，首先编写id为img_vpViewPager，该View便是用于展示游戏截图的View。
接下来便是编写用于展示游戏简介及其和游戏相关内容的View，<include layout="@layout/layout_content"/> 代码便是将我们上面写的游戏展示信息的View加载进去了。
最后便是加载ToolBar<include layout="@layout/layout_bar"/>

这是我们现在的效果

当然，当这仅仅只是一个界面，并不能像当乐一样对界面进行移动。接下来，便需要开始编写布局移动的逻辑了。

布局最终效果

Android 仿当乐游戏详情页(二)

android 仿当乐游戏详情页面（三）

网友评论

灰狼Allan:好久以前在泡网的群里看到你要做这个效果，后来忘了demo叫什么了，今天打开4.4的模拟器终于找到了，哈哈哈哈~
7b08864bbcb3:我下载运行了，正常状态下下面的点击失灵了，包括tab和listview的item点击事件，怎么解决？
5c86e01fae2c:@多米的米多能不能贴一下怎么修改的谢谢
dorn19978:@AriaLyy 看错了，默认状态下，我屏蔽了tab事件和ListView的事件，这两个地方的事件我只在处于顶部状态的情况下才放开；如果你需要使用这两个控件的事件，可以参照我顶部状态时的代码，修改dispatchTouchEven来实现
dorn19978:@多米的米多可能是屏幕适配的问题，试一下在dispatchTouchEvent处理下你的事件
ppyy一号:不错不错
dorn19978:@ppyy一号 :

Android 仿当乐游戏详情页面(一)

层次结构

界面布局代码

用来展示游戏简介的布局

用于展示游戏详情的信息的布局

toolbar 布局

主界面的代码实现

这是我们现在的效果

Android 仿当乐游戏详情页(二)

android 仿当乐游戏详情页面（三）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android-ui效果

编程小问题

首页投稿（暂停使用，暂停投稿）

程序员

Android技术知识

Android优秀开源

Android知识