Сайт разработчика Александра Климова

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

ScrollView и HorizontalScrollView

Методы scrollBy() и scrollTo()
Создаём свою галерею

При большом количестве информации, которую нужно поместить на экране приходится использовать полосы прокрутки. В Android существуют специальные компоненты ScrollView и HorizontalScrollView, которые являются контейнерными элементами и наследуются от ViewGroup. Обратите внимание, что класс TextView использует свою собственную прокрутку и не нуждается в добавлении отдельных полос прокрутки. Но использование отдельных полос даже с TextView может улучшить вид вашего приложения и повышает удобство работы для пользователя.

На панели инструментов компоненты можно найти в разделе Containers.

В контейнеры ScrollView и HorizontalScrollView можно размещать только один дочерний элемент (обычно LinearLayout), который в свою очередь может быть контейнером для других элементов. Виджет ScrollView, несмотря на свое название, поддерживает только вертикальную прокрутку, поэтому для создания вертикальной и горизонтальной прокрутки необходимо использовать ScrollView в сочетании с HorizontalScrollView. Обычно ScrollView используют в качестве корневого элемента, а HorizontalScrollView в качестве дочернего. Можно и наоборот, пробуйте.


<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scroll" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
<HorizontalScrollView 
    android:id="@+id/hscroll" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
<TextView 
    android:id="@+id/textview" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="24px" 
    android:isScrollContainer="true"/> 
</HorizontalScrollView> 
</ScrollView> 

В в теле метода onCreate() создайте ссылку на элемент TextView, объявленный в XML-разметке, и запишите в него через метод setText() какой-нибуль длинный текст, который не поместится в видимые размеры экрана устройства:


TextView text (TextView)findViewById(R.id.textview); 
// загружаем текст 
text.setText("здесь должен быть длинный текст"); 

Запустив проект, вы должны увидеть вертикальную и горизонтальную полосы прокрутки при попытке скролирования.

Если полосы прокрутки вас раздражают, то используйте атрибут android:scrollbars="none", который скроет их.

По такому же принципу можете вложить ImageView, чтобы просматривать большие картинки:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <HorizontalScrollView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
        <ScrollView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content">
            <ImageView 
                android:src="@drawable/bigpicture"
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content"
                android:scaleType="center"/>
        </ScrollView>
 </HorizontalScrollView>
</LinearLayout>

Методы scrollBy() и scrollTo()

Вы можете программно прокручивать контент с помощью методов scrollBy() и scrollTo(). Например, можно организовать автоматическую прокрутку во время чтения. В нашем примере мы будем прокручивать контент с помощью трёх кнопок.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/scrollup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Scroll Up" />

    <Button
        android:id="@+id/scrolldown"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Scroll Down" />

    <Button
        android:id="@+id/scrolltotop"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Scroll To Top" />

    <ScrollView
        android:id="@+id/myview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#A0A0A0"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="This\nView\nCan\nBe\nScroled\nBy Buttons!"
                android:textSize="40dp" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Dummy Button" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Dummy Button" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Dummy Button" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

Сам код для методов:


package ru.alexanderklimov.scrollview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ScrollView;

public class ScrollViewDemoActivity extends Activity {
	Button buttonScrollUp, buttonScrollDown, buttonScrollToTop;
	ScrollView myScroll;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		buttonScrollUp = (Button) findViewById(R.id.scrollup);
		buttonScrollDown = (Button) findViewById(R.id.scrolldown);
		buttonScrollToTop = (Button) findViewById(R.id.scrolltotop);
		myScroll = (ScrollView) findViewById(R.id.myview);

		buttonScrollUp.setOnClickListener(new Button.OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				myScroll.scrollBy(0, +20);
			}
		});

		buttonScrollDown.setOnClickListener(new Button.OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				myScroll.scrollBy(0, -20);
			}
		});

		buttonScrollToTop.setOnClickListener(new Button.OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				myScroll.scrollTo(0, 0);
			}
		});
	}
}

Методы ScrollView

Дополнительное чтение

ScrollView. Продвинутые приёмы

ScrollView’s handy trick

Библиотека ksoichiro/Android-ObservableScrollView

Библиотека ParallaxScrollView с использованием эффекта параллакса. Вы прокручиваете длинный текст, а задний фон прокручивается чуть медленнее. Возможно, кому-то пригодится. Там же можно скачать готовое демо и просмотреть в действии.

Реклама