ConstraintLayout动画实现布局卡片式滑动放大缩放 ConstraintLayout（约束布局）是Android Studio 2.2中主要的新增功能之一，Android studio升级到2.3版本之后，不管是新建Activity或fragment，xml默认布局由RelativeLayout更改为ConstraintLayout了。
但是ConstraintLayout远远比想象中的强大，不仅可以解决布局层层嵌套的缺点，还可以实现动画效果 初学ConstraintLayout动画效果推荐可以看下 ：http://www.uwanttolearn.com/android/constraint-layout-animations-dynamic-constraints-ui-java-hell/
按照以往惯例先上效果图：
<LinearLayout 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"
android:background="@color/colorPrimary"
android:orientation="vertical"
tools:context="com.dawnling.app.MainActivity">
<ImageView
android:id="@+id/imgBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:srcCompat="@mipmap/ic_back" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main">
<RelativeLayout
android:id="@+id/rlTop"
android:layout_width="0dp"
android:layout_height="375dp"
android:background="@drawable/shape_bg_qrcode_transparent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="16dp">
<TextView
android:id="@+id/tvTitleTop"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/shape_bg_qrcode_top"
android:textColor="@color/colorTextPrimaryLight"
android:textSize="16sp"
android:gravity="center_vertical"
android:paddingLeft="15dp"
android:text="会员卡" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tvTitleTop"
android:background="@drawable/shape_bg_qrcode_bottom">
</RelativeLayout>
</RelativeLayout>
<TextView
android:id="@+id/tvSettingPayPws"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="50dp"
android:background="@drawable/shap_password_bg"
android:textColor="@color/white"
android:text="设置支付密码，保护交易安全"
android:visibility="invisible"/>
<RelativeLayout
android:id="@+id/rlBottom"
android:layout_width="0dp"
android:layout_height="400dp"
android:background="@drawable/shape_bg_qrcode_transparent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toBottomOf="@+id/tvSettingPayPws"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginStart="16dp">
<TextView
android:id="@+id/tvTitleBottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/shape_bg_qrcode_top"
android:textColor="@color/colorTextPrimaryLight"
android:textSize="16sp"
android:gravity="center_vertical"
android:paddingLeft="15dp"
android:text="付款码" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tvTitleBottom"
android:background="@drawable/shape_bg_qrcode_bottom">
</RelativeLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
2.ConstraintLayout 动画要new一个ConstraintSet变量用于存放view的改变状态
private ConstraintSet applyConstraintSet = new ConstraintSet();
3.接下来看下MainActivity.java代码：
/**
* Created by LXL on 2018/1/17.
* http://my.csdn.net/lxlyhm
* https://github.com/LXLYHM
* http://www.jianshu.com/u/8fd63a0d4c4c
* ConstraintLayout 动画
*/
public class MainActivity extends AppCompatActivity {
private int hight;
private ConstraintLayout constraintLayout;
private ConstraintSet applyConstraintSet = new ConstraintSet();
private View rlTop;//会员卡
private View rlBottom;//付款码
private int rlBottomHeight;
private int rlTopHeight;
private int rlTopWidth;
private TextView tvSettingPayPws;//设置密码
private TextView tvTitleTop;
private int[] location = new int[2] ;//会员卡布局 坐标
private float y1;
private float y2;
private TextView tvTitleBottom;
private boolean isFirstMeasure = true;//是否是第一次测量
private boolean isBottom = false;//付款码是否隐藏 是否在底部 true 是 false 不是
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//状态栏全局默认统一成白底黑字
ImmersionBar.with(this).statusBarColor(R.color.colorPrimary).fitsSystemWindows(true).init();
hight = ScreenUtils.getScreenHeight();//屏幕高度
constraintLayout = (ConstraintLayout) findViewById(R.id.main);
rlTop = findViewById(R.id.rlTop);
rlBottom = findViewById(R.id.rlBottom);
tvTitleTop = (TextView) findViewById(R.id.tvTitleTop);
tvSettingPayPws = (TextView) findViewById(R.id.tvSettingPayPws);
tvTitleBottom = (TextView) findViewById(R.id.tvTitleBottom);
getRlTopMeasure();
}
/**
* 获取会员卡 付款码 布局宽高
*/
private void getRlTopMeasure() {
rlBottomHeight = rlBottom.getLayoutParams().height;//付款码 高
int w = View.MeasureSpec.makeMeasureSpec(0,
View.MeasureSpec.UNSPECIFIED);
int h = View.MeasureSpec.makeMeasureSpec(0,
View.MeasureSpec.UNSPECIFIED);
rlTop.measure(w, h);
rlTopHeight = rlTop.getMeasuredHeight();//会员卡高
}
//上滑覆盖
public void slide(){
TransitionManager.beginDelayedTransition(constraintLayout);
//设置 会员卡布局
applyConstraintSet.constrainWidth(R.id.rlTop, rlTopWidth - 36);//设置变小
applyConstraintSet.constrainHeight(R.id.rlTop, rlTopHeight);//设置高度不变
applyConstraintSet.connect(R.id.rlTop, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, 20);//设置marginTop
applyConstraintSet.centerHorizontally(R.id.rlTop, R.id.main);
//设置 付款码布局
applyConstraintSet.constrainWidth(R.id.rlBottom, rlTopWidth);//设置变小
applyConstraintSet.constrainHeight(R.id.rlBottom, rlBottomHeight);//设置高度不变
applyConstraintSet.connect(R.id.rlBottom, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, (location[1]/2 + 25));//设置marginTop
applyConstraintSet.centerHorizontally(R.id.rlBottom, R.id.main);
//设置支付密码
tvSettingPayPws.setVisibility(View.VISIBLE);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {//延时设置标题栏透明度
tvTitleTop.setBackgroundResource(R.drawable.shape_bg_qrcode_top_transparent);
tvTitleBottom.setBackgroundResource(R.drawable.shape_bg_qrcode_top);
}
}, 300);
applyConstraintSet.applyTo(constraintLayout);
}
//下滑隐藏
public void inHiding(){
TransitionManager.beginDelayedTransition(constraintLayout);
//设置 会员卡布局
applyConstraintSet.constrainWidth(R.id.rlTop, rlTopWidth);//设置还原
applyConstraintSet.constrainHeight(R.id.rlTop, rlTopHeight);//设置高度不变
applyConstraintSet.connect(R.id.rlTop, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, 20);//设置marginTop
applyConstraintSet.centerHorizontally(R.id.rlTop, R.id.main);
//设置 付款码布局
applyConstraintSet.constrainWidth(R.id.rlBottom, rlTopWidth);
applyConstraintSet.constrainHeight(R.id.rlBottom, rlBottomHeight);//设置高度不变
applyConstraintSet.connect(R.id.rlBottom, ConstraintSet.TOP, R.id.main, ConstraintSet.TOP, hight - location[1] - 50);//设置marginBottom
applyConstraintSet.centerHorizontally(R.id.rlBottom, R.id.main);
//设置支付密码
tvSettingPayPws.setVisibility(View.INVISIBLE);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {//延时设置标题栏透明度
tvTitleTop.setBackgroundResource(R.drawable.shape_bg_qrcode_top);
tvTitleBottom.setBackgroundResource(R.drawable.shape_bg_qrcode_top_transparent);
}
}, 300);
applyConstraintSet.applyTo(constraintLayout);
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
//继承了Activity的onTouchEvent方法，直接监听点击事件
if(event.getAction() == MotionEvent.ACTION_DOWN) {
//当手指按下的时候
y1 = event.getY();
}
if(event.getAction() == MotionEvent.ACTION_UP) {
//当手指离开的时候
y2 = event.getY();
if (isFirstMeasure){
rlTopWidth = rlTop.getWidth();
}
isFirstMeasure = false;
rlTop.getLocationInWindow(location); //获取rlTop在当前窗口内的绝对坐标，含toolBar
isBottom = !isBottom;
if(y1 - y2 > 10) {//向上滑动
slide();
} else if(y2 - y1 > 10) {//向下滑动
inHiding();
}
}
return super.dispatchTouchEvent(event);
}
}
Demo传送门：https://github.com/LXLYHM/ConstraintLayoutAnimation
需要kotlin版本的小伙伴可以留言或私信我