在圆形图标，图像模糊 [英] Icon image in circle shape is blurry

问题描述

我已经创建了一个包含PNG图标圆形可绘制。根据Android的材料管理准则圆的直径为40dp和图标24dp。起初我没有，因为我认为内部图标项会留24dp为左，右，顶部和底部设置的任何值。但是，它会调整。然后，我用width和height属性，迫使它24dp，从而出现了在AS的preVIEW工作，但对平板电脑没有影响审判。最后，我设置上，下，左，右的值，如图所示。我用8DP为：（40-24）/ 2 = 8。

I have created circle shape drawables that contain png icons. As per the Android Material guidelines the diameter of the circle is 40dp and the icon is 24dp. Initially I did not set any values for left, right, top and bottom as I assumed the internal icon item would stay 24dp. However, it resizes. I then tried using width and height properties to force it to 24dp, which appeared to work in the preview in AS but had no effect on the tablet. Finally I set the values of top, bottom, left and right as shown. I use 8dp as: (40-24)/2 = 8.

问题是因为虽然它是调整圈子里的图标会出现模糊，但我在一个不知如何处理这个问题。或许有更好的方式来放置一个圈内的图标。这毕竟是一个非常普遍的设计实践。

The issue is that the icon inside the circle appears blurry as though it was resized but I'm at a loss as to how to handle this. Perhaps there is a better way to place an icon inside a circle. It's a very common design practice after all.

我已经放在实际的图标旁边的圆圈附加图像进行比较，但遗憾的是，由于图像融为一体pression这是很难说的清楚的区别，但相信我的话它的右边的图像貌似一样的人在FAB的向量。

I've placed the actual icon next to the circle in the attached image for comparison but unfortunately due to image compression it's hard to tell the difference in clarity but take my word for it that the image on the right looks like a vector as does the one in the FAB.

circle_grid.xml

circle_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <solid
                android:color="@color/colorPrimary"/>

            <size
                android:width="40dp"
                android:height="40dp"/>
        </shape>
    </item>
    <item android:drawable="@drawable/ic_grid_on_white_24dp"
        android:top="8dp"
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:gravity="center"/>
</layer-list>

fragment.xml之

fragment.xml

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/screen_edge_margin"
            android:layout_marginStart="@dimen/screen_edge_margin"
            android:src="@drawable/circle_grid" />

推荐答案

<一个href=\"http://www.sweet-web-design.com/word$p$pss/android-tricks-drawable-objects-or-how-to-draw-a-circle/2874/\" rel=\"nofollow\">http://www.sweet-web-design.com/word$p$pss/android-tricks-drawable-objects-or-how-to-draw-a-circle/2874/

这工作没有什么曾被导致图像重规模和像素化。

This works without what ever was causing the image to re-scale and pixelate.

这篇关于在圆形图标，图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！