Android ViewPagerの実装方法

適用シーン

画面ガイド、画像ビューア、広告カルーセル、ニュース表示、アプリナビゲーション、チュートリアルなど

ガイド画面実装例

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

カスタムアダプター

package com.example.viewpager;

import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import java.util.List;

public class SlideAdapter extends androidx.viewpager.widget.PagerAdapter {
    private final List<View> viewList;

    public SlideAdapter(List<View> views) {
        this.viewList = views;
    }

    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object obj) {
        return view == obj;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int pos, @NonNull Object obj) {
        container.removeView((View) obj);
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int pos) {
        container.addView(viewList.get(pos));
        return viewList.get(pos);
    }
}

アクティビティ実装

package com.example.viewpager;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager pager;
    private List<View> layouts;

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

        pager = findViewById(R.id.slider);
        layouts = new ArrayList<>();
        layouts.add(getLayoutInflater().inflate(R.layout.page1, null));
        layouts.add(getLayoutInflater().inflate(R.layout.page2, null));
        layouts.add(getLayoutInflater().inflate(R.layout.page3, null));

        pager.setAdapter(new SlideAdapter(layouts));
    }
}

自動スライド実装

public class MainActivity extends AppCompatActivity {
    private Handler slideHandler;
    private Runnable slideTask;
    private static final long INTERVAL = 2000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 初期化コード...

        slideTask = new Runnable() {
            @Override
            public void run() {
                int current = pager.getCurrentItem();
                int next = (current + 1) % pager.getAdapter().getCount();
                pager.setCurrentItem(next);
                startAutoSlide();
            }
        };

        startAutoSlide();

        pager.setOnTouchListener((v, event) -> {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    stopAutoSlide();
                    break;
                case MotionEvent.ACTION_UP:
                    startAutoSlide();
                    break;
            }
            return false;
        });
    }

    private void startAutoSlide() {
        slideHandler.postDelayed(slideTask, INTERVAL);
    }

    private void stopAutoSlide() {
        slideHandler.removeCallbacks(slideTask);
    }
}

タグ: Android ViewPager adapter UIコンポーネント スライダー

8月4日 16:58 投稿