如何使用ConstraintLayout将多个视图一起居中? [英] How to center multiple Views together using ConstraintLayout?
问题描述
Google宣布了一种新布局，名为" ConstraintLayout "应该是最终布局，可以代替所有布局，同时保持平坦(无嵌套布局)，并具有更好的性能.
Google has announced a new layout called "ConstraintLayout" that's supposed to be the ultimate layout, that could replace all of the layouts while staying flat (without nested layouts) and have better performance.
事情是，除了Google IO上展示的视频外，我几乎看不到任何可以帮助我解决此问题的教程.
Thing is, I barely see any tutorials for it that could help me on this matter, other than the video presented on Google IO.
考虑到我在另一个布局中有一个垂直居中的LinearLayout，我要尝试将它们都转换为一个ConstraintLayout.
What I am trying to do is, given that I have a vertically-centered LinearLayout within another layout - convert them both into a single ConstraintLayout.
毕竟，这是新布局的目的...
After all, this is the purpose of this new layout...
我要处理的布局如下:
请注意，中心的视图仅垂直居中，并且两个textView位于ImageView的右侧，ImageView的视图也垂直居中.
Notice that the views in the center are only centered vertically, and that the 2 textViews are to the right of the ImageView, which is also centered vertically.
这一切都可以与RelativeLayout一起使用，后者具有2个TextView的LinearLayout，但是我想知道如何将它们转换为单个ConstraintLayout.
This all works well with RelativeLayout, which has the LinearLayout of the 2 TextViews, but I wish to know how to convert them into a single ConstraintLayout.
以下是我所显示的XML示例:
Here's a sample XML of what I've shown:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/listPreferredItemHeightSmall">
<ImageView
android:id="@+id/appIconImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="4dp"
android:layout_marginStart="2dp"
android:adjustViewBounds="true"
android:src="@android:drawable/sym_def_app_icon"
tools:ignore="ContentDescription"/>
<LinearLayout
android:id="@+id/appDetailsContainer"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="@+id/appIconImageView"
android:layout_toLeftOf="@+id/overflowView"
android:layout_toRightOf="@+id/appIconImageView"
android:layout_toStartOf="@+id/overflowView"
android:orientation="vertical">
<TextView
android:id="@+id/appLabelTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:text="label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textDirection="locale"
tools:ignore="HardcodedText,UnusedAttribute"/>
<TextView
android:id="@+id/appDescriptionTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:minLines="3"
android:text="description"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textDirection="locale"
tools:ignore="HardcodedText,UnusedAttribute"/>
</LinearLayout>
<ImageView
android:id="@+id/overflowView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:padding="10dp"
app:srcCompat="@drawable/ic_more_vert_black_24dp"
tools:src="@drawable/ic_more_vert_black_24dp"
tools:ignore="ContentDescription"/>
<ImageView
android:id="@+id/isSystemAppImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/overflowView"
android:layout_alignLeft="@+id/overflowView"
android:layout_alignParentBottom="true"
android:layout_alignRight="@+id/overflowView"
android:layout_alignStart="@+id/overflowView"
android:adjustViewBounds="true"
android:scaleType="centerInside"
app:srcCompat="@drawable/ic_warning_black_24dp"
tools:ignore="ContentDescription"
tools:src="@drawable/ic_warning_black_24dp"/>
</RelativeLayout>
我尝试过的
我试图阅读一些文章并观看一些Google视频:
What I tried
I tried to read some articles and watch some videos of Google :
- https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
- https://www.youtube.com/watch?v=sO9aX87hq9c
- https://youtu.be/csaXml4xtN8?t=1693
- https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
- https://www.youtube.com/watch?v=sO9aX87hq9c
- https://youtu.be/csaXml4xtN8?t=1693
那没有帮助，所以我尝试使用它，希望自己能找到使用方法. 但是我不知道该怎么做.我尝试使用该功能转换布局，但这会使视图变得一团糟，并增加了我不想拥有的额外边距.
That didn't help, so I tried to using it, hoping I will find out how to use it myself. But I can't find out how to do it. I tried using the feature to convert the layouts, but this makes a huge mess of the views and puts additional margins that I don't want to have.
如何将2个布局转换为单个ConstraintLayout?
How can I convert the 2 layouts into a single ConstraintLayout ?
推荐答案
在此处./h3>
ContraintLayout 包含功能-Chains -可以实现您的要求:
Take a look at my answer here.
ContraintLayout contains a feature - Chains - that makes it possible to implement what you are asking:
链在单轴上(水平或垂直)提供类似组的行为 垂直).
Chains provide group-like behavior in a single axis (horizontally or vertically).
如果一组小部件通过链接在一起，则被视为链 双向连接
A set of widgets are considered a chain if they a linked together via a bi-directional connection
一旦创建了一条链，就有两种可能性:
Once a chain is created, there are two possibilities:
- 将元素散布在可用空间中
- 也可以打包"一条链，在这种情况下，元素可以组合在一起
对于您的情况，您必须打包label和description TextViews并将它们垂直居中放置在父级中:
As for your case, you'll have to pack your label and description TextViews and center them in you parent vertically:
(确保您使用支持链的ConstraintLayout版本)
(make sure you use a version of ConstraintLayout that supports chains)
<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintLeft_toRightOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"/>
<TextView
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button\nMkay"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/textView"/>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher"/>
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher"/>
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="@mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
更新25-06-2019( @Saeid Z ):
现在在约束布局1.1.3中，我们必须使用app:layout_constraintHorizontal_chainStyle="packed"而不是app:layout_constraintVertical_chainPacked="true"
Update 25-06-2019 (@Saeid Z):
Now in constraint layout 1.1.3 we must use app:layout_constraintHorizontal_chainStyle="packed" instead of app:layout_constraintVertical_chainPacked="true"
这篇关于如何使用ConstraintLayout将多个视图一起居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
