
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!