MaterialSheetFab的使用

最新推荐文章于 2024-05-17 10:03:09 发布

Mettee

最新推荐文章于 2024-05-17 10:03:09 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android开发笔记文章标签： android MaterialSheetFab 控件 github

更多干货尽在 https://www.iitter.com

本文链接：https://blog.youkuaiyun.com/Momentyol/article/details/52851832

Android开发笔记专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个在Android项目中使用的MaterialSheetFab控件，通过展示效果图和简单的实现步骤，阐述了如何集成及自定义该控件。文章提供了github链接以便读者查看源码和进一步学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MaterialSheetFab的使用

最近做一个小项目用到了github上一个非常有趣的控件，个人觉得写得挺好，现在总结下用法。

不多说，先上效果图：

左边是原作者的效果图，右边是自己简略做的效果，效果不如原作者，但是。。这不重要，主要是会用，会根据自己的需求做适当修改。下边开始：

项目的地址： github地址

首先老规矩：在项目gradle里面添加

compile 'com.gordonwong:material-sheet-fab:1.2.1'

这里需要注意添加的地方：作为一个新手，已经踩了坑，很痛苦。不是上边一个文件，当时加错了地方浪费了很多时间。

如下图：

然后编译，没问题之后需要写一个类实现 AnimatedFab接口。因此新建一个view包存放这个类。

<span style="font-size:18px;">package com.gechao.materialsheetfabdemo.view;

//Created by Nexts on 2016/10/18.


import android.content.Context;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Interpolator;
import android.view.animation.ScaleAnimation;

import com.gechao.materialsheetfabdemo.R;
import com.gordonwong.materialsheetfab.AnimatedFab;

public class Fab extends FloatingActionButton implements AnimatedFab {
    private static final int FAB_ANIM_DURATION = 200;

    public Fab(Context context) {
        super(context);
    }

    public Fab(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public Fab(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * Shows the FAB.
     */
    @Override
    public void show() {
        show(0, 0);
    }

    /**
     * Shows the FAB and sets the FAB's translation.
     *
     * @param translationX translation X value
     * @param translationY translation Y value
     */
    @Override
    public void show(float translationX, float translationY) {
        // Set FAB's translation
        setTranslation(translationX, translationY);

        // Only use scale animation if FAB is hidden
        if (getVisibility() != View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + translationX;
            float pivotY = getPivotY() + translationY;

            ScaleAnimation anim;
            // If pivots are 0, that means the FAB hasn't been drawn yet so just use the
            // center of the FAB
            if (pivotX == 0 || pivotY == 0) {
                anim = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f,
                        Animation.RELATIVE_TO_SELF, 0.5f);
            } else {
                anim = new ScaleAnimation(0, 1, 0, 1, pivotX, pivotY);
            }

            // Animate FAB expanding
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.VISIBLE);
    }

    /**
     * Hides the FAB.
     */
    @Override
    public void hide() {
        // Only use scale animation if FAB is visible
        if (getVisibility() == View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + getTranslationX();
            float pivotY = getPivotY() + getTranslationY();

            // Animate FAB shrinking
            ScaleAnimation anim = new ScaleAnimation(1, 0, 1, 0, pivotX, pivotY);
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.INVISIBLE);
    }

    private void setTranslation(float translationX, float translationY) {
        animate().setInterpolator(getInterpolator()).setDuration(FAB_ANIM_DURATION)
                .translationX(translationX).translationY(translationY);
    }

    private Interpolator getInterpolator() {
        return AnimationUtils.loadInterpolator(getContext(), R.interpolator.msf_interpolator);

    }
}</span>

注意这里用到了FloatingActionBar，所以使用design，首先我们要先引入它的Libray包。

compile 'com.android.support:design:23.4.0'

接下来就可以在布局中使用，这里单独提取一个布局 item.fab.xml:

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your FAB implementation -->
    <com.gechao.materialsheetfabdemo.view.Fab
        android:id="@+id/fab"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:src="@android:drawable/ic_dialog_email" />

    <!-- Overlay that dims the screen -->
    <com.gordonwong.materialsheetfab.DimOverlayFrameLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Circular reveal container for the sheet -->
    <io.codetail.widget.RevealLinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="end|bottom"
        android:orientation="vertical">

        <!-- Sheet that contains your items -->
        <android.support.v7.widget.CardView
            android:id="@+id/fab_sheet"
            android:layout_width="200dp"
            android:layout_height="250dp">

            <!-- TODO: Put your sheet items here -->
            <!-- Sheet items -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/fab_sheet_item_01"
                    style="@style/TextAppearance.MaterialSheetFab.Sheet.Item"
                    android:drawableLeft="@android:drawable/sym_action_chat"
                    android:text="Item1" />

                <TextView
                    android:id="@+id/fab_sheet_item_02"
                    style="@style/TextAppearance.MaterialSheetFab.Sheet.Item"
                    android:drawableLeft="@android:drawable/sym_call_incoming"
                    android:text="Item2" />

                <TextView
                    android:id="@+id/fab_sheet_item_03"
                    style="@style/TextAppearance.MaterialSheetFab.Sheet.Item"
                    android:drawableLeft="@android:drawable/ic_popup_sync"
                    android:text="Item3" />

                <TextView
                    android:id="@+id/fab_sheet_item_04"
                    style="@style/TextAppearance.MaterialSheetFab.Sheet.Item"
                    android:drawableLeft="@android:drawable/sym_contact_card"
                    android:text="Item4" />

            </LinearLayout>
        </android.support.v7.widget.CardView>
    </io.codetail.widget.RevealLinearLayout>

</RelativeLayout>
</span>

这里使用到了CardView，所以还需要添加一句：

compile 'com.android.support:cardview-v7:23.0.0'

然后可以修改添加自己的内容，在布局中引用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gechao.materialsheetfabdemo.activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <include layout="@layout/item_fab"/>
</RelativeLayout>

接下来就是在代码中实现功能：

package com.gechao.materialsheetfabdemo.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

import com.gechao.materialsheetfabdemo.R;
import com.gechao.materialsheetfabdemo.view.Fab;
import com.gordonwong.materialsheetfab.MaterialSheetFab;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private MaterialSheetFab materialSheetFab;
    private Fab fab;
    private View sheetView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initUI();
    }

    private void initUI() {
        setContentView(R.layout.activity_main);
        fab = (Fab) findViewById(R.id.fab);
        sheetView = findViewById(R.id.fab_sheet);
        View overlay = findViewById(R.id.overlay);
        int sheetColor = getResources().getColor(R.color.background_card);
        int fabColor = getResources().getColor(R.color.background_card);

        // Initialize material sheet FAB
        materialSheetFab = new MaterialSheetFab<>(fab, sheetView, overlay,
                sheetColor, fabColor);

        this.findViewById(R.id.fab_sheet_item_01).setOnClickListener(this);
        this.findViewById(R.id.fab_sheet_item_02).setOnClickListener(this);
        this.findViewById(R.id.fab_sheet_item_03).setOnClickListener(this);
        this.findViewById(R.id.fab_sheet_item_04).setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.fab_sheet_item_01:
                Toast.makeText(this, "fab_sheet_item_01", Toast.LENGTH_SHORT).show();
                materialSheetFab.hideSheet();
                break;
            case R.id.fab_sheet_item_02:
                Toast.makeText(this, "fab_sheet_item_02", Toast.LENGTH_SHORT).show();
                materialSheetFab.hideSheet();
                break;
            case R.id.fab_sheet_item_03:
                Toast.makeText(this, "fab_sheet_item_03", Toast.LENGTH_SHORT).show();
                materialSheetFab.hideSheet();
                break;
            case R.id.fab_sheet_item_04:
                Toast.makeText(this, "fab_sheet_item_04", Toast.LENGTH_SHORT).show();
                materialSheetFab.hideSheet();
                break;


            default:
                break;
        }
    }
}

代码非常简单，这里就不多说了，其中的颜色布局都可以自己修改，这里做的比较仓促，就没有考虑太多，整体效果还是不错的，在项目中许多地方都用到了，也非常方便，有时间可以自己研究下源码，这里附上项目地址，还有一些资源文件之类的不清楚可以下载看看：

点击查看源码