1. 程式人生 > >Android-FloatingActionButton基本使用、字型、顏色

Android-FloatingActionButton基本使用、字型、顏色

這裡主要講:

FloatingActionsMenu自定義樣式以及title調整

FloatingActionButton的基本方法

看一下效果圖:

這裡使用的是:com.getbase.floatingactionbutton.FloatingActionsMenu

先說下它的配置:在app/build.gradle 新增以下程式碼依賴:

//圓形懸浮按鈕
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.getbase:floatingactionbutton:1.10.1'

title 字型以及顏色的設定:

FloatingActionButton預設無法顯示文字的情況,所以這裡需要對其配置樣式;

在res/value/style中新增:

<!--Here is the style of floatingactionbutton's title-->
    <style name="floatingActionsMenu_fab_style">
        <item name="android:background">@drawable/fab_label_background</item> //文字背景的樣式
        <item name="android:textColor">@color/text_color</item> //文字的顏色
    </style>

這裡是我的res/value/color的配置:

    <!--floatingactionbutton's coclor-->
    <color name="white">#ffffff</color>
    <color name="text_color">#000000</color>

然後就到了最重要的部分

這裡我們在drawable中新增自定義消滅了檔案用於配置文字樣式:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 填充的顏色 -->
    <solid android:color="#FFffffff" />

    <!-- 設定按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:radius="25dip" />

    <!-- padding:Button裡面的文字與Button邊界的間隔 -->
    <padding
        android:bottom="15dp"
        android:left="20dp"
        android:right="20dp"
        android:top="15dp" />

    <!--設定描邊-->
    <stroke
        android:width= "10dp"
        android:color= "#00000000" />
</shape>

完成這些步驟之後只需在佈局檔案中呼叫即可:

這裡是我的佈局檔案:

<com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/multiple_actions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_expandDirection="down"
                fab:fab_labelStyle="@style/floatingActionsMenu_fab_style">

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/action_a"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_size="mini"
                    fab:fab_title="按鈕一" />

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/action_b"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_size="mini"
                    fab:fab_title="按鈕二" />

                <com.getbase.floatingactionbutton.FloatingActionButton
                    android:id="@+id/action_c"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    fab:fab_size="mini"
                    fab:fab_title="按鈕三" />

            </com.getbase.floatingactionbutton.FloatingActionsMenu>

// 設定方法如程式碼第六行所示

FloatingActionButton基本使用:

/*
        設定三個懸浮按鈕的監聽事件
         */
        //
        final FloatingActionButton actionA = (FloatingActionButton) findViewById(R.id.action_a);
        actionA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //空
            }
        });
        //跳轉到 FromPointToPoint 活動
        final FloatingActionButton actionB = (FloatingActionButton) findViewById(R.id.action_b);
        actionB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivityForResult(new Intent(MainActivity.this,FromPointToPoint.class),0x1);
            }
        });
        //彈出提示
        final FloatingActionButton actionC = (FloatingActionButton) findViewById(R.id.action_c);
        actionC.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"dianjile",Toast.LENGTH_SHORT).show();
            }
        });

部分內容參考自:https://www.jb51.net/article/107262.htm