最近看到别人写的按钮很炫。于是发现了floating action button 的这个东西。下面就分享一下我的学习心得。
工具: android studio
这个button就配合RecyclerView使用吧。listView好像过时了哈哈。
使用RecyclerView的话需要在我们的build->dependencies里面加一句话
compile 'com.android.support:design:23.2.1'
下面就去搞一下我们的布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".act.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rec"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:dividerHeight="10dp"
android:paddingTop="?attr/actionBarSize" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="喝了两瓶">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/jh"
app:borderWidth="0dp"
//最主要的还是这个behavior
app:layout_behavior="com.example.lq.floatingactionbutton.recycler.MoveingBehavior"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
布局搞好了以后,首先我们去搞我们的RecyclerView的适配器好了。
首先我们需要一个RecyclerView的条目点击事件,给他一个接口。
package com.example.lq.floatingactionbutton.interfaces;
import android.view.View;
/**
* Created by Administrator on 2016-4-12.
*/
public interface OnRecyclerViewItemClickListener {
void onItemClick(View view, String Data);
}
过listView的对下面的代码一定不会陌生,因为很相似。
package com.example.lq.floatingactionbutton.adapter;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.TextView;
import com.example.lq.floatingactionbutton.R;
import com.example.lq.floatingactionbutton.interfaces.OnRecyclerViewItemClickListener;
import java.util.List;
/**
* Created by Administrator on 2016-4-9.
*/
public class RecyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements View.OnClickListener, OnRecyclerViewItemClickListener {
private List<String> list;// 数据
private OnRecyclerViewItemClickListener onRecyclerViewItemClickListener = null;
@Override
public void onClick(View v) {
if (onRecyclerViewItemClickListener != null) {
onRecyclerViewItemClickListener.onItemClick(v, (String) v.getTag());
}
}
public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
this.onRecyclerViewItemClickListener = listener;
}
public RecyAdapter(List<String> list) {
this.list = list;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View view = inflater.inflate(R.layout.listitem, parent, false);
view.setOnClickListener(this);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
String s = list.get(position);
MyViewHolder holder1 = (MyViewHolder) holder;
holder1.tv.setText(s);
//holder1.tv.setText(list.get(position));
//将数据保存在itemView的Tag中,以便点击时进行获取
holder1.itemView.setTag(list.get(position));
}
@Override
public int getItemCount() {
return list.size();
}
@Override
public void onItemClick(View view, String Data) {
}
class MyViewHolder extends RecyclerView.ViewHolder {
private TextView tv;
public MyViewHolder(View itemView) {
super(itemView);
//渲染布局
tv = (TextView) itemView.findViewById(R.id.name);//一个条目 跟listview一样需要另一个布局 这里不再书写 如需分割线直接加个view就好了
}
}
}
适配器搞定了,我们可以跑一下看看。当然xml里的folating action button的behavior还没有那句话现在可以不写。等我们写好那个在放回去就OK。
下面我们去搞一下behavior
package com.example.lq.floatingactionbutton.recycler;
import android.content.Context;
import android.os.Build;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorListener;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.util.AttributeSet;
import android.view.View;
import java.util.jar.Attributes;
/**
* Created by Administrator on 2016-4-9.
*/
public class MoveingBehavior extends FloatingActionButton.Behavior {
private static FastOutSlowInInterpolator inInterpolator = new FastOutSlowInInterpolator();//加速器
boolean isAnimatingout = false;//是否滑出
public MoveingBehavior(Context context, AttributeSet attr) {
super();
}
@Override
public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout,final FloatingActionButton child,final View directTargetChild,final View target, final int nestedScrollAxes) {
//依赖的控件开始滑动 开始监听 recyclerVIew 滑动时
//nestedScrollAxes 滑动关联方向
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(final CoordinatorLayout coordinatorLayout,final FloatingActionButton child, final View target,final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
//滑动过程中不断调用
//判断滑动方向
if (dyConsumed > 0 && !isAnimatingout && child.getVisibility() == View.VISIBLE) {
//fab 滑出去
animateout(child);
} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
//fab滑进来
animatein(child);
}
}
private void animateout(final FloatingActionButton child) {
//动画滑出 属性
if (Build.VERSION.SDK_INT >= 14) {
//动画的属性在这里可以更改我们的动画效果 这里添加了监听下面就不需要了
ViewCompat.animate(child).scaleX(0.0f).scaleY(0.0f).setInterpolator(inInterpolator).withLayer().setListener(new ViewPropertyAnimatorListener() {
@Override
public void onAnimationStart(View view) {
isAnimatingout = true;
}
@Override
public void onAnimationEnd(View view) {
isAnimatingout = false;
view.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(View view) {
isAnimatingout = false;
}
}).start();
} else {
}
}
private void animatein(FloatingActionButton child) {
child.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(child).scaleX(1.0f).scaleY(1.0f).setInterpolator(inInterpolator).withLayer().setListener(null).start();
}
}
}
到现在我们的button就算是基本完成了。
如有错误欢迎斧正,谢谢。