2

布局示例

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

4

4 回答 4

1

您可以：

  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);
于 2020-07-29T13:48:17.770 回答
1

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

影响：

在此处输入图像描述

于 2020-07-29T14:25:25.040 回答
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);

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

在此处输入图像描述

只是一个说明new RelativeCornerSize(0.5f)：它改变了1.2.0-beta01。之前是new RelativeCornerSize(50)。

于 2020-07-29T17:12:12.433 回答
0

没有任何未知库，只有 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">
于 2020-07-29T14:02:56.280 回答