如何在 Android 布局中创建或绘制带有文本的分隔线或分隔符?

huangapple go评论74阅读模式
英文:

How to Create or Drawing Separator/Divider Line with text in Layout android?

问题

如何在 Android 布局中创建带有文本的线条。
类似于

--------------------或者----------------
英文:

How to create a line with text in android in layout.
Like

--------------------OR----------------

答案1

得分: 1

  1. 使用 ConstraintLayout
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <View
        android:id="@+id/first_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/text"
        android:background="@color/white80"/>
    
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/first_divider"
        app:layout_constraintBottom_toBottomOf="@+id/first_divider"
        app:layout_constraintStart_toEndOf="@+id/first_divider"
        app:layout_constraintEnd_toStartOf="@+id/second_divider"
        android:textColor="@color/white80"
        android:text="OR"/>
    
    <View
        android:id="@+id/second_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/text"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@color/white80"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>
  1. 使用 LinearLayout
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:orientation="horizontal">
    
    <View
        android:id="@+id/first_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:background="@color/white80"/>
    
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white80"
        android:text="OR"/>
    
    <View
        android:id="@+id/second_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:background="@color/white80"/>
    
</LinearLayout>
  1. 使用 RelativeLayout
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:orientation="horizontal">
    
    <View
        android:id="@+id/first_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_toLeftOf="@+id/text"
        android:layout_centerVertical="true"
        android:background="@color/white80"/>
    
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="@color/white80"
        android:text="OR"/>
    
    <View
        android:id="@+id/second_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/text"
        android:background="@color/white80"/>
    
</RelativeLayout>

结果如下图所示

如何在 Android 布局中创建或绘制带有文本的分隔线或分隔符?

英文:

1.if you want to use constraint layout

&lt;androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;&gt;
        
        &lt;View
            android:id=&quot;@+id/first_divider&quot;
            android:layout_width=&quot;0dp&quot;
            android:layout_height=&quot;1dp&quot;
            app:layout_constraintStart_toStartOf=&quot;parent&quot;
            app:layout_constraintTop_toTopOf=&quot;parent&quot;
            app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
            app:layout_constraintEnd_toStartOf=&quot;@+id/text&quot;
            android:background=&quot;@color/white80&quot;/&gt;
        
        &lt;TextView
            android:id=&quot;@+id/text&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            app:layout_constraintTop_toTopOf=&quot;@+id/first_divider&quot;
            app:layout_constraintBottom_toBottomOf=&quot;@+id/first_divider&quot;
            app:layout_constraintStart_toEndOf=&quot;@+id/first_divider&quot;
            app:layout_constraintEnd_toStartOf=&quot;@+id/second_divider&quot;
            android:textColor=&quot;@color/white80&quot;
            android:text=&quot;OR&quot;/&gt;

        &lt;View
            android:id=&quot;@+id/second_divider&quot;
            android:layout_width=&quot;0dp&quot;
            android:layout_height=&quot;1dp&quot;
            app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
            app:layout_constraintStart_toEndOf=&quot;@+id/text&quot;
            app:layout_constraintTop_toTopOf=&quot;parent&quot;
            app:layout_constraintEnd_toEndOf=&quot;parent&quot;
            android:background=&quot;@color/white80&quot;/&gt;

    &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

2.if you want to use LinearLayout

 &lt;LinearLayout
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_marginTop=&quot;15dp&quot;
        android:orientation=&quot;horizontal&quot;&gt;

        &lt;View
            android:id=&quot;@+id/first_divider&quot;
            android:layout_width=&quot;0dp&quot;
            android:layout_height=&quot;1dp&quot;
            android:layout_weight=&quot;1&quot;
            android:layout_gravity=&quot;center_vertical&quot;
            android:background=&quot;@color/white80&quot;/&gt;

        &lt;TextView
            android:id=&quot;@+id/text&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:textColor=&quot;@color/white80&quot;
            android:text=&quot;OR&quot;/&gt;

        &lt;View
            android:id=&quot;@+id/second_divider&quot;
            android:layout_width=&quot;0dp&quot;
            android:layout_height=&quot;1dp&quot;
            android:layout_gravity=&quot;center_vertical&quot;
            android:layout_weight=&quot;1&quot;
            android:background=&quot;@color/white80&quot;/&gt;

    &lt;/LinearLayout&gt;

3.if you want using relative layout

&lt;RelativeLayout
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_marginTop=&quot;15dp&quot;
        android:orientation=&quot;horizontal&quot;&gt;

        &lt;View
            android:id=&quot;@+id/first_divider&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;1dp&quot;
            android:layout_toLeftOf=&quot;@+id/text&quot;
            android:layout_centerVertical=&quot;true&quot;
            android:background=&quot;@color/white80&quot;/&gt;

        &lt;TextView
            android:id=&quot;@+id/text&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_centerVertical=&quot;true&quot;
            android:layout_centerHorizontal=&quot;true&quot;
            android:textColor=&quot;@color/white80&quot;
            android:text=&quot;OR&quot;/&gt;

        &lt;View
            android:id=&quot;@+id/second_divider&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;1dp&quot;
            android:layout_centerVertical=&quot;true&quot;
            android:layout_toRightOf=&quot;@+id/text&quot;
            android:background=&quot;@color/white80&quot;/&gt;

    &lt;/RelativeLayout&gt;

Here the result :

如何在 Android 布局中创建或绘制带有文本的分隔线或分隔符?

huangapple
  • 本文由 发表于 2020年10月1日 17:03:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/64152170.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定