horizontale Linie mit Text in der Mitte mit ConstraintLayout

Question

Ich versuche, das gleiche Ergebnis wie in zu erreichen: Android : horizontal line with text in middle

aber mit ConstraintLayout.

Egal was ich versuchte, kann ich den Text und die 2 Ansichten nicht vertikal ausgerichtet werden.

Ich bin nicht sicher, ob es ist, weil ich nicht eine bestimmte Breite zu den Teileransichten festlegen, aber ich sehe keine andere Möglichkeit, die Ansichten den gesamten freien Speicherplatz einnehmen zu lassen.

Hier ist mein Test-Layout Beispiel:

<?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="match_parent"> 

    <View 
     android:id="@+id/right_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toStartOf="@+id/text" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/button5" 
     app:layout_constraintVertical_bias="0.975"/> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toStartOf="@+id/left_divider" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/right_divider" 
     app:layout_constraintTop_toBottomOf="@+id/button5"/> 

    <View 
     android:id="@+id/left_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/text" 
     app:layout_constraintTop_toBottomOf="@+id/button5" 
     app:layout_constraintVertical_bias="0.946"/> 

    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 
</android.support.constraint.ConstraintLayout>" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 
</android.support.constraint.ConstraintLayout> 

Answer 1

Versuch unter Code

<?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="match_parent"> 

    <View 
     android:id="@+id/right_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:background="#000" 
     android:layout_marginBottom="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toStartOf="@+id/text" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/button5" 
     app:layout_constraintVertical_bias="0.975"/> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="50dp" 
     android:text="Button" 
     android:gravity="center" 
     app:layout_constraintEnd_toStartOf="@+id/left_divider" 
     app:layout_constraintStart_toEndOf="@+id/right_divider" 
     app:layout_constraintTop_toBottomOf="@+id/button5" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintLeft_toLeftOf="@+id/right_divider" 
     app:layout_constraintRight_toRightOf="@+id/left_divider"/> 

    <View 
     android:id="@+id/left_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_marginEnd="8dp" 
     android:background="#000" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toEndOf="@+id/text" 
     tools:layout_editor_absoluteY="112dp" 
     tools:layout_editor_absoluteX="243dp"/> 

    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 
</android.support.constraint.ConstraintLayout> 

Answer 2

versuchen Sie dies:

<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:id="@+id/gridLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <View 
     android:id="@+id/left_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toStartOf="@+id/text" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/text" /> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:gravity="center" 
     android:text="Hello" 
     app:layout_constraintEnd_toStartOf="@+id/right_divider" 
     app:layout_constraintStart_toEndOf="@+id/left_divider" 
     app:layout_constraintTop_toBottomOf="@+id/button5" /> 

    <View 
     android:id="@+id/right_divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toEndOf="@+id/text" 
     app:layout_constraintTop_toTopOf="@+id/text" /> 

    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

Answer 3

Sie können wie diese mit einzelnen Teiler Ansicht erreichen:

<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/divider" 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_marginStart="8dp" 
     android:background="@android:color/darker_gray" 
     app:layout_constraintBottom_toBottomOf="@+id/text" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/text" /> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:background="@android:color/white" 
     android:padding="5dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/button5" /> 


    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:text="Button" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 
</android.support.constraint.ConstraintLayout> 

Es Ausgänge: