FloatingActionButton

来源：互联网发布：淘宝开店拍照技巧编辑：程序博客网时间：2024/05/16 08:42

1.自定义Behavior实现掌阅底部菜单与按钮联动效果。

我们来看看掌阅的菜单效果：

以前没有这个支持库的时候，需要写两个动画，一个按钮的动画一个菜单的动画，现在因为有了Behavior，那么一个在另一个的相对位置就可以实现其效果。

另外标记一下这个库最重要的知识点就是Behavior，其他的与基本控件无异。下面我们来实现其效果。

自定义Behavior代码：

public class LYJBehavior extends CoordinatorLayout.Behavior {    private int targetId;    //获取自定义属性值的ID    public LYJBehavior(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Follow);        for (int i = 0; i < a.getIndexCount(); i++) {            int attr = a.getIndex(i);            if(a.getIndex(i) == R.styleable.Follow_target){                targetId = a.getResourceId(attr, -1);            }        }        a.recycle();    }    //获取相对空间ID，并设置到其中    @Override    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {        return dependency.getId() == targetId;    }    //相对位置效果代码写在这里    @Override    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {        child.setY(dependency.getY()-170);//child不管dependency怎么移动，其都在dependency上面，也就是不管菜单有移动，FAB都在其上面        return true;    }}

这里为什么child控件（也就是FAB）获取到菜单的Y坐标后，为什么还要减去170，我们来看图说明。

我们知道，一个控件在屏幕上绘制都是根据其左上角坐标绘制的，那么获取他的Y坐标也一定在其左上角坐标的Y，而如果不减去170那么显示的位置就会如屏幕白色圆圈的位置，那么如果单单只减去FAB自身控件的高度，也会没有间距，所以减去170会悬浮在上面且有一定间距，170的大小就如图大括号的距离。当然，我这里为了简单直接写的170，你可以获取FAB控件高度在减去你设置的间距。毕竟什么东西都不能写死。（这里做演示用）

自定义属性在res/attr.xml中，代码如下：

<declare-styleable name="Follow">    <attr name="target" format="reference"/></declare-styleable>

设置到布局中：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/coordinatorlayout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.FloatingActionButton        android:id="@+id/lyj_fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="16dp"        app:layout_behavior="com.example.liyuanjing.snackbardemo.LYJBehavior"        app:target="@+id/lyj_framelayout"        android:src="@drawable/blog_tag_parent_expert" />    <FrameLayout        android:id="@+id/lyj_framelayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_anchor="@id/coordinatorlayout"        app:layout_anchorGravity="bottom">    </FrameLayout></android.support.design.widget.CoordinatorLayout>

红色代码就是设置其行为效果。

public class MainActivity extends AppCompatActivity {    private FloatingActionButton fab;    private CoordinatorLayout coordinatorLayout;    private boolean flag=true;//值为true不有显示，false表示显示了。    private View view;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        this.fab = (FloatingActionButton) findViewById(R.id.lyj_fab);        this.coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorlayout);        view=LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_menu_layout, null);        FrameLayout frameLayout=(FrameLayout)findViewById(R.id.lyj_framelayout);        frameLayout.addView(view);        this.fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(flag){                    view.setVisibility(View.VISIBLE);                    view.setAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.info_menu_popup_window_show));                    flag=false;                }else{                    view.setAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.info_menu_popup_window_hide));                    view.setVisibility(View.GONE);                    flag=true;                }            }        });    }}

那么菜单布局如下popup_menu_layout：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    android:visibility="gone"    android:background="#aa000000">    <!--第一排-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <!--第一个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:layout_weight="1"            android:background="@drawable/lyj_menu_shape"            android:gravity="center">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_import"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_one"/>        </LinearLayout>        <!--第二个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_cloud"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_two"/>        </LinearLayout>        <!--第三个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/bookshelf_sort_icon"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_three"/>        </LinearLayout>        <!--第四个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_booksmanage"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_four"/>        </LinearLayout>    </LinearLayout>    <!--第二排-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <!--第一个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:layout_weight="1"            android:background="@drawable/lyj_menu_shape"            android:gravity="center">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_eye"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_five"/>        </LinearLayout>        <!--第二个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_plug"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_six"/>        </LinearLayout>        <!--第三个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_set"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_seven"/>        </LinearLayout>        <!--第四个菜单-->        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:orientation="vertical"            android:gravity="center"            android:background="@drawable/lyj_menu_shape"            android:layout_weight="1">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/menu_icon_about"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="15sp"                android:textColor="@android:color/white"                android:text="@string/lyj_menu_popup_eight"/>        </LinearLayout>    </LinearLayout></LinearLayout>

这样我们就实现了掌阅的菜单样式：

2.FloatingActionButton与CollapsingToolbarLayout的配合

布局文件如下：

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="200dp"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />            <ImageView                android:id="@+id/lyj_image"                android:layout_width="match_parent"                android:layout_height="200dp"                android:scaleType="centerCrop"                android:fitsSystemWindows="true"                android:src="@drawable/biz_live_foot_bg"                app:layout_collapseMode="parallax"                />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>    <android.support.design.widget.FloatingActionButton        android:id="@+id/lyj_showbut"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:backgroundTint="#FF3030"        app:rippleColor="#FF4500"        android:src="@drawable/add_attention"        app:elevation="6dp"        app:fabSize="normal"        app:pressedTranslationZ="12dp"        app:borderWidth="0dp"        app:layout_anchor="@id/collapsing_toolbar"        app:layout_anchorGravity="bottom|center"/></android.support.design.widget.CoordinatorLayout>