1

PNG アイコンを含む円形のドローアブルを作成しました。Android マテリアル ガイドラインに従って、円の直径は 40 dp、アイコンは 24 dp です。最初は、内部アイコン項目が 24 dp のままであると想定していたため、左、右、上、下の値を設定しませんでした。ただし、リサイズします。次に、幅と高さのプロパティを使用して 24 dp に強制しようとしましたが、AS のプレビューでは機能しているように見えましたが、タブレットには影響しませんでした。最後に、図のように上、下、左、右の値を設定します。私は 8dp を (40-24)/2 = 8 として使用します。

問題は、円内のアイコンがリサイズされたかのようにぼやけて見えることですが、これを処理する方法について途方に暮れています。アイコンを円の中に配置するもっと良い方法があるかもしれません。結局のところ、これは非常に一般的な設計手法です。

比較のために、添付の画像の円の横に実際のアイコンを配置しましたが、残念ながら画像が圧縮されているため、明瞭さの違いを見分けるのは困難ですが、右の画像はベクトルのように見えます。 FABに1つ。

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>

フラグメント.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" />

ここに画像の説明を入力

4

2 に答える 2