MójDroid.pl

#12 Twórz aplikacje na Androida z Mojdroid.pl - ImageView, czyli obrazy (część pierwsza)

2012-09-24
|
Damian P.

Jedną z najważniejszych rzeczy w każdej aplikacji jest jej wygląd. Sam tekst, ładne listy oraz dobry kod nie wystarczą, aby użytkownik był w pełni zadowolony z programu. Liczą się również grafiki, które w wielu przypadkach są cechą rozstrzygającą ocenę aplikacji. Dlatego odpowiednie przygotowanie zarówno ikony jak i poszczególnych elementów pod względem graficznym w Androidzie jest bardzo ważne. Dziś zapoznamy się z pierwszą z wielu odmian grafiki w Androidzie, elementem ImageView.

1. ImageView

Element wyświetlający wybrany obraz, na przykład ikonę czy pobraną z sieci grafikę. Autem ImageView jest to, że nasza fotografia nie musi pochodzić z pliku dodanego do projektu - możemy wyświetlić obrazek zarówno z galerii, internetu, kontaktów i tym podobnych. Wystarczy tylko to, aby był to jeden z zgodnych formatów. Oprócz samego pokazywania zdjęcia, ImageView posiada również kilka opcji dotyczących skalowania i filtrowania (nakładania efektów).

2. Atrybut scaleType

Nieco frustrująca cecha ImageView. Jak pewnie wiecie, obrazki w systemach operacyjnych wyrażone są za pomocą pikseli. W Androidzie zazwyczaj posługujemy się punktami gęstości, więc czasami po dodaniu fotografii do aplikacji (a dokładniej do jakiegoś View/Layoutu) zobaczymy dziwny efekt - a to nasze zdjęcie będzie bardzo małe, może przycięte albo i rozciągnięte. Aby uniknąć takich nieprzewidzianych sytuacji, system od początku obsługuje skalowanie grafik. I do tego służy właśnie atrybut scaleType. Niestety, samo Eclipse niezbyt dobrze renderuje obrazki po takich zmianach, przez co nigdy nie możemy być pewni jak nasz element będzie wyglądał w działającym programie. Polecam przetestowanie kilku rozwiązań i wybranie tego najlepszego. Tak wygląda mój przykładowy layout (nie musicie go tworzyć, chcę tylko pokazać różnicę między każdym, nie dołączę tego do projektu): Zwykły Relative z ImageView ustawionym na środku i szerokością ustawioną na max wymiary Relative. Teraz ustawię na kilka atrybutów ScaleType.
  • CENTER - Centruje obraz w View, ale nie powoduje skalowania.
  • CENTER_CROP - Skaluje obraz zachowując ratio, wysokość  i szerokość grafiki będzie równa lub większa od wyższego View.
  • CENTER_INSIDE - Skaluje obraz zachowując ratio, wysokość  i szerokość grafiki będzie równa lub mniejsza od wyższego View.
  • FIT_CENTER - Skaluje obraz zachowując ratio, ale stara się umieścić cały obszar zdjęcia w widoku. Przynajmniej jedna ze stron będzie w całości widoczna. Całość zostanie wyśrodkowana.
  • FIT_END - Skaluje obraz zachowując ratio, ale stara się umieścić cały obszar zdjęcia w widoku. Przynajmniej jedna ze stron będzie w całości widoczna. Całość zostanie umieszczona w prawym dolnym rogu.
  • FIT_START - Skaluje obraz zachowując ratio, ale stara się umieścić cały obszar zdjęcia w widoku. Przynajmniej jedna ze stron będzie w całości widoczna. Całość zostanie umieszczona w lewym górnym rogu.
  • FIT_XY - Skaluje wymiary niezależnie, tak aby wypełniały one w całości View. Nie zachowuje ratio.
  • MATRIX - Skaluje obraz podczas rysowania według jego siatki.
PS. Zobaczcie ile faktycznego obszaru zajmuje obrazek, to że jest mniejszy nie znaczy, że zajmie dokładnie tyle miejsca. Może zakrywać wszystko widoczne i być po prostu mały. ImageView w layoucie XML umieszczamy na przykład w ten sposób (tak umieszczałem powyższy, pamiętajcie o dodaniu obrazu do /res!):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" 
        android:src="@drawable/TUTAJ_SRC_DO_NASZEGO_OBRAZKA_W_RES"/>

</RelativeLayout>
I to koniec części pierwszej, jutro kolejna! Jest tego sporo, a nie chcę niepotrzebnie wydłużać... Musicie poczekać :(