poniedziałek, 10 lutego 2014

Obracanie obrazków i innych komponentów


Kod źródłowy do tej lekcji znajduje się tutaj. Rozpakuj go i zaimportuj. W katalogu z kodem źródłowym znajdą się podkatalogi oznaczone numerami. Są to po prostu kolejne wersje kodu, tworzonego w ramach przykładów. Możesz analizować kolejne kroki tworzenia aplikacji, lub od razu zabrać się za kod z katalogu o najwyższym numerku.

Wszystkie wizualne komponenty w Androidzie (guziki, napisy, pola edycyjne etc) dziedziczą po klasie View. Klasa View posiada metodę setRotation która umożliwia ustawienie obrócenia elementu. To oznacza, że możemy obracać takie obiekty jak obrazki czy guziki. Teraz małe how-to.
Do ekranu przykleiłem jeden komponent typu ImageView i dwa przyciski:



Nic nadzwyczajnego. Do imageView wstawiłem od razu do wyświetlenia obrazek z sową. Zrobiłem to za pomocą zapisu w XML layoutu tej aktywności:
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="@drawable/owl" />


Przyjrzyjmy się teraz kodowi źródłowemu:



Hint SuppressLint z linii 14 był wymagany w związku z użyciem setRotation i został dodany automatycznie. Linie 25-27 to zwykłe przypisanie referencji do obiektów. Bardziej nas interesują linie 29-43. W owych liniach opisuję sposób zachowania aplikacji po naciśnięciu przycisków. Tworzę dwa listenery i podstawiam je jako listenery dla kliknięć przycisków. Nie ma to związku z samym obracaniem, a jedynie z funkcjonalnością programu. Zasadniczym najważniejszym elementem który nas interesuje są linie 32 i 40. Określają one obrót obiektu w stopniach. Jak wiadomo pełen obrót wokół własnej osi to 360 stopni. Położenie „normalne” to 0 stopni. Wywołanie metody setRotation np. w ten sposób:

iv.setRotation(70);

Spowodowałoby że obrazek ustawiłbym się w pozycji obróconej o 70 stopni od pozycji „normalnej”. Stosowanie zapisu takiego jak ten z przykładu:



iv.setRotation(iv.getRotation()+10);



sprawia że obrazek obraca się o 10 stopni w stosunku do aktualnej pozycji. Po kilku kliknięciach nasza sówka się nieco obróciła:


O ile możliwość obracania obrazków wydaje się całkiem naturalna (mniej naturalne jest to że w rzeczywistości nie obraca się jedynie obrazek a cały kontener z obrazkiem ), o tyle mniej oczywista jest możliwość obracania np. guzików. Tym razem przyklejam do ekranu dwa przyciski:


Kod aktywności bardzo zbliżony do poprzedniego:


 
Po kilku kliknięciach przycisku z napisem „Obróć buttona”:





12 komentarzy:

  1. Uprzedzam iż zarówno obracanie, jak i skalowanie elementów wymagają minimalnego API 11 (czyli android 3.0). Dlatego więc na popularnych wersjach w większości obecnych telefonów (tj. 2.2-2.3.6) nie pójdzie.

    OdpowiedzUsuń
    Odpowiedzi
    1. Nieźle, z tego co wiem, to w tym momencie API < 15 to już dinozaury w zasadzie :) już w zeszłym roku tendencja api androida zmierzała do minimalnego v14.

      Usuń
  2. wydaje mi się, że większość obecnych telefonów posiada API >= 11. androida w wersji 2.3 wrzucają teraz chyba tylko na tablety z Biedronki ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Pamiętaj że warto pamiętać o osobach, które nie chcą mieć wodotrysków.

      Usuń
  3. Można też stworzyć dwie metody w myActivity
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void obrocElementWLewo(View v)
    {
    iv.setRotation(iv.getRotation()-10);
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void obrocElementWPrawo(View v)
    {
    iv.setRotation(iv.getRotation()+10);
    }
    i do przycisków dodać obsługe kliknięcia
    do prawego:
    android:onClick="obrocElementWPrawo"
    do lewego:
    android:onClick="obrocElementWLewo"
    tak jak to było pokazane w poprzednich lekcjach. Myślę że to lepsza opcja ponieważ kod staje się czytelniejszy i nie trzeba dodawać żadnego listenera

    OdpowiedzUsuń
  4. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  5. Jak sprawić żeby, po wciśnięci Buttona obracał się do momentu wciśnięcia drugiego buttona, żeby zmienić kierunek?

    OdpowiedzUsuń
  6. Jak zawsze można tutaj znaleźć przydatne i praktyczne wskazówki, na prawdę wartościowy i pomocny blog, świetna robota.

    OdpowiedzUsuń
  7. Fascynujący wpis. Podoba mi się.

    OdpowiedzUsuń
  8. Informacja o takiej kombinacji jest dla mnie bardzo wartościowa.

    OdpowiedzUsuń
  9. Bardzo ciekawy wpis. Zastanawiałem się kiedyś jak wykonać taki obrót.

    OdpowiedzUsuń