ViewPagerで上下左右にスワイプできる画面を作ってみた

久しぶりにAndroidの話題。

上下にもスワイプできるViewPagerってあるのかなーと思って探してたらドンピシャなのがあった。

https://github.com/JakeWharton/Android-DirectionalViewPager

日本語でメモを残してくださった方もいらっしゃるみたい。

ViewPagerを縦で利用する。 | 僕、Corder。

導入は簡単。jarをつっこむだけ。

で、このDirectionalViewPagerを使ってタイトルのとおり上下左右にスワイプできる画面を作ってみた。

方法：DirectionalViewPagerのスワイプ方向が異なるやつを2枚重ねる

これだけです。

イメージとしてはこんな感じにしてみた。

DirectionalViewPager持ったActivity (左右にスワイプ)
├──適当なFragment
├──DirectionalViewPager持ったFragment (上下にスワイプ)
│    ├──適当なFragment
│    └──適当なFragment
└──適当なFragment

コード

「DirectionalViewPager持ったFragment」のソース↓

fragment_pager.xml

<?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" >

    <android.support.v4.view.DirectionalViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" />

</LinearLayout>

PagerFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.DirectionalViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.Arrays;
import java.util.List;

public class PagerFragment extends Fragment {

    @Override
    public View onCreateView(final LayoutInflater inflater, final ViewGroup container, final Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_pager, null);
        final DirectionalViewPager pager = (DirectionalViewPager) view.findViewById(R.id.pager);
        pager.setAdapter(new MyPagerAdapter(getChildFragmentManager()));
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    private static class MyPagerAdapter extends FragmentStatePagerAdapter {

        private List<Fragment> fragments;

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);

            // 適当なFragmentをセット
            fragments = Arrays.asList(new Fragment(), new Fragment());
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

「DirectionalViewPager持ったActivity」のソース↓

activity_main.xml

<?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" >

    <android.support.v4.view.DirectionalViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" />

</LinearLayout>

MainActivity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.DirectionalViewPager;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        final DirectionalViewPager pager = (DirectionalViewPager) findViewById(R.id.pager);
        pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
    }
    
    private static class MyPagerAdapter extends FragmentStatePagerAdapter {
        
        private List<Fragment> fragments;

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);

            fragments = Arrays.asList(
                    new Fragment(),
                    new PagerFragment(), // 上下にスワイプするフラグメント
                    new Fragment()
            );
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

所感

何か面白いものが作れそうな予感。

だけど、やりすぎるとアプリ内でユーザが迷子になるかも。