如何使用包含字母的圆圈制作此 CardView

Question

我想要CardView，包含名称和圆圈中名称的第一个字母。就像我们手机上的联系人一样。

Answer 1

您可以只使用材质组件库：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ..>

   <TextView
       android:id="@+id/textview"
       android:layout_width="64dp"
       android:layout_height="64dp"
       android:gravity="center"
       android:textSize="30sp"
       android:text="D"
       />

</androidx.cardview.widget.CardView>

然后在你的代码中你可以应用MaterialShapeDrawable:

    TextView textView = findViewById(R.id.textview);
    ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
            .toBuilder()
            .setAllCorners(new RoundedCornerTreatment()).setAllCornerSizes(new RelativeCornerSize(0.5f))
            .build();
    MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
    shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color....));
    ViewCompat.setBackground(textView,shapeDrawable);

RelativeCornerSize(0.5f) 应用大小=50% 的圆角。这样视图就变成了一个圆圈。

只是关于new RelativeCornerSize(0.5f) 的注释：它在1.2.0-beta01 中发生了变化。之前是new RelativeCornerSize(50)。

Answer 2

你可以：

1. 创建一个圆形的自定义视图，中间有一个TextView，然后放上字母

或

1. 使用MaterialLetterIcon 库。

MaterialLetterIcon icon = new MaterialLetterIcon.Builder(context) //
            .shapeColor(getResources().getColor(R.color.circle_color))
            .shapeType(SHAPE.CIRCLE)
            .letter("YOUR FIRST LETTER GOES HERE")
            .letterColor(getResources().getColor(R.color.letter_color))
            .letterSize(26)
            .lettersNumber(1)
            .letterTypeface(yourTypeface)
            .initials(false)
            .initialsNumber(2)
            .create();

或者这个TextDrawable库也

TextDrawable drawable1 = TextDrawable.builder()
                .buildRoundRect("YOUR LETTER GOES HERE", Color.RED, 10); // radius in px

TextDrawable drawable2 = TextDrawable.builder()
                .buildRound("YOUR LETTER GOES HERE", Color.RED);

Answer 3

使用 @Skizo-ozikS 建议的 MaterialLetterIcon：

添加实现：

implementation 'com.github.ivbaranov:materiallettericon:0.2.3'

在CardView 里面放：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <com.github.ivbaranov.mli.MaterialLetterIcon
        android:id="@+id/materialLetterIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:mli_letter="D"
        app:mli_shape_color="#01579B" />


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="2dp"
        android:text="debaish"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/materialLetterIcon"
        app:layout_constraintTop_toTopOf="@+id/materialLetterIcon" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginBottom="2dp"
        android:text="2 days ago"
        app:layout_constraintBottom_toBottomOf="@+id/materialLetterIcon"
        app:layout_constraintStart_toEndOf="@+id/materialLetterIcon" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果：

Answer 4

没有任何未知库，只有 android 库 --> ConstraintLayout 和 MaterialDesign：

implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta8"
implementation "com.google.android.material:material:1.3.0-alpha01"

布局代码：

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView 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="72dp"
        android:maxHeight="152dp">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <TextView
                android:id="@+id/two_line_list_item_icon"
                style="@style/TextAppearance.MaterialComponents.Subtitle1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginStart="@dimen/two_line_item_icon_margin_start"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/two_line_list_item_title"
                app:layout_constraintHorizontal_chainStyle="spread_inside"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:background="@drawable/shape_card_circle_icon_background"
                android:gravity="center"
                android:padding="@dimen/two_line_item_icon_padding"
                android:textAlignment="center"
                android:textColor="@color/white"
                tools:text="D"
                app:srcCompat="@drawable/ic_person_white" />
    
            <TextView
                android:id="@+id/two_line_list_item_title"
                style="@style/TextAppearance.MaterialComponents.Subtitle1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingStart="@dimen/two_line_item_icon_margin_start"
                android:paddingTop="@dimen/two_line_item_icon_margin_top"
                android:paddingEnd="@dimen/two_line_item_icon_margin_end"
                app:layout_constraintBottom_toTopOf="@id/two_line_list_item_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/two_line_list_item_icon"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="Prénom Nom Prénom Nom Prénom Prénom Nom Prénom Prénom Nom Prénom " />
    
            <TextView
                android:id="@+id/two_line_list_item_content"
                style="@style/TextAppearance.MaterialComponents.Body2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:paddingStart="@dimen/two_line_item_icon_margin_start"
                android:paddingEnd="@dimen/two_line_item_icon_margin_end"
                android:paddingBottom="@dimen/two_line_item_icon_margin_bottom"
                android:textColor="@color/textBlackMedium"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toEndOf="@+id/two_line_list_item_icon"
                app:layout_constraintTop_toBottomOf="@+id/two_line_list_item_title"
                tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.cardview.widget.CardView>

而@drawable/shape_card_circle_icon_background 是：

    <?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/grey" />
        <size android:width="24dp" android:height="24dp" />
    </shape>

如果您想使用预定义的“@style/TextAppearance.....”，您在 styles.xml 中的主题应该是一个材质主题。例如：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">