Ostatnio poznaliśmy ScrollView, szablon który pozwala nam przewijać treść w kierunku pionowym. Dziś poznamy element bardzo podobny do niego, z tą różnicą, że całość będzie mogła poruszać się poziomo.

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.

1. HorizontalScrollView

Jest to oczywiście kontener na inne elementy interfejsu w Androidzie. Podobnie jak ScrollView, tak i ten należy do grupy FrameLayoutów. Musimy więc pamiętać o tym, aby wewnątrz jego nie znalazła się żadna lista, w innym wypadku zobaczymy artefakty w tworzeniu wyglądu. W przeciwieństwie do poprzedniego View, HorizontalScrollView pozwala nam przewijać treść poziomo - w lewo i prawo. Zazwyczaj razem z nim występuje LinearLayout umieszczony horyzontalnie. I tak naprawdę tutaj różnice się kończą. Całość tworzymy podobnie, to znaczy dodajemy nowy XML z wyglądem, przeciągamy odpowiedni element z kategorii Composite, wybieramy layout (Linear lub Relative), który będzie dzieckiem i dodajemy kilkanaście elementów do testowania. view_horizontalscrollview.xml:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/horizontalScrollView1"
    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="horizontal" >

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#000"
            android:text="Obszar pierwszy"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#fff" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#fff"
            android:text="Obszar drugi"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#000"
            android:text="Obszar trzeci"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#fff" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#fff"
            android:text="Obszar czwarty"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#000"
            android:text="Obszar piąty"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#fff" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#fff"
            android:text="Obszar szósty"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#000"
            android:text="Obszar siódmy"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#fff" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#fff"
            android:text="Obszar ósmy"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000" />
    </LinearLayout>

</HorizontalScrollView>

Warto też dodać, że HorizontalScrollView zastąpił element Gallery z poprzednich wersji Androida. Działał on bardzo podobnie, ale posiadł mniejsze możliwości. Taka ciekawostka, jeżeli przypadkiem łapiecie się za głowę czytając inne, starsze poradniki w sieci. Po stworzeniu XMLa z wyglądem dodajmy nową klasę, aby zobaczyć efekty. Pamiętajcie oczywiście o dodaniu wpisu do manifestu oraz pozycji do listy. View_Horizontalscrollview:

package com.example.moja.pierwsza.aplikacja;

import android.app.Activity;
import android.os.Bundle;

public class View_Horizontalscrollview extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.view_horizontalscrollview);
    }

}

Efekt całkiem ciekawy, idealny właśnie na galerię. PS. To nie jest ten sam element co w aplikacji marketu i podobnych! Nim zajmiemy się za jakiś czas!