使用右对齐按钮将textview居中

Question

我有一个任意长度的textview + icon（图标+文本），需要在屏幕上居中。 在同一行上，有一个按钮与屏幕右侧对齐。 （X）

| 图标+文字| X |

使用LinearLayout，我可以将其与视图居中，但是右侧的按钮将其向左移动。

使用相对布局，我可以实现所需的功能，但是如果文本太长，则按钮会与文本重叠。

什么是正确的方法？ 我以前没有使用constraintLayout，会解决吗？

Answer 1

您可以这样设置

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.2"
        android:drawableLeft="@mipmap/ic_launcher"
        android:text="Click" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.8"
        android:gravity="center"
        android:text="TextView" />
</LinearLayout>

Answer 2

只需使用相对布局即可。 将您的Textview居中，然后在按钮上放入toRightOf = txtViewsName。

//已更新DP中的强制宽度，以确保文本始终居中且永不重叠。

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/ic_launcher"
        android:maxWidth="230dp"
        android:layout_centerHorizontal="true"
        android:ellipsize="end"
        android:text="My text to show test abcdefghyijkldkf here" />

    <Button
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Button" />

</RelativeLayout>

您将需要调整按钮的宽度和textview的最大宽度以匹配您的设计，并在预览时确认所有分辨率，但是在这种情况下dp应该可以很好地覆盖您。

注意*这只是回答您的问题，但不会做任何有趣的行为，即，如果文本变得太多，请忽略居中命令并开始向左移动，但这不会做。 如果这是您的愿望，请更新您的问题。

//在左视图中居中放置文本，并使用权重确保文本区域占据适当的空间百分比（根据您的注释而不是您要查找的布局，但是我会保留它，以防其他人使用）。

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="10">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="7"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="My text to show here" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button" />

</LinearLayout>

Answer 3

我建议您使用约束布局，

例：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".YourActivity">

    <TextView
        android:id="@+id/my_text_view"
        android:text="My Long Text That must not overlap the button"
        android:layout_width="0dp"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/my_btn"
        app:layout_constraintTop_toTopOf="@+id/my_btn"
        app:layout_constraintBottom_toBottomOf="@+id/my_btn"/>

    <Button
        android:id="@+id/my_btn"
        android:layout_marginTop="16dp"
        android:text="My Nice Button "
        android:layout_marginEnd="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/my_text_view"
        app:layout_constraintEnd_toEndOf="parent"/>


</android.support.constraint.ConstraintLayout>

示例输出：

Answer 4

对于最佳实践，我认为ConstraintLayout是设计的最佳解决方案，是的，它当然可以为您寻找的东西提供帮助。
有关更多信息，请检查此使用ConstraintLayout和ConstraintLayout 构建响应式UI 。

Answer 5

由于右侧的ImageButton具有固定的宽度（就本示例40dp ，假设为40dp ），您可以通过在TextView的末尾添加相同宽度的边距来确保它们不重叠，从而获得所需的结果。 为了使TextView在屏幕上居中，还必须在开始时添加相同的边距：

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

    <TextView
        android:id="@+id/textview"
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

如果要在TextView中将文本居中，请使用android:gravity="center" ：

如果ImageButton's宽度为wrap_content则此方法将行不通，因为无法将TextView的末尾约束到父级的末尾（因此它在屏幕上居中）和ImageButton的开始（因此如果文本变长，它们不会同时重叠）。

Answer 6

最后，我根据Sam的建议使用了RelativeLayout，并在TextView上设置了maxWidth和margin。