Android：将矢量图像旋转90度

Question

Android：将矢量图像旋转90度

71

我有以下代码用于我的向量：

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

    android:viewportWidth="314.015"
    android:viewportHeight="314.015">
    <path
        android:fillColor="#FCD83500"
        android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>

并且输出结果是：

但我想要以下方向的图像：

我尝试过的方法：

在<rotate>之间添加了<vector>标签，但是它给出了警告，如此处不允许使用向量元素

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90">

    <vector 
        android:width="24dp"
        android:height="24dp"

        android:viewportWidth="314.015"
        android:viewportHeight="314.015">
        <path
            android:fillColor="#FCD83500"
            android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
    </vector>
</rotate>

我也尝试把 <bitmap> 标签放在 <rotate> 标签之间，如下所示：

<rotate>
   <bitmap ... />
</rotate>

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fromDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90">

    <bitmap app:srcCompat="@drawable/ic_round" />

</rotate>

但是它告诉我应该定义“src”属性，并且我不能使用矢量图像的src。

有没有解决方案可以在所有角度上使用这个（一个）图片？

注意：我想在<TextView> drawable中使用这张图片。

- Pratik Butani

我想使用同一个文件在不同的位置显示不同旋转状态，如何使用一个文件来显示不同的旋转状态。 - HAXM

5个回答

56

对我来说，在视图的中心使用pivot时效果最佳。请注意，我使用了视口的一半作为中心 - 而不是宽度/高度

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

    <group
        android:rotation="45"
        android:pivotY="12"
        android:pivotX="12"
        >
        <path
            android:fillColor="@android:color/white"
            android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
            />
    </group>

</vector>

- murt

3

这个答案对我有用，而不是被采纳的答案。非常感谢！ - Bhargav Thanki

多谢！它起作用了！ - Muhammad

比被接受的答案更整洁的方式。谢谢！ - dknchris

16

对于那些寻找第四种翻转方式的人，即将某物倒置，代码如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:viewportWidth="24.0"
  android:viewportHeight="24.0">
  <group
    android:translateY="24.0"
    android:scaleY="-1"
    android:rotation="0">
    <path
      android:fillColor="#FF000000"
      android:pathData="M1,21h4L5,9L1,9v12zM23,10c0,-1.1 -0.9,-2 -2,-2h-6.31l0.95,-4.57 0.03,-0.32c0,-0.41 -0.17,-0.79 -0.44,-1.06L14.17,1 7.59,7.59C7.22,7.95 7,8.45 7,9v10c0,1.1 0.9,2 2,2h9c0.83,0 1.54,-0.5 1.84,-1.22l3.02,-7.05c0.09,-0.23 0.14,-0.47 0.14,-0.73v-1.91l-0.01,-0.01L23,10z"/>
  </group>
</vector>

- Per Christian Henden

6

实际上你无法旋转vector.xml，因为它是通过pathData绘制的，除非你使用其他组合方式。

你可以将TextView和ImageView分开使用，像这样：

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="Set time"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

        <ImageButton
            android:id="@+id/close_dialog"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:rotation="45"
            android:src="@drawable/ic_close_black_24dp" />

    </LinearLayout>

- Yossi

不幸的是，这不是一个解决方案。这只是一个技巧，它会增加我的代码行数。 - Pratik Butani

5

如果您想要像镜像一样旋转，请添加android:scaleY="-1"，android:translateY。

<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:width="24dp"
 android:height="24dp"
 android:viewportWidth="24"
 android:viewportHeight="24">
  <group
    android:scaleY="-1"
    android:translateY="24.0">
    <path
        android:fillColor="@android:color/transparent"
        android:pathData="M12 2L2 12L12 22"
        android:strokeWidth="2.5"
        android:strokeColor="#ffffff"
        android:strokeLineCap="round" />
 </group>
</vector>

- Suhad Bin Zubair

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeevashankar · Accepted Answer

尝试这种方式，我已经在矢量可绘文件中的图像路径数据外使用了组标签。

第一种类型：

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

android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateX="314.015"
    android:rotation="90">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />

</group>
</vector>

第二种类型：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateX="314"
    android:scaleX="-1"
android:rotation="0">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>

第三种类型：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateY="314.015"
    android:rotation="270">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>