我的布局符合设计要求:
关闭按钮必须位于顶部,其下方是ImageView
和TextView
。 TextView
的大小是动态的,具体取决于数据库中保存的内容。 ImageView
和TextView
都必须位于关闭按钮下方,就像第一张图片一样:
如果相反,我可以沿Barrier
方向使用bottom
并引用ImageView
和TextView
的ID作为关闭按钮的位置到,但这是另一回事。
是否可以在不将ImageView
和TextView
嵌套在另一个布局(例如LinearLayout
中)的情况下执行此视图?尝试使用ConstraintLayout
来实现非嵌套视图。
谢谢!
编辑:
这是一个测试版图
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingTop="20dp"
android:paddingRight="16dp">
<ImageView
android:id="@+id/waste_type_close"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_account_alert_grey600_24dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/waste_type_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_marginLeft="20dp"
android:src="@drawable/ic_account_alert_black_48dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/waste_type_close" />
<TextView
android:id="@+id/waste_type_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="name"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/waste_type_image"
app:layout_constraintLeft_toRightOf="@+id/waste_type_image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/waste_type_image" />
</ConstraintLayout>
编辑:
这是另一个测试版面:
<ImageView
android:id="@+id/waste_type_close"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_account_alert_grey600_24dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/waste_type_barrier"/>
<ImageView
android:id="@+id/waste_type_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_marginLeft="20dp"
android:src="@drawable/ic_account_alert_black_48dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/waste_type_close" />
<TextView
android:id="@+id/waste_type_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="nameaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/waste_type_image"
app:layout_constraintLeft_toRightOf="@+id/waste_type_image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/waste_type_image" />
<android.support.constraint.Barrier
android:id="@+id/waste_type_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="waste_type_image, waste_type_name"/>
哪个产量:
答案 0 :(得分:0)
放置一个约束到关闭按钮下方的障碍物,并在约束下面将项目(图像视图和文本视图)约束到障碍物的底部放置约束。对于动态textview,只需相对于textview的开始在Imageview上创建一个约束。
答案 1 :(得分:0)
我相信仅使用带有三个子级的ConstraintLayout
不可能实现这种布局。
尽管ConstraintLayout的“重点”是避免嵌套视图,但有时这是获得所需内容的唯一方法。在这里,我认为您应该将waste_type_image
和waste_type_name
包装在LinearLayout
中。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<ImageView
android:id="@+id/waste_type_close"
android:layout_width="24dp"
android:layout_height="24dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="@drawable/ic_delete_24dp"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@+id/waste_type_close"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="@+id/waste_type_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_marginLeft="20dp"
app:srcCompat="@drawable/ic_share_24dp"/>
<TextView
android:id="@+id/waste_type_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="12dp"
android:textSize="30sp"
android:textStyle="bold"
android:text="name"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout
答案 2 :(得分:0)
您可以使用SequenceLayout来实现。
那里已经有一个类似问题的样本。 (选中Use Android's ConstraintLayout to create table-like view)
以下是您的操作方法:
<com.yashoid.sequencelayout.SequenceLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pgSize="360"
app:sequences="@xml/sequences">
<ImageView
android:id="@+id/waste_type_close"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@drawable/ic_account_alert_grey600_24dp"/>
<View
android:id="@+id/helper"
android:layout_width="0dp"
android:layout_height="0dp"/>
<ImageView
android:id="@+id/waste_type_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:src="@drawable/ic_account_alert_black_48dp"/>
<TextView
android:id="@+id/waste_type_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="name"
android:textSize="30sp"
android:textStyle="bold"/>
</com.yashoid.sequencelayout.SequenceLayout>
您的@xml/sequences
将如下所示:
<Sequences>
<Horizontal>
<Span size="1w"/>
<Span id="@id/waste_type_close" size="24pg"/>
<Span size="16pg"/>
</Horizontal>
<Horizontal>
<Span size="36pg"/>
<Span id="@id/waste_type_image" size="84pg"/>
<Span size="12pg"/>
<Span id="@id/waste_type_name" size="1w"/>
<Span size="16pg"/>
</Horizontal>
<Vertical>
<Span size="20pg"/>
<Span id="@id/waste_type_close" size="24pg"/>
<Span size="16pg"/>
<Span id="@id/helper" size="@MAX(100%waste_type_image,100%waste_type_name)"/>
</Vertical>
<Vertical start="start@helper" end="end@helper">
<Span size="1w"/>
<Span id="waste_type_image" size="84pg"/>
<Span size="1w"/>
</Vertical>
<Vertical id="waste_type_name_sequence" start="start@helper" end="end@helper">
<Span size="1w"/>
<Span id="waste_type_name" size="wrap"/>
<Span size="1w"/>
</Vertical>
</Sequences>