Board logo

標題: FloatingActionButton [打印本頁]

作者: tonyh    時間: 2018-5-5 17:07     標題: FloatingActionButton

[attach]4011[/attach]

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.     <android.support.v7.widget.CardView
  8.         android:id="@+id/view"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="120dp"
  11.         android:layout_gravity="center_horizontal"
  12.         android:layout_margin="10dp"
  13.         app:cardBackgroundColor="#b7d1ff"
  14.         app:cardCornerRadius="15dp"
  15.         app:cardElevation="5dp">

  16.         <RelativeLayout
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent"
  19.             android:layout_gravity="center_horizontal">

  20.             <ImageView
  21.                 android:layout_width="70dp"
  22.                 android:layout_height="70dp"
  23.                 android:id="@+id/imageView"
  24.                 android:layout_centerVertical="true"
  25.                 android:layout_centerHorizontal="true"
  26.                 android:src="@mipmap/ic_launcher" />
  27.         </RelativeLayout>
  28.     </android.support.v7.widget.CardView>
  29. </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.     <android.support.design.widget.AppBarLayout
  9.         android:id="@+id/appbar"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="240dp">

  12.         <android.support.design.widget.CollapsingToolbarLayout
  13.             android:id="@+id/collapsingToolbar"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="match_parent"
  16.             app:contentScrim="@color/colorPrimary"
  17.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
  18.             app:title="@string/app_name">

  19.             <ImageView
  20.                 android:layout_width="match_parent"
  21.                 android:layout_height="match_parent"
  22.                 android:scaleType="centerCrop"
  23.                 android:src="@drawable/shutterstock"
  24.                 app:layout_collapseMode="parallax" />

  25.             <android.support.v7.widget.Toolbar
  26.                 android:id="@+id/toolbar"
  27.                 android:layout_width="match_parent"
  28.                 android:layout_height="?attr/actionBarSize"/>

  29.         </android.support.design.widget.CollapsingToolbarLayout>

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

  31.     <android.support.design.widget.FloatingActionButton
  32.         android:id="@+id/fab"
  33.         android:layout_width="wrap_content"
  34.         android:layout_height="wrap_content"
  35.         android:layout_margin="16dp"
  36.         android:src="@drawable/ic_grade"
  37.         app:backgroundTint="#aa008a"
  38.         app:rippleColor="#ff00e5"
  39.         app:layout_anchor="@id/appbar"
  40.         app:layout_anchorGravity="right|bottom"/>
  41.     <!--app:layout_anchor="@id/collapsingToolbar"
  42.              需anchor在appbar上才具縮放效果-->

  43.     <android.support.v4.widget.NestedScrollView
  44.         android:id="@+id/nestedScrollView"
  45.         android:layout_width="match_parent"
  46.         android:layout_height="match_parent"
  47.         app:layout_behavior="@string/appbar_scrolling_view_behavior">

  48.         <LinearLayout
  49.             android:layout_width="match_parent"
  50.             android:layout_height="match_parent"
  51.             android:orientation="vertical">

  52.             <include layout="@layout/cardview" />

  53.             <include layout="@layout/cardview" />

  54.             <include layout="@layout/cardview" />

  55.             <include layout="@layout/cardview" />

  56.             <include layout="@layout/cardview" />

  57.             <include layout="@layout/cardview" />

  58.             <include layout="@layout/cardview" />
  59.         </LinearLayout>
  60.     </android.support.v4.widget.NestedScrollView>
  61. </android.support.design.widget.CoordinatorLayout>
複製代碼

作者: 李允軒    時間: 2018-5-26 17:49

此帖僅作者可見
作者: 林宇翔    時間: 2018-6-2 14:44

此帖僅作者可見




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/) Powered by Discuz! 7.2