Android Design Support Library 02 — CollapsingToolbarLayout&&CardView

Material Design的第二篇更新啦！這次介紹兩個控制項CollapsingToolbarLayout&&CardView

1、CollapsingToolbarLayout

5.0之後，摺疊效果的App出現了，前段時間google在material design的設計中也推出了這個控制項。
Ok，還是先上視頻！

代碼如下

複製代碼

<android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="256dp"         android:fitsSystemWindows="true">         <android.support.design.widget.CollapsingToolbarLayout             android:id="@+id/collapsing_toolbar_layout"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:contentScrim="#30469b"             app:expandedTitleMarginStart="48dp"             app:layout_scrollFlags="scroll|exitUntilCollapsed">                <ImageView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:scaleType="centerCrop"                 android:src="@mipmap/bg"                 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="?attr/actionBarSize"                 app:layout_collapseMode="pin" />         </android.support.design.widget.CollapsingToolbarLayout>     </android.support.design.widget.AppBarLayout>

官方提示，使用CollasingToolbarLayout和Toolbar，title用CollapsingToolbar來設定
This setup uses CollapsingToolbarLayout’s app:layout_collapseMode=”pin” to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses. Even better, when you use CollapsingToolbarLayout and Toolbar together, the title will automatically appear larger when the layout is fully visible, then transition to its default size as it is collapsed. Note that in those cases, you should call setTitle() on the CollapsingToolbarLayout, rather than on the Toolbar itself.

2、CardView

實現了卡片式的並且有陰影製作效果。

代碼如下

複製代碼

<android.support.v7.widget.CardView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="@dimen/card_margin">          <LinearLayout            style="@style/Widget.CardContent"            android:layout_width="match_parent"            android:layout_height="wrap_content">              <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="界塚伊奈帆（かいづか いなほ）"                android:textAppearance="@style/TextAppearance.AppCompat.Title" />              <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="主人公。居住在地..." />              <ImageView                android:id="@+id/iv_ynf"                android:layout_width="wrap_content"                android:layout_height="wrap_content" />          </LinearLayout> </android.support.v7.widget.CardView>