FloatingActionButton

tonyh

build.gradle

1. dependencies {
   
2.     compile fileTree(dir: 'libs', include: ['*.jar'])
   
3.     testCompile 'junit:junit:4.12'
   
4.     compile 'com.android.support:appcompat-v7:23.0.0'
   
5.     compile 'com.android.support:cardview-v7:23.0.0'
   
6.     compile 'com.android.support:design:23.0.0'
   
7. }

複製代碼

layout/cardview.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
   
4.     android:layout_width="match_parent"
   
5.     android:layout_height="match_parent"
   
6.     android:orientation="vertical">
   
7. 
   
8.     <android.support.v7.widget.CardView
   
9.         android:id="@+id/view"
   
10.         android:layout_width="match_parent"
    
11.         android:layout_height="120dp"
    
12.         android:layout_gravity="center_horizontal"
    
13.         android:layout_margin="10dp"
    
14.         app:cardBackgroundColor="#b7d1ff"
    
15.         app:cardCornerRadius="15dp"
    
16.         app:cardElevation="5dp">
    
17. 
    
18.         <RelativeLayout
    
19.             android:layout_width="match_parent"
    
20.             android:layout_height="match_parent"
    
21.             android:layout_gravity="center_horizontal">
    
22. 
    
23.             <ImageView
    
24.                 android:layout_width="70dp"
    
25.                 android:layout_height="70dp"
    
26.                 android:id="@+id/imageView"
    
27.                 android:layout_centerVertical="true"
    
28.                 android:layout_centerHorizontal="true"
    
29.                 android:src="@mipmap/ic_launcher" />
    
30.         </RelativeLayout>
    
31.     </android.support.v7.widget.CardView>
    
32. </LinearLayout>

複製代碼

drawable/ic_grade.xml

1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
   
2.         android:width="24dp"
   
3.         android:height="24dp"
   
4.         android:viewportWidth="24.0"
   
5.         android:viewportHeight="24.0">
   
6.     <path
   
7.         android:fillColor="#fffbb9"
   
8.         android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
   
9. </vector>

複製代碼

layout/activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
   
4.     xmlns:tools="http://schemas.android.com/tools"
   
5.     android:layout_width="match_parent"
   
6.     android:layout_height="match_parent"
   
7.     tools:context=".MainActivity">
   
8. 
   
9.     <android.support.design.widget.AppBarLayout
   
10.         android:id="@+id/appbar"
    
11.         android:layout_width="match_parent"
    
12.         android:layout_height="240dp">
    
13. 
    
14.         <android.support.design.widget.CollapsingToolbarLayout
    
15.             android:id="@+id/collapsingToolbar"
    
16.             android:layout_width="match_parent"
    
17.             android:layout_height="match_parent"
    
18.             app:contentScrim="@color/colorPrimary"
    
19.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
    
20.             app:title="@string/app_name">
    
21. 
    
22.             <ImageView
    
23.                 android:layout_width="match_parent"
    
24.                 android:layout_height="match_parent"
    
25.                 android:scaleType="centerCrop"
    
26.                 android:src="@drawable/shutterstock"
    
27.                 app:layout_collapseMode="parallax" />
    
28. 
    
29.             <android.support.v7.widget.Toolbar
    
30.                 android:id="@+id/toolbar"
    
31.                 android:layout_width="match_parent"
    
32.                 android:layout_height="?attr/actionBarSize"/>
    
33. 
    
34.         </android.support.design.widget.CollapsingToolbarLayout>
    
35. 
    
36.     </android.support.design.widget.AppBarLayout>
    
37. 
    
38.     <android.support.design.widget.FloatingActionButton
    
39.         android:id="@+id/fab"
    
40.         android:layout_width="wrap_content"
    
41.         android:layout_height="wrap_content"
    
42.         android:layout_margin="16dp"
    
43.         android:src="@drawable/ic_grade"
    
44.         app:backgroundTint="#aa008a"
    
45.         app:rippleColor="#ff00e5"
    
46.         app:layout_anchor="@id/appbar"
    
47.         app:layout_anchorGravity="right|bottom"/>
    
48.     <!--app:layout_anchor="@id/collapsingToolbar"
    
49.              需anchor在appbar上才具縮放效果-->
    
50. 
    
51.     <android.support.v4.widget.NestedScrollView
    
52.         android:id="@+id/nestedScrollView"
    
53.         android:layout_width="match_parent"
    
54.         android:layout_height="match_parent"
    
55.         app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
56. 
    
57.         <LinearLayout
    
58.             android:layout_width="match_parent"
    
59.             android:layout_height="match_parent"
    
60.             android:orientation="vertical">
    
61. 
    
62.             <include layout="@layout/cardview" />
    
63. 
    
64.             <include layout="@layout/cardview" />
    
65. 
    
66.             <include layout="@layout/cardview" />
    
67. 
    
68.             <include layout="@layout/cardview" />
    
69. 
    
70.             <include layout="@layout/cardview" />
    
71. 
    
72.             <include layout="@layout/cardview" />
    
73. 
    
74.             <include layout="@layout/cardview" />
    
75.         </LinearLayout>
    
76.     </android.support.v4.widget.NestedScrollView>
    
77. </android.support.design.widget.CoordinatorLayout>

複製代碼