如何在约束布局周围创建边框以及标题选项

Question

我需要实现如下样式

但是，我有一个约束布局，里面有很多子布局，它类似于编辑文本视图，具有通过锁定编辑其他值来编辑特定值集的功能。

现在我知道如何使用以下代码在约束布局周围设置边框

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />
    <stroke
        android:width="1dp"
        android:color="#6B000000" />

    <corners android:radius="4dp" />
</shape>

但是，我不知道如何像上图那样设置标题。

我试过像下面这样用负值 margin/padding 放置 textview，但是没有用

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:fontFamily="sans-serif"
            android:text="@string/title"
            android:textColor="@color/logoDark"
            android:textCursorDrawable="@drawable/cursor_style"
            android:textSize="12sp"
            android:paddingTop="-20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

Answer 1

听起来你的 TextView 在你想要加框的 ConstraintLayout 里面，它应该在外面。这样你就可以覆盖 ConstraintLayout。有点像这样

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
   android:background="@android:color/white">

       <androidx.constraintlayout.widget.ConstraintLayout
          android:id="@+id/framed_layout"
          android:layout_width="200dp"
          android:layout_height="100dp"
          android:background="@drawable/outside_shape"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent">

          ....
          ....
          ....

       </androidx.constraintlayout.widget.ConstraintLayout>

       <TextView
         android:layout_width="30dp"
         android:layout_height="wrap_content"
         android:background="@android:color/white"
         android:textAlignment="center"
         android:text="title"
         app:layout_constraintBottom_toTopOf="@+id/framed_layout"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="@+id/framed_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

或者用 CoordinatorLayout 包装它，看起来一样

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@android:color/white">

   <androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/framed_layout"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/outside_shape">

    ....
    ....
    ....
    
   </androidx.constraintlayout.widget.ConstraintLayout>

   <TextView
    android:layout_width="30dp"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:textAlignment="center"
    android:layout_gravity="center_horizontal"
    android:text="title" />

   </androidx.coordinatorlayout.widget.CoordinatorLayout>

outside_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" >
     <corners
       android:radius="10dp"
     />
     <solid
       android:color="@android:color/white"
     />
     <stroke
       android:width="1dp"
       android:color="@android:color/black"
     />
     </shape>

和outside_shape看起来像这样

Answer 2

以上所有答案都集中在创建新布局上。但你不应该那样做。只需在约束布局下方创建一个 TextView。

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif"
        android:text="@string/time_range"
        android:textColor="@color/logoDark"
        android:textCursorDrawable="@drawable/cursor_style"

        // Below are very important to achieve title on border 
        android:paddingStart="2dp" 
        android:paddingEnd="2dp" 
        android:layout_marginStart="10dp" 
        android:background="@color/cnstrbkg" 
        app:layout_constraintBottom_toTopOf="@+id/cnstLyt" 
        app:layout_constraintStart_toStartOf="@+id/cnstLyt" 
        app:layout_constraintTop_toTopOf="@+id/cnstLyt" />

textview的定位是非常非常重要的事情。更改它以将文本视图移动到您想要的任何位置。

如何在约束布局周围创建边框以及标题选项

how to create a border around constraint layout along with an option for title

android

android-styles