Android初級開發筆記 - FloatingButton

時間 2019-11-05

標籤 android 初級開發筆記 floatingbutton 欄目 Android 简体版

原文原文鏈接

記錄一下項目近期遇到的跟FloatingButton相關的一個小問題。背景：須要畫一個固定在某個位置，不隨其餘控件移動而移動的按鈕。android

設計稿：bash

第一階段：拿到藍湖的切圖，發現不只有白邊還有很大一部分的透明背景。直接在FloatingButton設置backgroundTint後圖片顯得很小，一點也不美觀。並且形狀是圓形的。

切圖：app

效果：

代碼：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/iv_join"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/and_blue_448bf5"
        android:scaleType="fitEnd"
        android:src="@mipmap/icon_join"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="@+id/vp_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/vp_content" />
複製代碼

第二階段：介於對FloatingButton的不熟悉，上網瞭解了一下它。發現我並無辦法找到使他變成各類形狀的辦法，因此最後只能說應該是它就是長成圓形的。字體

第三階段：使圖片和按鈕比例協調！這個的實現網上搜獲得不少答案，最多的一種是說圖片要24dp24dp，加android:scaleType=」center」。也有人說， app:fabSize="normal" android:scaleType=」center」同時存在，就能夠打破圖片的尺寸限制。可是我都試了，打破限制的沒有，設置了24dp24dp以後，比例確實和諧了，可是由於分辨率的問題，字體顯得很模糊。（也多是我不會用ps調...）代碼仍是跟上面的同樣，效果：動畫

第四階段：反正裏面的箭頭也不明顯，不如直接在裏面寫字好了。試了一下。FloatingButton沒有text屬性。很天然地我想到了加個textview。聽起來好像沒毛病，但是這個textview死活就是藏在FloatingButton下面不上來。通過幾番百度，終於在stackflow找到了答案，在textview加上evalation屬性。完美！spa

代碼：設計

<FrameLayout
        android:layout_width="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.FloatingActionButton
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@color/and_blue_448bf5"
            app:borderWidth="0dp"
            android:elevation="0dp"
            app:fabSize="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:layout_gravity="center"
            android:text="入駐"
            android:textSize="@dimen/and_24sp"
            android:elevation="7dp"/>

    </FrameLayout>
複製代碼

效果：code

第五階段：領導以爲仍是有點醜，因此我又改爲了醬紫。這個實現很容易，就很少說啦~orm

代碼：cdn

<Button
        android:id="@+id/fab"
        android:layout_width="50dp"
        android:layout_height="@dimen/and_30dp"
        android:elevation="0dp"
        android:text="入駐"
        android:gravity="center"
        android:textColor="@color/white"
        android:background="@drawable/rect_448bf5_radius_5"
        app:layout_constraintBottom_toBottomOf="@+id/vp_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/vp_content" />
複製代碼