Android Support Design Library之FloatingActionButton

转载

mob604756f1e4c7 2017-08-10 17:39:00

文章标签 android ico xml ide 控件 文章分类 代码人生

为了文章的精彩，前三个标题实现FloatingActionButton的特效。最后一节解说其属性详情。

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

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

Android Support Design Library之FloatingActionButton_xml

曾经没有这个支持库的时候。须要写两个动画。一个button的动画一个菜单的动画。如今由于有了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，我们来看图说明。

Android Support Design Library之FloatingActionButton_ico_02

我们知道，一个控件在屏幕上绘制都是依据其左上角坐标绘制的，那么获取他的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>

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

Android Support Design Library之FloatingActionButton_android_03

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>