【问题标题】:Vector Drawable in the circle可在圆圈中绘制的矢量
【发布时间】:2018-08-29 16:22:22
【问题描述】:

有没有一种简单的方法可以从现有的矢量可绘制对象生成一个带有图标的圆形矢量绘制对象?

示例:

【问题讨论】:

  • 使用背景属性
  • 您希望如何使用该矢量可绘制对象?从 xml 布局文件?还是在运行时从 java 代码?
  • 我想通过生成准备使用的 VectorDrawable 来尽可能简单地解决它。没有代码或可绘制的修改。
  • 只需下载Inkscape 并学习基础知识。如果您不想要编程解决方案,那么这对于 Stack Overflow 来说是题外话。 :)

标签: android svg android-vectordrawable


【解决方案1】:

我会建议这样的事情:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:gravity="fill"
    android:drawable="@drawable/ic_brightness_1_black_24dp"

    />
    <item
        android:gravity="center"
        android:drawable="@drawable/ic_call_black_24dp"
        android:top="20dp"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        />

</layer-list>

id 为 ic_brightness_1_black_24dp 和 ic_call_black_24dp 的资源是导入的矢量图。

ic_brightness_1_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>

和 ic_call_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>

【讨论】:

  • 是的,这就是想法,但是,我想通过生成准备使用的 VectorDrawable 来尽可能简单地解决它。没有代码或可绘制的修改。
【解决方案2】:

其实很简单,你只需要将两条路径都包含在一个向量中,所以你的路径如下所示:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">

    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>

    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>

</vector>

结果显然取决于相对于彼此的路径的大小,因为在没有图形工具的情况下缩放它们很痛苦,DimDim's solutionlayer-list 更容易实现。

【讨论】:

    【解决方案3】:

    这样用,

    我自己尝试过,效果很好。它看起来像这样。

    对于 button_round:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-04-11
      • 2012-09-19
      • 1970-01-01
      • 2012-09-25
      • 2015-01-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多