如何在 Android 中的 material 设计列表中制作循环列表图标？

Question

我正在尝试制作一个类似于 Material 设计指南中的列表的列表。 Google 似乎到处都使用这些圆形图标。我想使用带有 material 设计图标的彩色圆圈。与这张图片非常相似：来自指南页面。

我是否需要创建一个可绘制的圆形，然后只在其上设置图标，这样我就有两个重叠的视图？我觉得一定有比为每个图标使用两个视图更好的解决方案。

Answer 1

自定义 circle drawable:

..drawable/circle_drawable.xml

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

    <corners
        android:radius="100dip"/>
    <solid
        android:color="#ff4CAF50" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:left="6dip"
        android:right="6dip"
        android:top="5dip"
        android:bottom="5dip" />
</shape>

要在 Activity 上以编程方式更改 circle_drawable color：

  String hexColor = String.format("#%06X", (0xFFFFFF & intColor));

  Drawable drawable = ContextCompat.getDrawable(MyActivity.this, R.drawable.circle_drawable);
  drawable.setColorFilter(intColor, PorterDuff.Mode.SRC_ATOP);

  layoutWithCircleDrawable.setBackground(drawable);

然后现在在您的布局上，您必须使用新的 circle_drawable.xml 分配新背景，然后只需在其顶部设置图标。

布局

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

      <FrameLayout
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:id="@+id/layoutWithCircleDrawable"
            android:layout_gravity="center_vertical"
            android:background="@drawable/circle_drawable">

                    <ImageView
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:id="@+id/imageView36"
                          android:src="@drawable/ic_folder"/>
       </FrameLayout>

Answer 2

要创建可绘制的圆形，您可以使用此库 https://github.com/hdodenhof/CircleImageView 这是非常好的实现。

将其添加到布局文件

<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>

以及 gradle 依赖项

dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}

对于您可以使用 picasso 库的图像

Answer 3

Aspicas 的答案是正确的，但我做了一些更改并想 post 我的代码，以防将来有帮助。由于我使用的是 C# (Xamarin.Android)，所以有些方法看起来有些不同。

我的可绘制圆圈：

    <?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <solid
      android:color="#33464d"/>
</shape>

我的完整列表项布局。我为图标使用矢量，所以我必须使用 AppCompatImageView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/routines_rv_item"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:orientation="horizontal">

  <FrameLayout
      android:id="@+id/icon_frame"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_gravity="top"
      android:layout_margin="16dp"
      android:background="@drawable/circle_drawable">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/list_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:scaleType="fitCenter"/>
  </FrameLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/rv_main_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingBottom="2dp"
        android:paddingRight="16dp"
        android:textColor="@color/primary_text_default_material_light"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/rv_secondary_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingRight="16dp"
        android:paddingTop="2dp"
        android:textColor="@color/secondary_text_default_material_light"
        android:textSize="14sp" />
  </LinearLayout>
</LinearLayout>

以及我的适配器中的相关代码，我在其中更改了颜色并设置了图标图像（注意：必须将 activity 上下文传递给适配器才能访问资源）：

...
var vh = (ViewHolder)holder;
var drawable = ContextCompat.GetDrawable(_context, Resource.Drawable.circle_drawable);
string colorStr = _context.Resources.GetString(Resource.Color.primary).Substring(3);

drawable.SetColorFilter(Color.ParseColor("#"+colorStr), PorterDuff.Mode.SrcAtop);
vh.IconFrame.Background = drawable;

vh.ListIcon.SetImageResource(Resource.Drawable.ic_book_white_24px);
...

如何在 Android 中的 material 设计列表中制作循环列表图标？

How can I make a circular list icon on a material design list in Android?

android

listview

icons

material-design

android-drawable