¿Es posible rotar un dibujable en la descripción xml?


102

Estoy creando una aplicación, con recursos que se pueden reutilizar (porque los botones son siempre los mismos, pero reflejados o rotados). Quiero usar el mismo recurso para no tener que agregar 3 recursos más que son exactamente como el original pero rotados. Pero tampoco quiero mezclar el código con cosas que se pueden declarar en el XML o hacer transformaciones con una matriz que costará tiempo de procesamiento.

Tengo un botón de dos estados declarado en un XML.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/and_card_details_button_down_left_onclick" /> <!-- pressed -->
    <item android:drawable="@drawable/and_card_details_button_down_left" /> <!-- default -->
</selector>

y quiero reutilizar el dibujable porque será el mismo pero girado 90º y 45º y le asigno al botón como dibujable.

<Button android:id="@+id/Details_Buttons_Top_Left_Button"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/details_menu_large_button" />

Sé que puedo rotarlo con a RotateDrawableo con a, Matrixpero como ya expliqué, no me gusta ese enfoque.

¿Es posible lograrlo directamente en XML o cuál crees que será la mejor manera de hacerlo? ¿Poner todos los recursos pero rotados, rotarlos en el código?

--- EDITAR --- La respuesta de @dmaxi funciona muy bien, así es como se combina con una lista de elementos :)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <rotate 
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:drawable="@drawable/and_card_details_button_up_onclick"/>
    </item>

    <item>
        <rotate
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:drawable="@drawable/and_card_details_button_up_onclick"/>
    </item>

</selector>

4
No hay necesidad de disculparse, tu inglés está bien. ¡Y bienvenido a SO!
PeeHaa

busque el mismo problema en este hilo stackoverflow.com/questions/14727426/ ... ¡ cualquier sugerencia sería genial!
sukarno

Los elementos de diseño basados ​​en vectores simplifican enormemente las cosas (respuesta a continuación).
samis

Respuestas:


136

Podría rotar en XML:

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

El fromDegreeses importante.

Básicamente, se trata de una animación de rotación definida en XML. Con fromDegreesusted define el estado inicial girado. El toDegreeses un estado de giro final del dibujable en la secuencia de animación, pero puede ser cualquier cosa si usted no desea utilizar la animación.

No creo que asigne recursos para la animación, ya que no tiene que cargarse como animación. Como dibujable, se representa como su estado inicial y debe colocarse en la drawablecarpeta de recursos. Para usarlo como una animación, debe ponerlo en animla carpeta de recursos y puede iniciar la animación de esta manera (solo un ejemplo):

Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotation);
rotation.setRepeatCount(Animation.INFINITE);
myView.startAnimation(rotation);

1
¡Gracias eso es perfecto! combiné eso con el artículo y es exactamente lo que necesito, quiero publicar el código, no sé si es mejor editar tu respuesta o mi pregunta ... Y para reflejar la imagen, tengo que jugar con pivot x & y?
Goofyahead

Bueno, estoy feliz de poder ayudar, edite la respuesta si lo desea. pivotX y pivotY definen el punto central de la rotación. Para la duplicación, no tengo idea porque este XML solo puede definir la rotación 2D.
dmaxi

1
@dmaxi Esto es rotar el dibujable a través de una animación de rotación, ¿no? ¿No sería algo ineficiente?
starkej2

Hice esto pero de 0 a 360 grados porque quiero una rotación completa, el problema es que en pantallas pequeñas gira deformado, ¿alguna pista?
trampa de fuego

1
Hubo un error en Android M que afectaba a este
dibujable giratorio

34

Podría rotar la flecha izquierda hacia la derecha en XML como:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="180"
    android:toDegrees="0"
    android:drawable="@drawable/left">
</rotate>

Imagen adjunta para referencia.

ingrese la descripción de la imagen aquí


Estoy haciendo esto pero no puedo configurar el fondo para diseñar alguna idea?
Mateen Chaudhry

18

Si se utilizan elementos de diseño basados ​​en vectores, junto con una lista de estado de ImageView , estilo y color, su botón se puede refactorizar de la siguiente manera:

Nota: los elementos de diseño vectoriales son significativamente más pequeños que las imágenes, por lo que las definiciones adicionales y explícitas no implican mucha sobrecarga y generan un código claro y explícito (aunque he leído que se debe evitar la modificación manual de los elementos vectoriales, prefiero tratar con la sobrecarga de actualizar un par de archivos que tener transformaciones en uno):

Nota: Android Studio es una excelente fuente de recursos vectoriales.

res \ valores \ estilos.xml

<!--ImageView-->
<style name="Details_Buttons_Top_Left_Button">
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">match_parent</item>    
  <item name="android:tint">@color/button_csl</item>    
</style>

res \ color \ button_csl.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  <item android:state_enabled="false" android:color="@color/grey_disabled"/>
  <item android:state_pressed="true" android:color="@color/orange_hilite"/>
  <item android:color="@color/black"/>  
</selector>

details_menu_large_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true"
        android:drawable="@drawable/and_card_details_button_down_left_onclick" /> <!-- pressed -->
  <item android:drawable="@drawable/and_card_details_button_down_left" /> <!-- default -->
</selector>

Details_Buttons_Top_Left_Button

<ImageView android:id="@+id/Details_Buttons_Top_Left_Button"
           style="@style/Details_Buttons_Top_Left_Button"
           android:src="@drawable/details_menu_large_button" />

and_card_details_button_down_left.xml (ic_play_arrow_black_24dp.xml)

<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="#FF000000"
        android:pathData="M8,5v14l11,-7z"/>

</vector>

and_card_details_button_down_left_onclick.xml (ic_play_arrow_black_24dp.xml modificado)

<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:name="rotationGroup"
         android:pivotX="12"
         android:pivotY="12"
         android:rotation="90" >
    <path
          android:fillColor="#FF000000"
          android:pathData="M8,5v14l11,-7z"/>
  </group>
</vector>

3
Respuesta agradable para el rotationGroupatributo, se gira el vector muy bien
blueware

0

Si desea rotationDisponibles en xmlarchivo y simple extensión android:rotation="180"deImageView

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_dropdown"
    android:rotation="180"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.