
Tworząc aplikacje na Androida wcześniej czy później spotkamy się z problemem różnych rozdzielczości. Jako, że istnieje sporo urządzeń z systemem od Googlea, nasza treść nie zawsze tak samo będzie się formatować. Na wielkich wyświetlaczach raczej problemu nie ma, bo razem z nimi w parze idzie wysoka rozdzielczość, a więc i widzimy więcej. Problem powstaje na małych polach, gdzie nasze szablony będą po prostu ucinane w dolnej części. Jak temu zaradzić?
Informacja: Nie radzisz sobie z kodem? Coś Ci nie wychodzi lub nie działa? Zgubiłeś się? W tym miejscu zobaczysz pełen kod aplikacji, a tutaj go pobierzesz na dysk.
Problem jest prosty do rozwiązania - należy wprowadzić przewijane
Layouty, gdzie pozostała część wyglądu będzie dostępna nieco niżej (na smartfonach z wysoką rozdzielczością nie będzie tego efektu). Wcześniej poznaliśmy
ListView, który taką opcję ma od początku, jednak do niektórych danych nie będzie on zbyt dobrym rozwiązaniem - na przykład wtedy, gdy musimy wyświetlić coś nie mającego kilku identycznych elementów pod sobą. Dlatego w systemie oprócz
RelativeLayoutów i
LinearLayoutów mamy obecne jeszcze inne typy szablonów, w tym interesujący nas dzisiaj
ScrollView.
Zanim jednak wytłumaczę czym jest
ScrollView, muszę pokazać wam jeszcze jeden typ, do którego właśnie nasz przewijany
layout się zalicza.
1. FrameLayout
FrameLayout to szablon zaprojektowany do zarządzania obszarem w aplikacji tak, aby zablok0wać go i wyświetlać pojedynczy element. Tak jest zazwyczaj, bo możemy do niego dodać więcej warstw, ale może wystąpić problem z ich zarządzaniem.
I to właśnie jest cecha
FrameLayoutu -
posiada on warstwy, na których możemy tworzyć poszczególne poziomy wyglądu. Każda nowa warstwa pojawia się na poprzedniej, zakrywając ją częściowo (zależne od tego co dodamy i będzie zakrywać).
2. ScrollView
I tutaj pojawia nam się
ScrollView. Jest to szablon, który powinien posiadać w sobie tylko jedno dziecko. Powinien - bo możemy dodać ich więcej, ale będą występować problemy z ich zarządzeniem. Oczywiście należy on do grupy
FrameLayoutu i posiada wszystkie jego cechy.
Jego cechą jest to, że obszar szablonu może wystawać poza wyznaczoną fizyczną wielkość wyświetlacza smartfona. Aby wyświetlić niewidoczną treść należy dotknąć tego widoku i przewinąć go, odsłaniając resztę, a jednocześnie ukrywając górną c zęść.
W takim razie znamy już dwa przewijane
Views -
ListView i
ScrollView. Co się stanie, gdy jeden z nich umieścimy w drugim? Wystąpi błąd, ale nie w kompilacji programu a jego działaniu. Najzwyczajniej w świecie oba widoki będą sobie przeszkadzać, co w ostateczności doprowadzi do artefaktów i żadna z list nie będzie możliwa do przewinięcia. Na dodatek
ListView prawdopodobnie się ukryje, a dokładniej będzie miał wysokość 0 pikseli.
Podobnie ma się sprawa z TextView, z tym, że nie będzie on powodował problemu w ScrollView. Jeżeli tekst będzie zbyt długi i będzie wystawał poza wyświetlacz, to będzie możliwy do przewijania. Taka ciekawostka.
Ważne! ScrollView wspiera tylko pionowe przewijanie!
3. Tworzymy ScrollView
Przejdźmy do stworzenia własnego
ScrollView. Standardowo potrzebne będą nam dwie rzeczy: nowe
Activity oraz szablon
XML w katalogu layout.
Po przeciągnięciu elementu
ScrollView do naszego
XMLa, w trybie tekstowym zobaczymy coś takiego:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
Jak wcześniej mówiłem,
ScrollView powinien zawierać jeden
layout (dziecko) pod sobą. Zazwyczaj tworzy on nam się automatycznie, i jeżeli chcemy go zmienić to powinniśmy wybrać pomiędzy
LinearLayoutem a
RelativeLayoutem. Ja w tym poradniku używam tego pierwszego.
Dodajmy teraz kilka elementów tak, aby było ich zbyt wiele aby wszystkie na raz wyświetlić. Możemy również stworzyć bardzo wysokie elementy, efekt będzie ten sam.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000"
android:text="Obszar pierwszy"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#fff"
android:text="Obszar drugi"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000"
android:text="Obszar trzeci"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#fff"
android:text="Obszar czwarty"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000"
android:text="Obszar piąty"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#fff"
android:text="Obszar szósty"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#000"
android:text="Obszar siódmy"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#fff"
android:text="Obszar ósmy"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000" />
</LinearLayout>
</ScrollView>
Nasza klasa nie jest zbyt rozwinięta, przypisuje do siebie tylko layout i wyświetla go. Tyle nam wystarczy.
package com.example.moja.pierwsza.aplikacja;
import android.app.Activity;
import android.os.Bundle;
public class View_Scrollview extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_scrollview);
}
}
I oto cały urok tego elementu.