Question

我正在尝试制作一个类似于“材料设计指南”中列表的列表。谷歌在整个地方使用这些圆形图标。我想使用带有材料设计图标的彩色圆圈。非常类似于此图片：指南页面中的。

我是否需要创建一个圆形绘图然后只在其上面设置图标，所以我有两个重叠的视图？我觉得必须有比每个图标使用两个视图更好的解决方案。

Answer 1

制作自定义circle 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>

以编程方式更改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);
...

如何在Android中的材料设计列表中创建圆形列表图标？

3 个答案: