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.