1 .ConstraintLayout 用法:
有个刚刚入门Android的小家伙问我说ConstraintLayout中left ,right,top,bottom都是一些什,感觉比较绕,都是啥和啥呀~
为了告诉他是啥,简单写了一个, 写都写了,顺便丢上来吧~
来来来,下面布局基本揽括你写Android能用到的大部分布局, 为什么用ConstraintLayout?
很简单,看下面代码.是不是瀑布流一样,没有任何包裹?这就是它最大优点,大大提升绘制效率有么有~
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity">
<ImageView
android:id="@+id/iv"
android:layout_width="200dp"
android:layout_height="134dp"
android:background="@color/colorAccent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="杭州市凯旋路x号xx幢100单元x室住宅用途房地产"
app:layout_constraintLeft_toRightOf="@id/iv"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:paddingLeft="4dp"
android:textSize="13sp"
android:paddingTop="10dp"
/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tv1"
android:text="RMB"
app:layout_constraintLeft_toRightOf="@id/iv"
android:paddingLeft="4dp"
android:paddingTop="9dp"
android:textSize="13sp"
/>
<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="当前价"
android:textSize="10sp"
android:paddingLeft="4dp"
app:layout_constraintLeft_toRightOf="@id/iv"
app:layout_constraintTop_toBottomOf="@+id/tv2"
/>
<TextView
android:id="@+id/tv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="184.5万"
android:textSize="26sp"
app:layout_constraintLeft_toRightOf="@id/tv3"
app:layout_constraintBottom_toBottomOf="@id/tv3"
android:textColor="@color/colorAccent"
app:layout_constraintBaseline_toBaselineOf="@id/tv3"
/>
<TextView
android:id="@+id/tv5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="出价"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@id/tv3"
app:layout_constraintLeft_toRightOf="@id/iv"
android:paddingLeft="4dp"
android:paddingTop="12dp"/>
<TextView
android:id="@+id/tv6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="89"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@id/tv3"
app:layout_constraintLeft_toRightOf="@id/tv5"
android:paddingLeft="4dp"
android:paddingTop="12dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tv6"
app:layout_constraintLeft_toRightOf="@id/iv"
android:textSize="12sp"
android:layout_marginLeft="4dp"
android:paddingTop="4dp"
android:text="预计明天10:00结束"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tv5"
app:layout_constraintRight_toRightOf="parent"
android:paddingRight="10dp"
android:text="8.2km"/>
<Button android:layout_width="100dp" android:layout_height="35dp"
app:layout_constraintTop_toBottomOf="@id/iv"
app:layout_constraintLeft_toLeftOf="parent"
android:background="@drawable/tab_bg"
android:textColor="@android:color/black"
android:id="@+id/bt1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintRight_toLeftOf="@id/bt2"
android:layout_marginTop="20dp"
android:text="可贷款"/>
<Button android:layout_width="100dp" android:layout_height="35dp"
app:layout_constraintTop_toBottomOf="@id/iv"
android:background="@drawable/tab_bg"
android:textColor="@android:color/black"
android:id="@+id/bt2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/bt1"
app:layout_constraintRight_toLeftOf="@id/bt3"
android:layout_marginTop="20dp"
android:text="不限购"/>
<Button android:layout_width="100dp" android:layout_height="35dp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toBottomOf="@id/iv"
android:background="@drawable/tab_bg"
android:id="@+id/bt3"
android:textColor="@android:color/black"
app:layout_constraintLeft_toRightOf="@id/bt2"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="20dp"
android:text="特价房"/>
<TextView
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="tab1"
android:gravity="center"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab2"/>
<TextView
android:id="@+id/tab2"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="tab2"
android:gravity="center"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab1"
app:layout_constraintRight_toLeftOf="@+id/tab3"
/>
<TextView
android:id="@+id/tab3"
android:background="@drawable/tab_bg"
android:layout_width="0dp"
android:layout_height="30dp"
android:gravity="center"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/tab2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="tab3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
属性
如图:
<ImageView
android:id="@+id/iv"
...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
简单理解:
app:layout_constraintTop_toTopOf=“parent” — iv的顶部相对父控件顶部保持
app:layout_constraintLeft_toLeftOf=“parent” — iv的左边相对父控件左边保持
对应属性,控制一个控件: 左右上下 位置
app:layout_constraintLeft_toLeftOf
app:layout_constraintTop_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintRight_toRightOf
其他差不多:
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
用一个图就明白了
自身左/右/上/下 对于某组件 右/左/下/上 或者 左/右/上/下 位置:
以左右位置对比:
字体大小不一致,又想保持在一个Baseline 如图
对应:
app:layout_constraintBaseline_toBaselineOf="@id/tv3"
2.上升动画,缩小动画
实现效果mBg2为上升动画,下面布局依然填充下面所有位置
布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="people.demo.MainActivity">
<ImageView
android:id="@+id/mBg2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorAccent" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/colorPrimary" />
</LinearLayout>
代码
//dp改变成像素
float oldHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 330, getActivity().getResources().getDisplayMetrics());
float newHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getActivity().getResources().getDisplayMetrics());
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(oldHeight, newHeight);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) mBg2.getLayoutParams();
layoutParams.height = (int) value;
mBg2.setLayoutParams(layoutParams);
}
});
valueAnimator.setDuration(500);
valueAnimator.start();