在发布了我对这个问题的其他答案后,我意识到它没有解决如何将 multi-line 居中TextView
。
参考上图,最左边的框有一行TextView
。TheTextView
和 theImageView
在框中作为一个组居中。这是通过为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"
(宽度设置为 0dp)。如果设置,小部件将具有与使用 wrap_content 相同的大小,但会受到约束的限制(即它不会扩展超出它们)
更新:看起来上面的 XML 需要为ConstraintLayout
1.1.0 beta2 更改。请参阅发布更新。
我认为我们现在在 XML 中寻找的是以下内容:
<TextView
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
.. the rest of it .../>
我已经使用 1.1.0 之前的 beta2 布局留下了这篇文章的其余部分。要更新,只需进行上述更改。中心问题仍然存在。
这对于单行示例非常有效,并且视图在框中居中,但是当TextView
跨越多行时我们遇到了困难,就像在上图中的中间框一样。尽管 中的文本TextView
被包裹并且不会超出其约束范围,但ImageView
和TextView
并没有像我们预期的那样居中。实际上,边界TextView
延伸到蓝色框的右侧。
我对此的快速解决方法是在最右侧框中Space
的左侧插入一个零宽度小部件。ImageView
链条是该框现在锚定在Space
小部件和框的右侧之间。的ImageView
左侧受 的约束Space
。
Space
现在可以将小部件扩展为像垫片一样将 向右移动使链ImageView
居中的量。(见上图中的右框。)计算小部件需要多宽的getExcessWidth()
方法。MainActivity
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);
}
}