ConstraintLayout：平方视图，均匀分布，自动调整

-2

如何根据屏幕宽度使用ConstraintLayout获得5个均匀分布的正方形，其中灵活大小为？ConstraintLayout：平方视图，均匀分布，自动调整

2017-09-23 Alexey

欢迎堆栈溢出。你已经尝试过这么做了吗？请回顾[我如何问一个好问题]（https://stackoverflow.com/help/how-to-ask）。堆栈溢出不是一种编码服务。预计您会在发布之前研究您的问题，并尝试亲自编写代码***。如果您遇到的东西*规范*，回来和包括[最小，完整，可验证的示例]（https://stackoverflow.com/help/mcve）和你尝试过什么样的总结，所以我们可以提供帮助。 – FluffyKitten

用百分数的使用指南，这样的事情：

<?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" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline" 
    app:layout_constraintGuide_begin="316dp" 
    android:orientation="horizontal" /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/guideline2" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

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

<Button 
    android:id="@+id/button3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline2" 
    app:layout_constraintRight_toLeftOf="@+id/guideline3" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline3" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.4" /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline3" 
    app:layout_constraintRight_toLeftOf="@+id/guideline4" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline4" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.6" /> 

<Button 
    android:id="@+id/button5" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline4" 
    app:layout_constraintRight_toLeftOf="@+id/guideline5" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.5" 
    app:layout_constraintVertical_bias="0.503" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline5" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.8" /> 

<Button 
    android:id="@+id/button6" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline5" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 
</android.support.constraint.ConstraintLayout>

要添加指引，在ConstraintLayout右击/添加垂直/ Horisontal指南... 希望它可以帮助你

干杯

来源

2017-09-23 21:16:22

您需要创建一系列小部件，这些小部件连接到其父项的所有侧容器（你可以将这个父容器的尺寸设置为你想要的任何东西）。每个小部件应该有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" 
android:orientation="horizontal" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<FrameLayout 
    android:id="@+id/frame1" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/frame2" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame2" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame1" 
    app:layout_constraintRight_toLeftOf="@+id/frame3" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame3" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame2" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

</android.support.constraint.ConstraintLayout>

来源

2017-09-28 10:04:46 ema3272

-2

Img. Vertical orientation

Img. Horizontal orientation

你只需要一个约束的意见添加到第一个视图。在顶部和底部。

<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.v7.widget.CardView 
    android:id="@+id/uno" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimary" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/dos" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    android:layout_margin="8dp"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/dos" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimaryDark" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/tres" 
    app:layout_constraintStart_toEndOf="@+id/uno" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/tres" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorAccent" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toEndOf="@+id/dos" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno" />

来源

2017-12-01 00:20:05 fer

我指的是：app：layout_constraintTop_toTopOf =“@ id/uno” app：layout_constraintBottom_toBottomOf =“@ id/uno” – fer

ConstraintLayout：平方视图，均匀分布，自动调整

回答

相关问题