标签: android-constraintlayout

marginTop如果我所约束的视图可见性消失,则使用下面的xml 会被忽略.

目前最新的布局lib版本会发生这种情况 com.android.support.constraint:constraint-layout:1.0.0-beta4

例:

tvMessage和ivCommentImage是visible-在16DP上边距llLeftActions和llRightActions工作正常.如果ivCommentImage是gone边距被忽略.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp">

<!-- some more views here -->

    <TextView
        android:id="@+id/tvMessage"
        style="@style/SocialFeed.Description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ivProfile"
        app:layout_goneMarginTop="0dp"
        tools:text="@string/lorem_ipsum_140chars"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/ivCommentImage"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvMessage"
        app:layout_goneMarginTop="0dp"
        />

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

    <LinearLayout
        android:id="@+id/llLeftActions"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center_vertical|left"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="@+id/tvMessage"
        app:layout_constraintRight_toLeftOf="@+id/gCenter"
        app:layout_constraintTop_toBottomOf="@+id/ivCommentImage"
        app:layout_goneMarginTop="0dp"
        />

    <LinearLayout
        android:id="@+id/llRightActions" …

在我写这个问题之前,我已经搜索了相同的问题,他们确实导出了许可证,因为仍然使用alpha版本的约束布局.但是现在android已经发布了稳定版的约束布局.我尝试了很多设置,但仍然失败了..

我的最新消息 .travis.yml

language: android

jdk: oraclejdk8

android:
  components:
    - platform-tools
    - tools # to get the new `repository-11.xml`
    - tools # see https://github.com/travis-ci/travis-ci/issues/6040#issuecomment-219367943)
    - build-tools-25.0.0
    - android-25

    # Additional components
    - extra-google-google_play_services
    - extra-google-m2repository
    - extra-android-m2repository

  licenses:
    - 'android-sdk-preview-license-52d11cd2'
    - 'android-sdk-license-.+'
    - 'google-gdk-license-.+'

script:
   - ./gradlew clean build

这是我的 build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion '25.0.0'
    defaultConfig {
        applicationId "com.package.my"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 6
        versionName "1.3.1"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled …

我在ConstraintLayout中按顺序水平组织了TextView和Button:

我需要第一个元素(TextView)在文本足够短时只占用必要的空间,但是当需要显示更多文本时必要时展开,同时仍然留下足够的空间让第二个元素(Button)完全呈现在里面视图,其末尾与父级的末尾对齐.

这就是XML目前的样子:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:id="@+id/element1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Short enough text"/>

    <Button
        android:id="@+id/element2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:drawableLeft="@drawable/element2ButtonDrawable"
        android:drawablePadding="0dp"
        android:drawableStart="@drawable/element2ButtonDrawable"
        android:text="Action"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/element1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"/>

 </android.support.constraint.ConstraintLayout>

这是从"足够短的文本"切换到"将导致大部分底部被推到父视图边界之外的较长文本"时树呈现的方式:

是否有可能通过使用ConstraintLayout实现我想要做的事情？

(在撰写本文时,最新版本为1.0.2)

谢谢!

我想构建一个这样的布局:

在约束布局中,有一个像横幅一样的图像视图,然后有一个卡片与横幅的下边缘居中对齐,然后有另一个图像视图与卡片的上边缘对齐.

我面临的问题是,当与卡对齐时,第二个图像视图(绿色一个)进入后台而不是停留在前景中.

这是xml,

<android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            android:paddingBottom="@dimen/padding_10">

            <ImageView
                android:id="@+id/imageView_jobBackdrop_jobDetails"
                android:layout_width="match_parent"
                android:layout_height="175dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/backdrop_job_details"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_collapseMode="parallax"/>

            <ImageView
                android:id="@+id/imageView_companyLogo_jobDetails"
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails"
                app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" />

            <android.support.v7.widget.CardView
                android:id="@+id/cardView_jobHeader_jobDetails"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="24dp"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintVertical_bias="0.5">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/parent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView_jobTitle_jobDetails"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="16dp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="32dp"
                        android:gravity="center"
                        android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </android.support.constraint.ConstraintLayout>
            </android.support.v7.widget.CardView>
        </android.support.constraint.ConstraintLayout>

我正在学习如何使用ConstraintLayout并找到一些好的教程,以百分比形式查看宽度和高度.我知道我可以添加一个空视图来'创建'边距,但它似乎不对.有办法marginEnd='10%'吗？

我的最终目标是在左对齐的水平链中放置两个单行TextView,允许它们两个生长以填充剩余空间,必要时将其均匀分割,在没有空间时进行椭圆化处理.

视觉辅助:

这是我试图完成的布局代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

如您所见,我在水平链中布置了两个textview.我已经将链式样式设置为打包,以便它们保持在一起.我将水平偏置设置为0,以便链条保持对齐.我已经将宽度设置为wrap_content,以便它们在文本很短时不会拉伸,并且我还设置为app:layout_constrainedWidth="true"在文本很长时它们不会越过边界.这几乎完全符合我的要求,除非 textView2中的文本增长.随着textView1的增长,它将textView2向右推,直到它达到其约束,此时它会进行椭圆化(如预期/所需),但textview2的情况也是如此.随着textView2的增长,它会延伸到右边的房间,但是一旦它达到它的约束,而不是椭圆化,它会保持拉伸并开始将textView1推向左边,直到它完全不再可见.

视觉辅助(实际行为):

我试图layout_constraintHorizontal_weight在每个视图上使用设置为.5之类的东西,但除非我将两个视图宽度都更改为0dp(match_constraints),这会破坏两个视图都有短文本的情况(它会在两个文本之间添加额外的空间)视图).

感觉就是当你结合width=wrap_content使用时layout_constrainedWidth=true,重量值会被忽略.这仅仅是ConstraintLayout的限制吗？我花了很多时间试图找到一种方法来实现这项工作,而现在它看起来似乎不太可能.我已经退回到使用LinearLayout并做出一些设计妥协,但如果有人有任何想法,我真的很想让它工作.谢谢!

在RecyclerView中使用MotionLayouts时,我注意到如果高度发生变化,MotionLayouts将无法为其子项周围的环绕设置动画.

重现该行为的简单方法是使用以下布局:

<FrameLayout 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.motion.MotionLayout
        android:id="@+id/motion_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layoutDescription="@xml/scene">

        <View
            android:id="@+id/child"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.motion.MotionLayout>

</FrameLayout>

以及与OnClick触发器关联的MotionScene:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <OnClick
            motion:target="@id/child"
            motion:mode="toggle"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@id/child"
            android:layout_height="200dp"/>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@id/child"
            android:layout_height="400dp"/>

    </ConstraintSet>

</MotionScene>

这将产生以下结果:

如您所见,MotionLayout的高度在过渡开始时设置为最终预期高度,使其蓝色背景可见,直到子视图完成其自身的高度过渡并完全重叠.

如果您尝试实现扩展项目动画,则在RecyclerView中会发生同样的事情.

有没有办法让MotionLayout在转换期间完全适合它的孩子的高度,或者只是太高的成本效益？

有一个ConstraintLayout布局:

<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">

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="small text"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:ellipsize="end"
        android:singleLine="true"
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="small text"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

它显示如下: 现在没关系,但是如果我改为 android:text="small text",android:text="big teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext"那么视图会相互重叠..

我需要确保使用小文本有一个"换行内容",正如我在上面的屏幕截图中所做的那样,但是如果文本较大,则文本视图必须占据父级的大约40%的水平.那么文本也没有转移 - 我愿意android: ellipsize =" end "和android: singleLine =" true.

这应该是这样的(在Photoshop中进行编辑以进行演示): 如何使用ConstraintLayout或者如果不能 - 使用其他布局？

我正在为我的页面使用 MotionLayout。我有两种状态，可通过视图的 OnSwipe 切换：

<Transition
    motion:constraintSetStart="@+id/start"
    motion:constraintSetEnd="@+id/end"
    motion:duration="700"
    motion:motionInterpolator="easeIn">
    <OnSwipe
        motion:dragDirection="dragUp"
        motion:touchAnchorId="@+id/view"
        motion:touchAnchorSide="bottom"
        motion:touchRegionId="@+id/view" />
</Transition>

我还想从代码中将 OnClickListener 添加到此视图，或在 scene.xml 文件中添加新的 Transition，这将执行与 OnSwipe Transition 不同的操作，并且将使用同一视图的 OnClick 触发。但它们都阻止了 OnSwipe。那么有没有办法让 OnSwipe 和 OnClick 在同一个视图上？

谢谢

当图像的宽度/高度为 4/3 时，我想将图像的开始限制为父级的开始、从上到上、从头到尾，就像app:layout_constraintDimensionRatio="H,3:4"在 Android Xml 中一样。

下面是我的代码：

ConstraintLayout(
        modifier = Modifier
            .wrapContentHeight()
            .width(162.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(color = Color.White)
            .clickable {
                //do something
            }
    ) {
        val (coverImg, title, status, date) = createRefs()

        Image(
            "some ignored properties",
            modifier = Modifier
                .constrainAs(coverImg) {
                    linkTo(start = parent.start, end = parent.end)
                    top.linkTo(parent.top)
                    width = Dimension.fillToConstraints
                }
                .height(102.dp)//I don't want to specify its height
        )
        
        Text(...)
        AnyOtherLayout(...)
}