约束布局未对齐textview

时间:2018-07-22 03:55:14

标签: android android-constraintlayout

我正在使用约束布局在屏幕的每个角对齐我的textview,但看起来好像不起作用。屏幕右侧尺寸的文本将根据左侧尺寸的文本长度对齐。看看附件图片。右侧的文本未正确对齐。由于某些原因,这里还有一些空间。该如何解决?

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:maxLines="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black"
        android:text="@string/payout_label"
        app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="-50dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_income"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black"
        android:text="Salary"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/green"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/category"
        app:layout_constraintTop_toTopOf="@+id/income_icon" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="-5dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/grey"
        android:text="Monthly"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@color/grey"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/frequency" />
</android.support.constraint.ConstraintLayout>

4 个答案:

答案 0 :(得分:1)

如果您要对金额进行右对齐和对齐,则不需要以下两行XML:

            var connstr = db.Database.Connection.ConnectionString;
            SqlConnection connection;
            connection = new SqlConnection(connstr);
            connection.Open();
            SqlDataAdapter adapter = null;
            DataTable tab = new DataTable();

            adapter = new SqlDataAdapter("select Query from [Drag-Drop] where [User_ID] = '" + UserID + "' order by Clock desc", connection);
            adapter.Fill(tab);
            string DQuery = tab.Rows[0][0].ToString();

因此,只需删除它们即可提供以下内容:

    app:layout_constraintHorizontal_bias="0.91"
    app:layout_constraintStart_toEndOf="@+id/category"

如果您需要在<TextView android:id="@+id/income_amount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="$0.00" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="@color/green" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/income_icon" /> 右边添加空白,请添加:

16dp

答案 1 :(得分:0)

我已将状态TextView调整为TextView的数量,并从右至状态TextView给出了8 dp的值,以使其与TextView的数量对齐。下面是它的代码。

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:maxLines="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/black"
        android:text="payout_label"
        app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="-50dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        android:layout_marginLeft="8dp" />

    <TextView
        android:id="@+id/category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/black"
        android:text="Salary"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="16dp" />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/holo_green_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.91"
        app:layout_constraintStart_toEndOf="@+id/category"
        app:layout_constraintTop_toTopOf="@+id/income_icon" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="-5dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@android:color/darker_gray"
        android:text="Monthly"
        app:layout_constraintStart_toEndOf="@+id/income_icon"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="16dp" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="@+id/income_icon"
        app:layout_constraintEnd_toEndOf="@+id/income_amount"
        app:layout_constraintStart_toStartOf="@+id/income_amount" />
</android.support.constraint.ConstraintLayout> 

希望有帮助!!!!

答案 2 :(得分:0)

如下所示设计布局。

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:padding="@dimen/_5sdp">


    <TextView
        android:id="@+id/payout_date"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_5sdp"
        android:maxLines="1"
        android:text="payout_label"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:id="@+id/income_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="@dimen/_5sdp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_inbox_active"
        app:layout_constraintLeft_toLeftOf="@+id/payout_date"
        app:layout_constraintTop_toBottomOf="@+id/payout_date"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="30dp" />

    <TextView
        android:id="@+id/category"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Salary"
        android:layout_marginRight="@dimen/_5sdp"
        android:layout_marginStart="@dimen/_5sdp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintLeft_toRightOf="@+id/income_icon"
        app:layout_constraintRight_toLeftOf="@+id/income_amount"
        app:layout_constraintTop_toTopOf="@+id/income_icon"
        tools:layout_editor_absoluteX="61dp"
        tools:layout_editor_absoluteY="34dp" />

    <TextView
        android:id="@+id/income_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/color_black"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/payout_date"
        tools:layout_editor_absoluteX="344dp"
        tools:layout_editor_absoluteY="30dp" />

    <TextView
        android:id="@+id/frequency"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Monthly"
        app:layout_constraintLeft_toLeftOf="@+id/category"
        app:layout_constraintTop_toBottomOf="@+id/category"
        app:layout_constraintRight_toLeftOf="@+id/status"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/color_black"
        tools:layout_editor_absoluteX="61dp"
        tools:layout_editor_absoluteY="59dp" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pending"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:textColor="@color/color_black"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/income_amount" />
</android.support.constraint.ConstraintLayout>

enter image description here

答案 3 :(得分:0)

您的错误是这些-您必须删除这些错误

  • 此行的收入金额

    app:layout_constraintStart_toEndOf="@+id/category"
    
  • 此行的状态

    app:layout_constraintStart_toEndOf="@+id/frequency"
    

这是正确的设计

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">


  <TextView
    android:id="@+id/payout_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    android:maxLines="1"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black"
    android:text="payout_label"
    app:layout_constraintBottom_toTopOf="@+id/income_icon"/>


  <ImageView
    android:id="@+id/income_icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_marginTop="30dp"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="-50dp"
    android:padding="1dp"
    android:scaleType="centerCrop"
    android:src="@drawable/leak_canary_icon"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintVertical_chainStyle="packed" />

  <TextView
    android:id="@+id/category"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="8dp"
    android:text="Salary"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black"
    app:layout_constraintEnd_toStartOf="@+id/income_amount"
    app:layout_constraintStart_toEndOf="@+id/income_icon"
    app:layout_constraintTop_toTopOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/income_amount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="$0.00"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/frequency"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="8dp"
    android:text="Monthly"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="@color/grey"
    app:layout_constraintBottom_toBottomOf="@+id/income_icon"
    app:layout_constraintEnd_toStartOf="@+id/status"
    app:layout_constraintStart_toEndOf="@+id/income_icon"/>

  <TextView
    android:id="@+id/status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="Pending"
    android:textAppearance="@style/TextAppearance.AppCompat.Body2"
    android:textColor="@color/grey"
    app:layout_constraintBottom_toBottomOf="@+id/income_icon"
    app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>