内含标题和文字的圆形视图 [英] Rounded view with title and text inside

问题描述

我该怎么做?看起来不错，我想使用类似的东西.

How can I make this? It looks nice and I'd like to use something like this.

顶部的行应与标题的末尾相对应

The lines at the top should correspond to the end of the title

推荐答案

实际上，这些视图类型大多是使用自定义视图来完成的.

Actually, these types of view are mostly done with custom views.

本教程对于自定义视图很有用

但是您可以作弊一点，在drawable文件夹中创建backgound.xml，然后粘贴代码:

But you can cheat a little bit, create backgound.xml inside the drawable folder, and paste the code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">

    <stroke android:color="@color/blue" android:width="4dp"/>
    <corners android:radius="10dp"/>
    <solid android:color="@color/white"/>
</shape>

然后为您的布局创建custom_background.xml，并粘贴以下代码

then create custom_background.xml for your layout, and paste the following code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <LinearLayout

            android:background="@drawable/background"

            android:layout_marginTop="15dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <TextView
                android:textSize="20sp"
                android:textAlignment="center"
                android:textColor="@color/blue"
                android:layout_gravity="center"
                android:text="Something"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </LinearLayout>
    <TextView
            android:padding="2dp"
            android:textColor="@color/blue"
            android:textSize="25sp"
            android:background="@color/white"
            android:layout_marginStart="50dp"
            android:text="Title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    />

</androidx.constraintlayout.widget.ConstraintLayout>

然后您将获得以下图片

注意

• 我正在使用androidX
• 您可以代替LinearLayout放置任何布局

• I am using androidX
• Instead of LinearLayout you can place any layout

这篇关于内含标题和文字的圆形视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！