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

Question

我想要那个 CardView，在圆圈中包含名字和名字的第一个字母。就像我们 phone.

上的联系人一样

Answer 1

您可以：

创建一个自定义视图，中间有一个圆形和一个 TextView，然后把字母放上去

或

使用 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 2

没有任何未知的库，只有 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 中的主题应该是 material 主题。例如：

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

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

您可以只使用 Material 组件库：

<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).

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

How to make this CardView with a circle containing a letter

html

android

xmi

android-layout

android-shapedrawable