将材料设计图标导入 android 项目

Posted

技术标签:

【中文标题】将材料设计图标导入 android 项目【英文标题】:Import material design icons into an android project 【发布时间】:2015-04-25 10:11:19 【问题描述】:

有没有一种简单的方法可以将 Material Design 图标库的所有图标导入到一个 android 项目中,而无需手动操作?

【问题讨论】:

【参考方案1】:

看看Vector Asset Studio

按照以下步骤启动 Vector Asset Studio:

在 Android Studio 中,打开一个 Android 应用项目。 在“项目”窗口中,选择 Android 视图。 右键单击 res 文件夹并选择 New > Vector Asset。

打开Vector Asset Studio后,可以添加材质图标如下:

选择“材料图标”(通过单击剪贴画:ICON) 点击选择 选择材质图标

【讨论】:

这个答案太棒了!您不仅可以选择已经捆绑在 Android Studio 中的 Material Design 图标(无需任何其他插件),而且您将获得 VectorDrawable 和(等待它...):“如果您的最低 API 级别设置为 1在这些 API 级别中,Vector Asset Studio 还指示 Gradle 生成可绘制矢量的光栅图像以实现向后兼容性" 您甚至可以更改 xml 文件中的颜色,并且在构建期间将生成新的 png(在 app/build/generated/res/pngs/debug 中)。我喜欢! :-) 为这个答案点赞!如果选择“Material Icon”中没有出现您的图标,您可以从Material Icons下载,如果您选择SVG格式,请在Vector Asset中选择Local SVG File并生成图标的xml文件。如果选择PNG格式,右键res->new Image Asset->选择Image->在Path:选择大图(xxxhdpi),生成每个密度的png。 从 Android Studio 2.2 Preview 5 开始,Vector Asset Studio 中不再有“选择”按钮,但必须单击图标的小表示(在名称下方)。我花了一段时间才弄清楚…… 最近的矢量素材工作室有一个剪贴画类型而不是素材图标,点击下面的android图标来选择你的图标【参考方案2】:

在文件夹drawable > right click > new > vector asset,然后点击图标:

【讨论】:

【参考方案3】:

您可以将这个新插件用于 android studio Android Material Design Icon Generator Plugin 帮助您使用 Google 提供的这些材料图标: Google material-design-icons

【讨论】:

我已经安装了,但是如何使用呢? @gldraphael - 安装后选择“文件”-“新建”-“材料设计图标”。选择 48dp 的大小以确保每个生成的文件都具有标准的 48、72、96、144 和 192 像素高度/宽度。当然,如果需要,请选择较小的 dp 尺寸。 @MartynDavis 谢谢。不过我找到了。我最喜欢它的是我也可以选择颜色。【参考方案4】:

这是一个克隆材料设计图标的 github 存储库的脚本 在

https://github.com/google/material-design-icons

并创建所有文件的索引。它还按类别将 svg 文件复制到子目录。您可以以此为基础将您感兴趣的文件复制到您的项目中 - 只需根据自己的喜好修改 find 和 cp copy 语句。如果你例如需要特定大小的 png - 它们位于相邻目录中,然后您需要相应地修改查找和复制命令。

#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see http://***.com/questions/28684759/import-material-design-icons-into-an-android-project
tmp=/tmp/icons
index=$tmp/index.html
mkdir -p $tmp
cd $tmp
if [ ! -d material-design-icons ]
then
  git clone https://github.com/google/material-design-icons
fi
cat << EOF > $index
<html>
  <head>
    <head>
    <body>
      <h1>Google Material Design Icons</h1>
EOF
for icon in `find . -name *.svg | grep production | grep 48`
do
    svg=`basename $icon .svg`
    category=`echo $icon | cut -f3 -d '/'`
    echo $category $svg.svg
    mkdir -p $tmp/$category
    cp $icon $tmp/$category
    echo "    <img src='"$icon"' title='"$category $svg"' >" >> $index
done
cat << EOF >> $index
  </body>
</html>
EOF

【讨论】:

甜蜜的脚本。由于这是该 repo 的一种一次性用例,建议更改为 git clone --depth=1 以获得浅克隆。下载速度有点快。【参考方案5】:

我发现此链接对我很有帮助。

https://dev.materialdesignicons.com/getting-started/android

gradle 实现可用

dependencies 
    implementation 'net.steamcrafted:materialiconlib:1.1.5'

添加gradle依赖后,就可以这样创建菜单项了。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" <!-- important, you'll have to include this to use the custom xml attributes -->
    xmlns:tools="http://schemas.android.com/tools" >

    <!-- example of a menu item with an icon -->
    <item
        android:title="Disable Wifi"
        app:showAsAction="always"
        app:materialIcon="wifi_off" <!-- This sets the icon, HAS AUTOCOMPLETE ;) -->
        app:materialIconColor="#FE0000" <!-- Sets the icon color -->
    />

</menu>

【讨论】:

以上是关于将材料设计图标导入 android 项目的主要内容,如果未能解决你的问题,请参考以下文章

Android 5.0 材料设计风格的 KitKat 导航抽屉

vue怎么将ui设计的图标导入

如何更改材料设计导航抽屉中汉堡图标的颜色

如何在 vue 的故事书中显示材料设计图标

Vue-cli 3 - 材料设计图标安装

材料设计图标闪烁(FOUT?)