Как сформировать кнопку FAB для скругления углов (в форме таблетки), как на экране контактных данных приложения «Контакты»? - PullRequest
Новая
       41

Как сформировать кнопку FAB для скругления углов (в форме таблетки), как на экране контактных данных приложения «Контакты»?

2 голосов
/ 08 июля 2019

Фон

Изначально у FAB (кнопка с плавающим действием) была только одна фигура: круг, и в ней была только возможность иметь значок.

Проблема

В прошлом году или около того Google добавил в свои приложения различные экраны, которые показывают FAB, который меняет свой размер.Например, если вы откроете приложение «Контакты» и выберите контакт, то вы FAB как таковой:

enter image description here

И если вы прокрутите немного, он получитчтобы быть кругом, только с иконкой в ​​нем:

enter image description here

Я хочу знать, как сделать такой FAB, а также использовать аналогичный спросто значок в середине (без текста), означающий закругленные углы.

Что-то вроде этого:

enter image description here

Что яя попробовал и нашел

Сначала я попытался просто установить ширину FAB, но это не помогло, так как настаивал на том, чтобы быть идеальным кругом (поместиться в квадрат ибез краев).

Видя, что, возможно, FAB не может справиться с этим в настоящее время, я использовал MaterialCardViewinstead: 

                <com.google.android.material.card.MaterialCardView

android: layout_width = "60dp" android: layout_height = "32dp" android:clickable = "true" android: focusable = "true" app: cardBackgroundColor = "..." app: cardCornerRadius = "16dp"> 

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content" android:layout_height="wrap_content"
                        android:layout_gravity="center" app:srcCompat="..."/>
                </com.google.android.material.card.MaterialCardView>

Это работает, но эффект щелчкакт ушел.

Я также попробовал MaterialButton, но он не поддерживает значок в середине, только на различном тексте внутри.

Позже я заметил, что FAB действительно имеетспособ настроить форму самого себя:

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setshapeappearance

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java

Также, что касается расширяющегося FAB, я нашел это:

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton

https://material.io/develop/android/components/extended-floating-action-button/

Итак, глядя на его код, я обнаружил, что он использует форму таблетки, и я попытался сделать нечто подобное обычномуFAB: 

class PillFab @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    FloatingActionButton(context, attrs, defStyleAttr) {
    init {
        val shapeAppearanceModel =
            ShapeAppearanceModel(context, attrs, defStyleAttr, DEF_STYLE_RES, ShapeAppearanceModel.PILL)
        shapeAppearance = shapeAppearanceModel
    }

    companion object {
        private val DEF_STYLE_RES = R.style.Widget_MaterialComponents_FloatingActionButton
    }
}

К сожалению, это не сработало вообще.Он все еще находится в форме круга.

Вопрос

Как установить FAB (с эффектом нажатия), который имеет закругленные углы и один значок внутри?

Ответы [ 2 ]

0 голосов
/ 18 июля 2019

Вы можете использовать ExtendedFloatingActionButton

для получения дополнительной информации проверьте 1.1.0-alpha06 Попробуйте это

Использовать ниже зависимости 

implementation 'com.google.android.material:material:1.1.0-alpha06'

ОБРАЗЕЦ КОДА 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center"
    android:orientation="vertical">

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nilu Pilu"
        app:icon="@drawable/ic_search_black" />

</LinearLayout>

OUTPUT

enter image description here

0 голосов
/ 08 июля 2019

Вы можете использовать CoordinatorLayout.Behavior , чтобы применить форму, эффект к любому представлению в Android при событии прокрутки Recyclerview.

...