#iOS | #Android Fashion News

たくさんの画像リソースが公開されています.

【使える! 即保存】 github で公開されている Material design icons 一覧

どれもいいかんじです.

で, これ一覧で好きなアイコンを選んだあと,

zipをダウンロード/展開したあとどれを使ったらいいのか.

たとえば, 一覧で「error」アイコンを使おうとすると

こんなにある.

./alert/drawable-hdpi/ic_error_black_18dp.png
./alert/drawable-hdpi/ic_error_black_24dp.png
./alert/drawable-hdpi/ic_error_black_36dp.png
./alert/drawable-hdpi/ic_error_black_48dp.png
./alert/drawable-hdpi/ic_error_grey600_18dp.png
...(略)...
./alert/drawable-xxxhdpi/ic_error_red_48dp.png
./alert/drawable-xxxhdpi/ic_error_white_18dp.png
./alert/drawable-xxxhdpi/ic_error_white_24dp.png
./alert/drawable-xxxhdpi/ic_error_white_36dp.png
./alert/drawable-xxxhdpi/ic_error_white_48dp.png

ディレクトリの構造はこんなかんじになってる.

material-design-icons-master
├── action
│   ├── drawable-hdpi
│   │   ├── ic_error_red_18dp.png
│   │   ├── ic_error_red_24dp.png
│   │   ├── ic_error_red_36dp.png
│   │   ├── ic_error_red_48dp.png
│   ├── drawable-mdpi
│   ├── drawable-xhdpi
│   ├── drawable-xxhdpi
│   ├── drawable-xxxhdpi

アイコンファイルを選択する他に

いくつか決めなければならないことがあったりします.

・dpi
・color
・dip

「色」は見て決めれるけども...

以下を見ながら, dip(サイズ/スケール) と

対象ファイル, 新しいファイル名を決める.

Iconography | Android Developers

細かくいろいろ区別できるのだろうけど,

Android Studioのプロジェクトデフォルトdpiの構成に

drawableディレクトリはとりあえず合わせよう.

res
├── drawable-hdpi
│   └── ic_error.png
├── drawable-mdpi
│   └── ic_error.png
├── drawable-xhdpi
│   └── ic_error.png
├── drawable-xxhdpi
│   └── ic_error.png

などとシコシコ手動でやってみたがめんどうなので

zip の展開後のディレクトリ構成とファイル名を

あらかじめ変更しておけば, フォルダごと上書きできそうなので

一括でスクリプトで以下に変更しておく.

{category}/drawable-{dpi}/ic_{name}_{color}_{dip}.png
↓
{category}/{name}/{color}/{dip}/drawable-{dpi}/ic_{name}.png

<?php
/**
 Restructure dirs/files tree.
 
https://github.com/google/material-design-icons
 
Usage:
 
$ curl -LO https://github.com/google/material-design-icons/archive/master.zip
$ unzip material-design-icons-master.zip
$ ls
... material-design-icons-master ... 
$ php restructure.php
 
{category}/drawable-{dpi}/ic_{name}_{color}_{dip}.png
-> {category}/{name}/{color}/{dip}/drawable-{dpi}/ic_{name}.png
 
 
~/material-design-icons-master_new $ tree . 
.
├── action
│   ├── 3d_rotation
│   │   ├── black
│   │   │   ├── 18dp
│   │   │   │   ├── drawable-hdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-mdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-xhdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-xxhdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   └── drawable-xxxhdpi
│   │   │   │       └── ic_3d_rotation.png
│   │   │   ├── 24dp
│   │   │   │   ├── drawable-hdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-mdpi
│   │   │   │   │   └── ic_3d_rotation.png
...
*/
 
foreach (glob('material-design-icons-master/*/*/*.png') as $file) {
  if (is_file($file) && preg_match('@/drawable@', $file)) {
    $path_parts = pathinfo($file);
    $filename = $path_parts['filename'];
    $dirs = explode('/', $path_parts['dirname']);
    $category   = $dirs[1];
    $dip        = substr($filename, strrpos($filename, '_') + 1);
    $dpi        = substr($dirs[2], strpos($dirs[2], '-') + 1);
    $filename   = substr($filename, 0, strpos($filename, '_' . $dip));
    $name_color = substr($filename, strpos($filename, '_') + 1);
    $color      = substr($name_color, strrpos($name_color, '_') + 1);
    $name       = substr($name_color, 0, strpos($name_color, '_' . $color));
    $path = sprintf('%s_new/%s/%s/%s/%s/drawable-%s/ic_%s.png',
                    $dirs[0], $category, $name, $color, $dip, $dpi, $name);
    mkdir(dirname($path), 0777, true);
    copy($file, $path);
    echo $file . "\n";
    echo '-> ' . $path . "\n";
  }
}

ディレクトリ構成を変更 - gist

構成変更後はこんなかんじに.

~/material-design-icons-master_new $ tree . 
.
├── action
│   ├── 3d_rotation
│   │   ├── black
│   │   │   ├── 18dp
│   │   │   │   ├── drawable-hdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-mdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-xhdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-xxhdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   └── drawable-xxxhdpi
│   │   │   │       └── ic_3d_rotation.png
│   │   │   ├── 24dp
│   │   │   │   ├── drawable-hdpi
│   │   │   │   │   └── ic_3d_rotation.png
│   │   │   │   ├── drawable-mdpi
│   │   │   │   │   └── ic_3d_rotation.png
...

こうしておけば,

使いたいアイコンの色, 利用場所(dip) を考えながら,

GUI上でディレクトリごと上書きで,

IDE上の res ディレクトリ以下にコピーすればよい.

よくみると, IDE側の drawable-*** のディレクトリ名は微妙に違ってたりするが(笑)