如何在 Android 的材料设计列表上制作圆形列表图标？

Question

我正在尝试制作一个类似于 Material Design Guidelines 中的列表的列表。谷歌似乎在所有地方都使用这些圆形图标。我想使用一个带有材料设计图标的彩色圆圈。非常像这张图片：来自指南页面。

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

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 有正确的答案，但我做了一些更改并想发布我的代码以防万一它在未来有所帮助。由于我使用的是 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>

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

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