如果某些链接视图约束到另一个链接视图,则 ConstraintLayout 链不起作用
ConstraintLayout chain does not work if some chained views constrained to another chained view
不知道是不是ConstraintLayout的bug,想问一下有没有人知道我弄错了
我有一个布局,我想在屏幕上均匀分布 3 个元素。
就像下面这样:
我在它们之间形成了水平链,如您所见,它们分布均匀并且运行良好。
现在我想在每个元素内放置一个图像和一个居中的 TextView,如下所示:
所以这就是我尝试做的,以元素 1 为例:
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/image1"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintHorizontal_chainStyle="packed"/>
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:text="@string/text1"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
android:gravity="center_vertical"/>
可悲的是,似乎"break" 3元素链。这 3 个元素现在不再水平展开,而是包裹成一个非常小的尺寸:
如果我删除了 ImageView 和 TextView 之间的链,它就可以正常工作。但是后来我无法将 ImageView 和 TextView 置于元素内。
有没有人遇到过这样的事情?你是怎么解决的?
现在,我知道我至少有 2 个替代方案来解决这个问题:
(1) 使用一个带有复合可绘制对象的 TextView,而不是 ImageView + TextView;
(2) 用一个LinearLayout包裹ImageView和TextView
但我想知道为什么它不起作用(以便我们更好地理解ConstraintLayout),而不是寻找替代方案
谢谢!
这可能是最接近 ImageView
和 TextView
在 ConstraintLayout
中居中的方法,无需任何类型的嵌套布局。
这是执行此操作的代码
<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:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout"
app:layout_constraintLeft_toLeftOf="parent"
android:id="@+id/frameLayout2"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:id="@+id/frameLayout"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
app:layout_constraintRight_toRightOf="parent"
android:background="@drawable/border_normal"
app:layout_constraintLeft_toRightOf="@+id/frameLayout"
android:id="@+id/frameLayout3"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView2"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
app:layout_constraintTop_toTopOf="@+id/frameLayout3"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout3"
app:layout_constraintTop_toTopOf="@+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView3"
android:text="TextView"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
备用解决方案
更好的解决方案是将图像视图和文本视图包装在 ConstraintLayout
中
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="@+id/frameLayout"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView2"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/imageView2" />
</android.support.constraint.ConstraintLayout>
编辑
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<FrameLayout
android:id="@+id/frameLayout3"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="@id/frameLayout2"
app:layout_constraintRight_toLeftOf="@+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginLeft="24dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toRightOf="@id/frameLayout2"
app:layout_constraintLeft_toRightOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginRight="24dp" />
<FrameLayout
android:id="@+id/frameLayout2"
android:layout_width="0dp"
android:layout_height="110dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/border_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
如果链样式设置为app:layout_constraintHorizontal_chainStyle="spread_inside"
,布局将正确定位仅
这是输出的样子
ConstraintLayout
似乎按预期工作。您没有指定元素的视图类型,因此我采用 TextView
和 ImageView
并将它们链接在 View
中。我还将 TextView
的宽度从 0dp
(match_constraints) 更改为 wrap_content
。这是结果:
..和 XML.
<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">
<View
android:id="@+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<View
android:id="@+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="@+id/element_1"
app:layout_constraintRight_toLeftOf="@+id/element_3"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_2"
app:layout_constraintRight_toLeftOf="@+id/text2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A longer string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image2"
app:layout_constraintRight_toRightOf="@id/element_2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<View
android:id="@+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="@+id/element_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_3"
app:layout_constraintRight_toLeftOf="@+id/text3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A still longer string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image3"
app:layout_constraintRight_toRightOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3" />
</android.support.constraint.ConstraintLayout>
如果这对您来说仍然是个问题,如果您可以 post 更多 XML 包括元素,那将会很有帮助。与此同时,有几点想法。
首先,检查以确保您没有将 left/right 与 start/end 约束混用。如果您同时提供两者,他们应该同意。过去设计师在应用这些方面存在不一致。
其次,您可以在每个元素的左侧和右侧设置障碍物,并在这些障碍物之间链接 TextView
和 ImageView
。请参阅 this writeup 关于 ConstraintLayout
中的障碍。
在发布我对这个问题的其他答案后,我意识到它没有解决如何将多行居中的问题 TextView
。
参照上图,最左边的方框只有一行TextView
。 TextView
和 ImageView
在框中作为一个组居中。这是通过为 TextView
.
指定以下内容来完成的
<TextView
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
.. the rest of it .../>
参见 关于 app:layout_constraintWidth_default="wrap"
的使用。
app:layout_constraintWidth_default="wrap"
(with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)
更新: 上面的 XML 似乎需要针对 ConstraintLayout
1.1.0 beta2 进行更改。见 release update.
我认为我们现在在 XML 中寻找的是以下内容:
<TextView
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
.. the rest of it .../>
我已使用 1.1.0 之前的 beta2 布局保留了这篇文章的其余部分。要更新,只需进行上述更改即可。居中问题仍然存在。
这对于单行示例非常有用,视图在框中居中,但是当 TextView
跨越多行时,我们 运行 遇到了困难,就像在图像的中间框中一样多于。尽管 TextView
中的文本被换行并且不会超出其限制,但 ImageView
和 TextView
并不像我们预期的那样居中。事实上,TextView
的边界延伸到蓝色框的右侧。
我的快速解决方法是在最右边的框中 ImageView
的左侧插入一个零宽度 Space
小部件。链条是该框现在锚定在 Space
小部件和框的右侧之间。 ImageView
被 Space
.
限制在左侧
现在可以扩展 Space
小部件,使其像垫片一样将 ImageView
向右移动一定量,使链居中。 (参见上图中的右框。)MainActivity
的 getExcessWidth()
方法计算 Space
小部件需要的宽度。
这是 XML:
<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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toStartOf="@+id/element_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toStartOf="@+id/element_3"
app:layout_constraintStart_toEndOf="@+id/element_1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<ImageView
android:id="@+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_2"
app:layout_constraintRight_toLeftOf="@+id/text2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<android.support.v4.widget.Space
android:id="@+id/spacer3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintLeft_toLeftOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<ImageView
android:id="@+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/spacer3"
app:layout_constraintRight_toLeftOf="@id/text3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="String"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintLeft_toRightOf="@id/image2"
app:layout_constraintRight_toRightOf="@id/element_2"
app:layout_constraintTop_toTopOf="@id/element_2"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/text3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintLeft_toRightOf="@id/image3"
app:layout_constraintRight_toRightOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3"
app:layout_constraintWidth_default="wrap" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chained_chains);
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.constraintLayout);
layout.post(new Runnable() {
@Override
public void run() {
final TextView textView = (TextView) findViewById(R.id.text3);
int excessWidth = getExcessWidth(textView);
if (excessWidth > 0) {
Space spacer = (Space) findViewById(R.id.spacer3);
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) spacer.getLayoutParams();
lp.width = getExcessWidth(textView) / 2;
spacer.setLayoutParams(lp);
}
}
});
}
private int getExcessWidth(TextView textView) {
if (textView.getLineCount() <= 1) {
return 0;
}
Layout layout = textView.getLayout();
int maxWidth = 0;
for (int i = 0; i < textView.getLineCount(); i++) {
maxWidth = Math.max(maxWidth, (int) layout.getLineWidth(i));
}
return Math.max(textView.getWidth() - maxWidth, 0);
}
}
我注意到您将内部视图链设置为 'packed' 并使用
行
app:layout_constraintHorizontal_chainStyle="packed"
似乎此功能正在扩展到父视图('elements in your case')。
您应该尝试暂时删除标记中的这一行,看看问题是否消失。
如果是这样,修复应该很容易。有很多方法可以在不使用嵌套布局的情况下实现同样的效果。
不知道是不是ConstraintLayout的bug,想问一下有没有人知道我弄错了
我有一个布局,我想在屏幕上均匀分布 3 个元素。
就像下面这样:
我在它们之间形成了水平链,如您所见,它们分布均匀并且运行良好。
现在我想在每个元素内放置一个图像和一个居中的 TextView,如下所示:
所以这就是我尝试做的,以元素 1 为例:
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/image1"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintHorizontal_chainStyle="packed"/>
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:text="@string/text1"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
android:gravity="center_vertical"/>
可悲的是,似乎"break" 3元素链。这 3 个元素现在不再水平展开,而是包裹成一个非常小的尺寸:
如果我删除了 ImageView 和 TextView 之间的链,它就可以正常工作。但是后来我无法将 ImageView 和 TextView 置于元素内。
有没有人遇到过这样的事情?你是怎么解决的?
现在,我知道我至少有 2 个替代方案来解决这个问题:
(1) 使用一个带有复合可绘制对象的 TextView,而不是 ImageView + TextView;
(2) 用一个LinearLayout包裹ImageView和TextView
但我想知道为什么它不起作用(以便我们更好地理解ConstraintLayout),而不是寻找替代方案
谢谢!
这可能是最接近 ImageView
和 TextView
在 ConstraintLayout
中居中的方法,无需任何类型的嵌套布局。
这是执行此操作的代码
<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:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout"
app:layout_constraintLeft_toLeftOf="parent"
android:id="@+id/frameLayout2"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:id="@+id/frameLayout"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
app:layout_constraintRight_toRightOf="parent"
android:background="@drawable/border_normal"
app:layout_constraintLeft_toRightOf="@+id/frameLayout"
android:id="@+id/frameLayout3"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView2"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
app:layout_constraintTop_toTopOf="@+id/frameLayout3"
android:layout_marginStart="24dp" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="@+id/frameLayout3"
app:layout_constraintTop_toTopOf="@+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="@+id/imageView3"
android:text="TextView"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
备用解决方案
更好的解决方案是将图像视图和文本视图包装在 ConstraintLayout
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="@+id/frameLayout"
app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView2"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/imageView2" />
</android.support.constraint.ConstraintLayout>
编辑
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<FrameLayout
android:id="@+id/frameLayout3"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="@drawable/border_normal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="@id/frameLayout2"
app:layout_constraintRight_toLeftOf="@+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginLeft="24dp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toRightOf="@id/frameLayout2"
app:layout_constraintLeft_toRightOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginRight="24dp" />
<FrameLayout
android:id="@+id/frameLayout2"
android:layout_width="0dp"
android:layout_height="110dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/border_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
如果链样式设置为app:layout_constraintHorizontal_chainStyle="spread_inside"
这是输出的样子
ConstraintLayout
似乎按预期工作。您没有指定元素的视图类型,因此我采用 TextView
和 ImageView
并将它们链接在 View
中。我还将 TextView
的宽度从 0dp
(match_constraints) 更改为 wrap_content
。这是结果:
..和 XML.
<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">
<View
android:id="@+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<View
android:id="@+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="@+id/element_1"
app:layout_constraintRight_toLeftOf="@+id/element_3"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_2"
app:layout_constraintRight_toLeftOf="@+id/text2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A longer string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image2"
app:layout_constraintRight_toRightOf="@id/element_2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<View
android:id="@+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="@+id/element_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_3"
app:layout_constraintRight_toLeftOf="@+id/text3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A still longer string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/image3"
app:layout_constraintRight_toRightOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3" />
</android.support.constraint.ConstraintLayout>
如果这对您来说仍然是个问题,如果您可以 post 更多 XML 包括元素,那将会很有帮助。与此同时,有几点想法。
首先,检查以确保您没有将 left/right 与 start/end 约束混用。如果您同时提供两者,他们应该同意。过去设计师在应用这些方面存在不一致。
其次,您可以在每个元素的左侧和右侧设置障碍物,并在这些障碍物之间链接 TextView
和 ImageView
。请参阅 this writeup 关于 ConstraintLayout
中的障碍。
在发布我对这个问题的其他答案后,我意识到它没有解决如何将多行居中的问题 TextView
。
参照上图,最左边的方框只有一行TextView
。 TextView
和 ImageView
在框中作为一个组居中。这是通过为 TextView
.
<TextView
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
.. the rest of it .../>
参见 app:layout_constraintWidth_default="wrap"
的使用。
app:layout_constraintWidth_default="wrap"
(with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)
更新: 上面的 XML 似乎需要针对 ConstraintLayout
1.1.0 beta2 进行更改。见 release update.
我认为我们现在在 XML 中寻找的是以下内容:
<TextView
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
.. the rest of it .../>
我已使用 1.1.0 之前的 beta2 布局保留了这篇文章的其余部分。要更新,只需进行上述更改即可。居中问题仍然存在。
这对于单行示例非常有用,视图在框中居中,但是当 TextView
跨越多行时,我们 运行 遇到了困难,就像在图像的中间框中一样多于。尽管 TextView
中的文本被换行并且不会超出其限制,但 ImageView
和 TextView
并不像我们预期的那样居中。事实上,TextView
的边界延伸到蓝色框的右侧。
我的快速解决方法是在最右边的框中 ImageView
的左侧插入一个零宽度 Space
小部件。链条是该框现在锚定在 Space
小部件和框的右侧之间。 ImageView
被 Space
.
现在可以扩展 Space
小部件,使其像垫片一样将 ImageView
向右移动一定量,使链居中。 (参见上图中的右框。)MainActivity
的 getExcessWidth()
方法计算 Space
小部件需要的宽度。
这是 XML:
<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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toStartOf="@+id/element_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toStartOf="@+id/element_3"
app:layout_constraintStart_toEndOf="@+id/element_1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_1"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintTop_toTopOf="@id/element_1" />
<ImageView
android:id="@+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="@id/element_2"
app:layout_constraintRight_toLeftOf="@+id/text2"
app:layout_constraintTop_toTopOf="@id/element_2" />
<android.support.v4.widget.Space
android:id="@+id/spacer3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintLeft_toLeftOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<ImageView
android:id="@+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="@id/spacer3"
app:layout_constraintRight_toLeftOf="@id/text3"
app:layout_constraintTop_toTopOf="@id/element_3" />
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="String"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_1"
app:layout_constraintLeft_toRightOf="@id/image1"
app:layout_constraintRight_toRightOf="@id/element_1"
app:layout_constraintTop_toTopOf="@id/element_1"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_2"
app:layout_constraintLeft_toRightOf="@id/image2"
app:layout_constraintRight_toRightOf="@id/element_2"
app:layout_constraintTop_toTopOf="@id/element_2"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/text3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="@id/element_3"
app:layout_constraintLeft_toRightOf="@id/image3"
app:layout_constraintRight_toRightOf="@id/element_3"
app:layout_constraintTop_toTopOf="@id/element_3"
app:layout_constraintWidth_default="wrap" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chained_chains);
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.constraintLayout);
layout.post(new Runnable() {
@Override
public void run() {
final TextView textView = (TextView) findViewById(R.id.text3);
int excessWidth = getExcessWidth(textView);
if (excessWidth > 0) {
Space spacer = (Space) findViewById(R.id.spacer3);
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) spacer.getLayoutParams();
lp.width = getExcessWidth(textView) / 2;
spacer.setLayoutParams(lp);
}
}
});
}
private int getExcessWidth(TextView textView) {
if (textView.getLineCount() <= 1) {
return 0;
}
Layout layout = textView.getLayout();
int maxWidth = 0;
for (int i = 0; i < textView.getLineCount(); i++) {
maxWidth = Math.max(maxWidth, (int) layout.getLineWidth(i));
}
return Math.max(textView.getWidth() - maxWidth, 0);
}
}
我注意到您将内部视图链设置为 'packed' 并使用
行
app:layout_constraintHorizontal_chainStyle="packed"
似乎此功能正在扩展到父视图('elements in your case')。
您应该尝试暂时删除标记中的这一行,看看问题是否消失。
如果是这样,修复应该很容易。有很多方法可以在不使用嵌套布局的情况下实现同样的效果。