0
点赞
收藏
分享

微信扫一扫

利用Guideline实现ConstraintLayout中控件居中

洲行 2022-02-27 阅读 73


背景

UI要求部分场景居中显示两个按钮,部分场景仅居中显示其中一个按钮,效果图如下:

利用Guideline实现ConstraintLayout中控件居中_ide

利用Guideline实现ConstraintLayout中控件居中_xml_02

实现方案

  1. activity_main.xml
<?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"
tools:context=".MainActivity">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="62dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"

android:id="@+id/centerLayout"
android:background="@color/colorPrimary">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="156dp"
android:layout_height="46dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="@color/colorAccent"
android:id="@+id/aLayout"
app:layout_constraintEnd_toStartOf="@+id/guideline"
>

<TextView
android:text="操作A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="156dp"
android:layout_height="46dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@color/colorAccent"
android:id="@+id/bLayout"
app:layout_constraintStart_toStartOf="@+id/guideline"
android:layout_marginStart="8dp">

<TextView
android:text="操作B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.Guideline
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.5"
android:id="@+id/guideline"/>
</androidx.constraintlayout.widget.ConstraintLayout>

<Button
android:text="隐藏B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/hideBBtn"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toStartOf="@+id/showBBtn"
android:layout_marginBottom="76dp"
app:layout_constraintBottom_toBottomOf="parent"/>

<Button
android:text="显示B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/showBBtn"
app:layout_constraintBaseline_toBaselineOf="@+id/hideBBtn"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toEndOf="@+id/hideBBtn"
app:layout_constraintHorizontal_bias="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
  1. activity代码(Kotlin)
hideBBtn.setOnClickListener {
bLayout.visibility = View.GONE
guideline.setGuidelinePercent(1.0f)
}
showBBtn.setOnClickListener {
bLayout.visibility = View.VISIBLE
guideline.setGuidelinePercent(0.5f)
}

Demo 代码及apk

https://gitee.com/cxyzy1/constraintLayoutDemos/tree/master/centerButtons



举报

相关推荐

0 条评论