1.CoordinatorLayout的出现。
继上一篇https://blog.csdn.net/m0_37667770/article/details/79606434博客,对于这些个性化的设计我想民间这么通用,谷歌工程师也会照猫画虎去设计来提供开发者提供更好的方法把。果不其然,CoordinatorLayout就有很好的解决了这个也算是麻烦的设计。CoordinatorLayout如果你查看了google提供的api那么就会知道CoordinatorLayout的重要性了。自己去看看谷歌介绍,如下:http://android.xsoftlab.net/reference/android/support/design/widget/CoordinatorLayout.html
As a container for a specific interaction with one or more child views
By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.
Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.
Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.
作为一个协调一个或多个子控件的容器控件。它会带给你跟多的帮助。
2.属性Behavior:
上面也说了可以通过CoordinatorLayout的属性Behavior来和其他子控件进行各种交互。可以去API中仔细看看Behavior的作用:可以和子控件进行交互,滑动,拖拽,闪动等。
A Behavior implements one or more interactions that a user can take on a child view. These interactions may include drags, swipes, flings, or any other gestures.
3.看看效果如下:
4.上代码来实现我们FloatingActionButton和Toobar的隐藏和显示
上一篇总我们通过滑动RecylclerView监听滑动的dy来通过接口设置属性动画解决的可以让Toobar和下面的FloatingActionButton上滑消失下滑显示。今天我们通过CoordinatorLayout来进行解决达到这个效果。
第一CoordinatorLayout作为协调容器控件,对于自己所包含的控件可以协调进行子控件之间的交互,这里监听滑动控件RecyclerView的滑动通过Behavior反馈到FloatingActionButton。它为我们提供了继承类 CoordinatorLayout.Behavior而且他有子类的…自己可以查看哦!这里不多说了。它提供了layout_behavior属性进行关联子空间和滑动控件进行交互。代码如下:
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="com.example.ls.lsn16_materialdesign_fab_animation_behavior.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_list"
android:paddingTop="42dp"
android:clipToPadding="false"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tl"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="42dp">
<TextView
android:gravity="center"
android:text="Tooble"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.Toolbar>
<!--如下app:layout_behavior进行关联它内部的RecylclerView和指定的子控件FloatingActionButton-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fb"
android:onClick="rota"
app:layout_behavior="com.example.ls.lsn16_materialdesign_fab_animation_behavior.FabBehavior"
android:layout_width="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="30dp"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
2.我们来写一个类继承CoordinatorLayout.Behavior代码如下:
package com.example.ls.lsn16_materialdesign_fab_animation_behavior;
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.RelativeLayout;
import java.util.jar.Attributes;
/**
* Created by 路很长~ on 2018/4/10.
*/
public class FabBehavior extends CoordinatorLayout.Behavior {
private boolean visible = true;//是否可见
//这里是接口去进行隐藏我们的Toobar哦!当然这里CoordinatorLayout里面谷歌工程师提供了简单的开发接口。一会儿说到。
private ToobarLisenner lisenner;
public FabBehavior(Context context, AttributeSet attributes) {
super(context, attributes);
this.lisenner = (ToobarLisenner) context;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
// 当观察的View(RecyclerView)发生滑动的开始的时候回调的
//nestedScrollAxes:滑动关联轴, 我们现在只关心垂直的滑动。
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
target, nestedScrollAxes);
// return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
// 当观察的view滑动的时候回调的
//根据情况执行动画
if (dyConsumed > 0 && visible) {
//show
visible = false;
if (lisenner != null) {
lisenner.hide();
}
onHide((FloatingActionButton) child);
} else if (dyConsumed < 0) {
//hide
visible = true;
if (lisenner != null) {
lisenner.visible();
}
onShow((FloatingActionButton) child);
}
}
public void onHide(FloatingActionButton fab) {
// 隐藏动画--属性动画
ViewGroup.LayoutParams layoutParams = (ViewGroup.LayoutParams) fab.getLayoutParams();
//动画自己随便搞。也可以设置一个加速器
//fab.animate().translationY(fab.getHeight()+fab.getBottom()).setInterpolator(new AccelerateInterpolator(3));
// fab.animate().translationY(fab.getHeight()+layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
//缩放动画
ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
}
public void onShow(FloatingActionButton fab) {
// 显示动画--属性动画
// toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
ViewGroup.LayoutParams layoutParams = (ViewGroup.LayoutParams) fab.getLayoutParams();
// fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
// fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
}
}
3.主Activity里面代码如下:
package com.example.ls.lsn16_materialdesign_fab_animation_behavior;
import android.annotation.SuppressLint;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Window;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements ToobarLisenner{
MyRecylerviewAdapter madapter;
RecyclerView mrecylerview;
private List<String> mData;
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
toolbar=findViewById(R.id.tl);
mrecylerview=findViewById(R.id.rv_list);
mData=new ArrayList<>();
for (int i = 0; i <30 ; i++) {
mData.add("item="+i);
}
madapter=new MyRecylerviewAdapter(mData,this);
mrecylerview.setAdapter(madapter);
mrecylerview.setLayoutManager(new LinearLayoutManager(this));
}
@Override
public void hide() {
Toast.makeText(this, "赢藏", Toast.LENGTH_SHORT).show();
toolbar.animate().translationY(-(toolbar.getHeight()+toolbar.getPaddingTop())).setInterpolator(new AccelerateInterpolator(3));
}
@Override
public void visible() {
Toast.makeText(this, "显示", Toast.LENGTH_SHORT).show();
toolbar.animate().translationY(0).setInterpolator(new AccelerateInterpolator(3));
}
@SuppressLint("ResourceType")
public void rota(View view) {
Snackbar.make(view,"确定",Snackbar.LENGTH_LONG).setAction(R.id.fb,new View.OnClickListener(){
@Override
public void onClick(View v) {
}
}).show();
}
}
5.谷歌如何解决Toobar隐藏显示呢?AppBarLayout作为一个google提供的很多应用栏目设计的手势滚动:http://android.xsoftlab.net/reference/android/support/design/widget/AppBarLayout.html可以去官方文档API看看。
<?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="com.example.ls.lsn16_materialdesign_fab_animation_behavior.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<!--如下AppBarLayout来包裹Toolbar且app:layout_scrollFlags="scroll"来标记滑动时候对Toolbar进行改变-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll"
android:id="@+id/tl"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="@color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Tooble" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!---->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="30dp"
android:onClick="rota"
app:layout_behavior="com.example.ls.lsn16_materialdesign_fab_animation_behavior.FabBehavior" />
</android.support.design.widget.CoordinatorLayout>
项目地址GitHub希望帮助到你哦!下一篇继续写CoordinatorLayout带给你的精彩。
https://github.com/luhenchang/Lsn16_MaterialDesign_fab_animation_Behavior.git