android 卡片放大变详情页,ConstraintLayout动画实现布局卡片式滑动放大缩放
ConstraintLayout(約束布局)是Android Studio 2.2中主要的新增功能之一，Android studio升級到2.3版本之后，不管是新建Activity或fragment，xml默認布局由RelativeLayout更改為ConstraintLayout了。
按照以往慣例先上效果圖：
GIF.gif
上圖效果所示 根據手勢滑動View 改變View的位置實現方法多種，此處記錄下使用ConstraintLayout布局動畫實現的過程(此篇筆記僅僅只記錄應用demo，不講解動畫實現的原理，如有錯誤之處還望指正 3Q_)：
1.首先保證Android studio升級到2.3版本之后，然后新建項目，編寫xml布局(引用android.support.constraint.ConstraintLayout控件)：
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">
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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main">
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">
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="會員卡" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tvTitleTop"
android:background="@drawable/shape_bg_qrcode_bottom">
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"/>
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">
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="付款碼" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tvTitleBottom"
android:background="@drawable/shape_bg_qrcode_bottom">
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);
}
}
需要kotlin版本的小伙伴可以留言或私信我
總結
以上是生活随笔為你收集整理的android 卡片放大变详情页,ConstraintLayout动画实现布局卡片式滑动放大缩放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python查询模块所有类_python
- 下一篇： ajax的学多久,ajax第二天学习