ConstraintLayout - 与自身成比例的宽度/高度?

时间:2018-04-03 21:14:06

标签: android android-constraintlayout

我正试图弄清楚如何使用约束布局来实现以下行为:

  1. 将视图放在ConstraintLayout父级的中心
  2. 使视图宽度为父宽度的一半
  3. 使视图高度等于其宽度
  4. (即 - 在中心放置一个正方形)

    我尝试使用这种组合:

    using namespace std;
    class Class1 {
         public:
             void doSomething(const char* sql) { 
                  mysqli_query(connection, sql);
             }
    }
    

    但我不确定如何从这里继续

4 个答案:

答案 0 :(得分:8)

要使您孩子的宽度距离父母一半,请使用指南:左边一个是0.25个百分点,右边一个是0.75

然后,将您的观点置于这些准则之间。

最后,将layout_constraintDimensionRatio设置为' 1:1':

enter image description here

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"/>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

答案 1 :(得分:5)

你可以不用指南这很容易。

只需使用 app:layout_constraintWidth_percent =&#34; 0.5&#34;

在版本ConstraintLayout中有效: 1.1.0-beta5 以及之后。

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/dark_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

enter image description here

答案 2 :(得分:2)

我不明白为什么您还可以只使用复杂的Guideline系统:

app:layout_constraintWidth_percent="0.5"

为父级宽度的一半,

app:layout_constraintDimensionRatio="1:1"

以达到与宽度相同的高度。此尺寸比例可容纳所有数字,甚至是两倍。

以下是带有中心的整个代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

</android.support.constraint.ConstraintLayout>

答案 3 :(得分:1)

您可以使用指南(Constraint to a guildeline)来实现此行为。您应该设置两个垂直指南,其中百分比(第一个--25%和第二个 - 75%)将为您提供父级宽度的一半。然后,您应该通过开始/结束将您的视图约束到这些准则。此外,您应该通过顶部/底部将其约束为父级,并将视图的尺寸比设置为1:1,使其成为方形和居中。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>