专栏名称: 安卓开发精选
伯乐在线旗下账号,分享安卓应用相关内容,包括:安卓应用开发、设计和动态等。
目录
相关文章推荐
鸿洋  ·  深入探索 APKTool:Android ... ·  昨天  
鸿洋  ·  Android自定义Lint的二三事儿 ·  2 天前  
stormzhang  ·  最后一次通知 ·  6 天前  
鸿洋  ·  Android Gradle Plugin插件详解 ·  6 天前  
鸿洋  ·  简洁高效:类抖音视频列表设计思路 ·  1 周前  
51好读  ›  专栏  ›  安卓开发精选

使用 CoordinatorLayout 打造一个炫酷的详情页(下)

安卓开发精选  · 公众号  · android  · 2016-09-15 08:59

正文

(点击上方公众号,可快速关注)

来源:尹star

链接:http://www.jianshu.com/p/5287d090e777


接上文


贴一下上图的Layout


android.support.design.widget.CoordinatorLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:fitsSystemWindows="true"

        tools:context="com.example.administrator.myapplication.MainActivity">

 

  android.support.design.widget.AppBarLayout

            android:id="@+id/app_bar_layout"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:fitsSystemWindows="true">

 

            android.support.design.widget.CollapsingToolbarLayout

                android:id="@+id/collapsing_toolbar_layout"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                app:collapsedTitleTextAppearance="@style/ToolBarTitleText"

                app:contentScrim="#46a8ba"

                app:expandedTitleMarginEnd="48dp"

                app:expandedTitleMarginStart="48dp"

                app:expandedTitleTextAppearance="@style/transparentText"

                app:layout_scrollFlags="scroll|exitUntilCollapsed"

                android:fitsSystemWindows="true">

 

                LinearLayout

                    android:id="@+id/login_layout"

                    android:layout_width="match_parent"

                    android:layout_height="240dp"

                    android:background="@mipmap/profile_bg"

                    android:orientation="vertical"

                    android:paddingBottom="10dp"

                    app:layout_collapseMode="pin"

                    app:layout_collapseParallaxMultiplier="0.7">

 

               de.hdodenhof.circleimageview.CircleImageView

                            android:id="@+id/head_img"

                            android:layout_width="60dp"

                            android:layout_height="60dp"

                            android:layout_marginTop="60dp"

                            android:layout_centerInParent="true"

                            android:layout_gravity="center"

                            android:src="@mipmap/ic_launcher"

                            app:border_color="@android:color/white"

                            app:border_width="2dp"

                            />

                        TextView

                            android:id="@+id/nick_name"

                            android:layout_width="match_parent"

                           android:layout_height="wrap_content"

                            android:ellipsize="end"

                            android:gravity="center"

                            android:maxLength="24"

                            android:text="Star"

                      android:layout_marginTop="10dp"

                            android:singleLine="true"

                            android:textColor="#ffffff"

                            android:textSize="14sp"/>

 

                        TextView

                            android:id="@+id/sign"

                            android:layout_width="match_parent"

                            android:layout_height="wrap_content"

                            android:layout_marginTop="5dp"

                            android:ellipsize="end"

                            android:gravity="center"

                            android:maxLength="70"

                            android:maxLines="2"

                            android:text="吹牛逼的都是年轻人"

                            android:textColor="#ffffff"

                            android:textSize="14sp"

                            android:visibility="visible"/>

                    LinearLayout>

 

                android.support.v7.widget.Toolbar

                    android:id="@+id/toolbar"

                    android:layout_width="match_parent"

                    android:layout_height="?attr/actionBarSize"

                    app:layout_collapseMode="pin"

                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            android.support.design.widget.CollapsingToolbarLayout>

 

            android.support.design.widget.TabLayout

                android:id="@+id/toolbar_tab"

                android:layout_width="match_parent"

                android:layout_height="?attr/actionBarSize"

                android:layout_gravity="bottom"

                android:background="#ffffff"

                android:fillViewport="false"

                app:layout_scrollFlags="scroll"

             app:tabIndicatorColor="#0835f8"

                 app:tabIndicatorHeight="2.0dp"

                app:tabSelectedTextColor="#0835f8"

                app:tabTextColor="#ced0d3">

 

                android.support.design.widget.TabItem

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:text="A" />

 

                android.support.design.widget.TabItem

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:text="B" />

 

                android.support.design.widget.TabItem

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:text="C" />

                 android.support.design.widget.TabLayout>

        android.support.design.widget.AppBarLayout>

 

        android.support.v4.view.ViewPager

            android:id="@+id/view_pager"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="#ffffff"

            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

 

    android.support.design.widget.CoordinatorLayout>


需要代码的自取:GitHub

https://github.com/stayinxing/CoordinatorLayout


有同学希望能加上下拉刷新,上拉加载,其实也是简单的。我们还是用SwipeRefreshLayout吧。但我们现在面临一个问题,这个SwipeRefreshLayout加在哪?我见过案例是把SwipeRefreshLayout做为顶级View包在CoordinatorLayout的外面,我觉得这个做法还是很糟糕的,首先CoordinatorLayout推荐做为顶级View使用,现在又在外面套了个刷新,不伦不类的;其次,如上面的案例就会出现一个SwipeRefreshLayout会对应三个子列表的刷新,处理起来还是麻烦。我们是不是可以把SwipeRefreshLayout套在ViewPager外面呢?也是可以的,但还是麻烦。我们就把下拉刷新这件事交给Fragment自己来做好了。


xml version="1.0" encoding="utf-8"?>

android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:id="@+id/swipeLayout"

              android:layout_width="match_parent"

              android:layout_height="match_parent"

              android:orientation="vertical">

        android.support.v7.widget.RecyclerView

            android:id="@+id/list_view"

            android:layout_width="match_parent"

            android:layout_height="match_parent"/>

android.support.v4.widget.SwipeRefreshLayout>


完了效果就是酱婶滴,至于上拉加载也是很easy了,后面有时间换个主题再谈loadingmore!