前阵子有个需求,项目中要实现一个纵向抽屉,抽屉的高度会影响父布局的高度。听着感觉很简单的一个布局是不是?刚开始我也不想重复造轮子,所以跑到github上搜了一下,也许是因为太简单,也许是因为这种需求不多吧,居然没有满足需求的组件。不过不管什么原因,自己简单实现了一个这样的布局,发出来给大家提供一下参考。
首先照惯例,演示一下效果。如下所示(这个gif最后有点掉帧,所以感觉有点卡顿)
功能其实很简单,就是一个可改变高度的布局。接下来就简单讲一下实现中需要注意的东西。
首先是文件目录,很简单,就三个文件
最主要的就是 VerticalDrawerView 这个类。继承一个基本布局即可,这里我继承的是 RelativeLayout ,然后在构造函数里将需要初始化的内部变量全部初始化。
public class VerticalDrawerView extends RelativeLayout {
// ... ...
public VerticalDrawerView(@NonNull Context context) {
super(context);
init();
}
public VerticalDrawerView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public VerticalDrawerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
// 展开收起的动画封装类
mDrawerAnimator = new VerticalDrawerAnimator(this);
// 展开收起的动画响应回调
mDrawerAnimator.setListener(new VerticalDrawerAnimator.OnAnimationListener() {
@Override
public void onStart(Animator animation) {
beforeAnimation();
}
@Override
public void onEnd(Animator animation) {
afterAnimation();
}
});
// 三角指示箭头的容器
mIndicatorContainer = new RelativeLayout(getContext());
// 三角指示箭头的点击回调
mIndicatorContainer.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
onTrigger();
}
});
}
// ... ...
}
初始化的时候,我们并没有把内容放进来。我们需要在外部通过 set 方法传入内容布局,如下所示
/**
* 设置指示器图标
*/
public void setIndicator(Drawable drawable, int width, int height) {
// ...
}
/**
* 设置收起时对外展示的View
*
* @param collapsedView 收起时对外展示的View
* @param collapsedHeight 外部设置的固定高度
*/
public void setCollapsedView(View collapsedView, int collapsedHeight) {
// ...
}
/**
* 设置展开时对外展示的View
*
* @param expandedView 收起时对外展示的View
* @param expandedHeight 外部设置的固定高度
*/
public void setExpandedView(View expandedView, int expandedHeight) {
// ...
}
为了简洁,我把其中一些代码省略了。这样就算是把基本的工作都做好了,接下来就是实现展开收起的效果,以及效果动画。
我们知道,要实现这样一个动画效果,最简单的就是使用系统提供的属性动画。如果一个组件,拥有某个属性 height 并提供了对应的 set 方法,那么我们就可以通过这样的代码
ObjectAnimator.ofInt(view, "height", startHeight, endHeight);
以动画的形式改变 height 的值,达到改变高度的效果。但是问题来了,由于我们继承的是 RelativeLayout ,而 RelativeLayout 本身并没有 setHeight() 方法,它的高度是通过 layoutParam 控制的,这时候要通过动画改变高度怎么办呢?
很简单,我们写个包装类,持有布局,并提供一个 height 属性,在这个属性的 set 方法去修改高度就可以了。代码如下
public class ViewAnimFactory {
private View view;
public void setView(View view) {
this.view = view;
}
public void setHeight(int height) {
view.getLayoutParams().height = height;
view.requestLayout();
}
}
设置属性动画的时候,只要这样做即可
ObjectAnimator.ofInt(mViewAnimFactory, "height", startHeight, endHeight)
同理,设置指示器上下倒转方向的动画也类似
ObjectAnimator.ofFloat(mIndicatorView, "rotation", startAngle, endAngle)
动画设置好了,按理来说我们直接使用即可。但是我想实现这样的效果,就是每次当布局展开收起结束后,指示器方向才发生变化,那么这里就要用到 AnimatorSet 来管理动画,通过调用 AnimatorSet 提供的 playSequentially() 方法就能实现我们想要的效果了
if (mAnimatorSet != null) {
mAnimatorSet.cancel();
mAnimatorSet.playSequentially(mAnimators);
mAnimatorSet.start();
}
读者福利
Android架构师的门槛,有没有免费学习资料?