poniedziałek, 10 lutego 2014

Tło ekranu aplikacji


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.

Zaczniemy od ustawienia koloru tła, to jest zdecydowanie najprostsze. Stworzyłem nowy projekt. Całość sprowadza się do ustawienia parametru android:background (linia 9) w XMLowym pliku layoutu.



Jeśli chcesz wybrać jakiś kolor, możesz znaleźć zestawienie kolorów dla HTML (np. tutaj: http://www.kurshtml.edu.pl/html/wykaz_kolorow,kolory.html) Ustawiłem przypadkowy kod koloru FF0044 i wyszło mi coś takiego(fuj):


 
Tłem może być również obrazek. Wrzuciłem obrazeł do podkatalogu drawable-hdpi:


Tym razem zamiast podawać kod koloru, podaję w pliku layoutu w parametrze android:background wskaźnik do obrazka (patrzymy na linię nr 9):

  
Efekt:


Pieseł nam się trochę rozciągnął. W zależności od rozmiaru i proporcji ekranu będziemy mieć większego albo mniejszego, chudszego albo grubszego pieseła. To nie zawsze musi dobrze wyglądać. Może lepiej byłoby by obrazek tła się powtarzał? Aby uzyskać taki efekt, musimy stworzyć plik XML który będzie opisywał sposób prezentacji obrazka. W tym celu klikamy PPM na katalogu drawable-hdpi i wybieramy New-->Android XML File. Pojawi nam się takie okno:


 
Zaznaczamy „bitmap” i wpisujemy nazwę pliku xml:



Zatwierdzamy. Zawartość pliku uzupełniamy tak by wyglądał w taki sposób:



<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/doge"
android:tileMode="repeat"
>
</bitmap>



Oczywiście w parametrze android:src podajemy wskaźnik do swojego obrazka. Parametr android:background w pliku layoutu modyfikujemy tak, by wskazywał na nasz nowo utworzony plik XML a nie plik obrazka:


 
Po tych zabiegach ekran programu po uruchomieniu wygląda tak:



5 komentarzy:

  1. Tło takie piękne, pieseł taki rozciągnięty. Wow :D

    OdpowiedzUsuń
  2. Mi to wygląda raczej na foka niż na pieseła. To napewno fok!

    OdpowiedzUsuń
  3. jak zrobić aby tło zmieniało się na inny obrazek po kliknięciu przycisku ?

    OdpowiedzUsuń