背景
谷歌宣布了一个名为"“的新布局,这应该是终极布局,它可以取代所有布局,同时保持扁平(没有嵌套布局),并具有更好的性能。
问题所在
问题是,除了Google IO上展示的视频之外,我几乎看不到任何关于它的教程可以帮助我解决这个问题。
我想要做的是,假设我在另一个布局中有一个垂直居中的LinearLayout -将它们都转换成一个ConstraintLayout。
毕竟,这就是这个新布局的目的。
我希望处理的布局如下所示:
请注意,中心的视图仅垂直居中,并且两个textViews位于ImageView的右侧,该视图也垂直居中。
这一切在RelativeLayout上都能很好地工作,它有2个TextViews的LinearLayout,但我想知道如何将它们转换成单个ConstraintLayout。
下面是我所展示的示例XML:
<?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的视频:
这没有帮助,所以我试着使用它,希望我自己能找到如何使用它。但是我不知道该怎么做。我尝试使用该功能来转换布局,但这会使视图变得非常混乱,并增加我不想要的额外页边距。
问题是
如何将两个布局转换为单个ConstraintLayout?
发布于 2016-10-18 15:38:56
看看我的答案here。
ContraintLayout
包含一个特性-- Chains
--它可以实现你想要的东西:
链在单个轴上(水平或垂直)提供类似于组的行为。
如果一组小部件通过双向连接链接在一起,则这些小部件被视为链
创建链后,有两种可能性:
至于你的情况,你必须打包你的label
和description
TextViews,并将它们垂直居中:
(请确保使用支持链的ConstraintLayout
版本)
<?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>
Update 25-06-2019 (@Saeid Z):
现在在constraint layout 1.1.3中我们必须使用app:layout_constraintHorizontal_chainStyle="packed"
而不是app:layout_constraintVertical_chainPacked="true"
发布于 2016-05-30 13:46:31
将app:layout_constraintVertical_bias="0.5"
设置为需要垂直居中的视图,仅当为边界指定约束(例如,垂直偏移为顶部和底部,水平偏移为左和右)时,偏移属性才有效。
举个例子:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/constraintLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintVertical_bias="0.5" />
</android.support.constraint.ConstraintLayout>
让它在我的布局中工作:https://github.com/hidroh/tldroid/blob/master/app/src/main/res/layout/activity_main.xml,非常类似的布局,尽管我把东西放在屏幕高度的1/3。
发布于 2017-07-14 12:33:02
要使某些内容垂直或水平居中,请在布局上设置opposing constraint。
垂直居中
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
水平居中
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
https://stackoverflow.com/questions/37507057
复制相似问题