用MaterDesign设计一个详情页面

我们要实现的效果就是gif的那种效果，MaterDesign完美实现这个功能，下面我们一起来看看。

在写代码之前记得在你的gradle里面加上这么两行

1 2	compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1'

然后就可以在Xml里面写自己的布局了，先上代码，再解释属性。

<?xml version="1.0" encoding="utf-8"?>
<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.android.demo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMargin="20dp"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/a14"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"

                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                >

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabMode="fixed" />

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

</android.support.design.widget.CoordinatorLayout>

在上面的gif中我们看到的，如果要给ToolBar的返回箭头改颜色的话，直接在AppBarLayout中把theme改掉就好了。

如果要改页面收缩之后的ToolBar背景色，直接在CollapsingToolbarLayout中把app:contentScrim中颜色改成自己想要的就好。

下面的TabLayout选择，如果你想改文字颜色和下划线的颜色，直接把TabLayout中的
app:tabIndicatorColor="@color/colorPrimary" app:tabSelectedTextColor="@color/colorAccent"
里面的颜色改成自己的就好。

app:layout_scrollFlags=”scroll|exitUntilCollapsed”
这是两个Flag控制滚动时候CollapsingToolbarLayout的表现。 Scroll，表示向下滚动列表时候，CollapsingToolbarLayout会滚出屏幕并且消失,想滚动必须设置这个；
exitUntilCollapsed，表示这个layout会一直滚动离开屏幕范围，直到它收缩成它的最小高度。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

app:layout_collapseMode=”parallax”
设置视差模式。给你想要给用户造成时差效果，给控件加上这个就好。parallax，表示滚动过程中,会一直保持可见区域在正中间；
pin，表示不会被滚出屏幕范围。也可以设置视差的系数

app:layout_collapseParallaxMultiplier=”0.7”，
设置时差滚动因子，介于 0.0-1.0之间

app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginEnd
app:expandedTitleMarginStart

设置展开状态标题文字的位置

在你要实现上推布局效果的地方加上这句，必须要有，
app:layout_behavior="@string/appbar_scrolling_view_behavior"

下面来看一下Java代码中又有哪些好玩的东西。
想要显示ToolBar，并让他起作用，就要这样

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       getSupportActionBar().setDisplayHomeAsUpEnabled(true);
       //添加返回事件
       toolbar.setNavigationOnClickListener(new View.OnClickListener() &#123;
           @Override
           public void onClick(View view) &#123;
               onBackPressed();
           &#125;
       &#125;);

这里千万不要把显示的文字加在了ToolBar上面，实际上是加在CollapsingToolbarLayout上面的，下面看一下。

 CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
 //设置收缩后显示文字颜色
collapsingToolbar.setCollapsedTitleTextColor(Color.WHITE);
//设置展开时文字的颜色
collapsingToolbar.setExpandedTitleColor(Color.BLUE);
collapsingToolbar.setTitle("Show Title");

下面的TabLayout结合ViewPager应该就很简单了

 TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
 //设置每个Tab的显示文字
tabLayout.addTab(tabLayout.newTab().setText("内容简介"));
tabLayout.addTab(tabLayout.newTab().setText("作者简介"));
tabLayout.addTab(tabLayout.newTab().setText("目录"));
tabLayout.setupWithViewPager(mViewPager);

TabLayout上面的文字大小，位置，都可以在xml里面设置的。

配合Viewpager使用就要加上tabLayout.setupWithViewPager(mViewPager)这句话。

如果有啥不对的地方，希望大家在下面指出，一起学习。
晚安！

除非注明，本博文章均为原创，转载请以链接形式标明本文地址。