Android:垂直ViewPager [終了]


130

ViewPager水平方向ではなく垂直方向にスクロールするを作成する方法はありますか?


1
垂直方向のViewPagerの新しい非公式のオープンソース実装があります:お知らせ: plus.google.com/107777704046743444096/posts/1FTJfrvnY8w コード: github.com/LambergaR/VerticalViewPager
Vasily Sochinsky

Antoine Merleによる垂直ビューページャーの実装:github.com/castorflex/VerticalViewPager
micnoy

19のサポートライブラリに基づく新しい実装があります:github.com/castorflex/VerticalViewPager
Vasily Sochinsky

これは、類似した名前があるにもかかわらず、github.com/castorflex/VerticalViewPagerと同じではありません。
Flimm

1
デモ用のViewPager2チェックと呼ばれるコントロールがあります。ここで、stackoverflow.com
Nilesh Rathod

回答:


227

ViewPager.PageTransformerを使用して、垂直の錯覚を与えることができますViewPager。水平ドラッグではなく垂直ドラッグでスクロールするには、ViewPagerのデフォルトのタッチイベントをオーバーライドMotionEventし、それらを処理する前にの座標を交換する必要があります。例:

/**
 * Uses a combination of a PageTransformer and swapping X & Y coordinates
 * of touch events to create the illusion of a vertically scrolling ViewPager. 
 * 
 * Requires API 11+
 * 
 */
public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

もちろん、必要に応じてこれらの設定を微調整できます。最終的には次のようになります。

VerticalViewPagerデモ


3
@Der Golemこれのレイアウトの使い方は?
bShah

正確な質問は何ですか?ちなみに、私は答えを投稿せず、参照画像を追加しただけです。
ファントマックス2014年

1
この例では@Brettを使用して、左右にスワイプして何らかのアクションを実行します。それを行う方法
Prabs 2015年

1
@ブレットは期待通りに機能し、移行は垂直に進んでいます。しかし、問題は、トランジションを行うには右/左にスワイプする必要があり、上部/下部をスワイプするとトランジションが行われないことです。
Karan Khurana 2016

2
@ブレット私はあなたのソリューションを使用していました。しかし今、私はandorid pieデバイスでスウィッピングの問題を抱えています。誰かが同じ問題に直面していますか?
Jishant

20

垂直ViewPager

ここでの他の回答はすべて、いくつかの問題があるようです。推奨されるオープンソースプロジェクトでさえ、最近のプルリクエストとバグ修正をマージしていませんでした。その後VerticalViewPager、Googleから、DeskClockアプリを使用していることがわかりました。Googleの実装を使用することは、ここに浮かぶ他の回答よりもはるかに信頼できます。(Googleのバージョンは現在のトップ投票の回答に似ていますが、より徹底しています。)

完全な例

この例は、基本的なViewPagerの例とほとんど同じですが、VerticalViewPagerクラスを使用するためにいくつかのマイナーな変更が加えられています。

ここに画像の説明を入力してください

XML

メインアクティビティと各ページ(フラグメント)のxmlレイアウトを追加します。VerticalViewPager標準ではなくを使用していることに注意してくださいViewPager。そのためのコードを以下に含めます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.verticalviewpager.MainActivity">

    <com.example.myapp.VerticalViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

fragment_one.xml

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

    <TextView
        android:id="@+id/textview"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

コード

のコードVerticalViewPagerは私のものではありません。これは、Googleのソースコードから(コメントなしで)削除されたバージョンです。最新バージョンについては、こちらをご覧ください。そこにあるコメントは、何が起こっているのかを理解するのにも役立ちます。

VerticalViewPager.java

import android.support.v4.view.ViewPager;    

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        this(context, null);
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    public boolean canScrollHorizontally(int direction) {
        return false;
    }

    @Override
    public boolean canScrollVertically(int direction) {
        return super.canScrollHorizontally(direction);
    }

    private void init() {
        setPageTransformer(true, new VerticalPageTransformer());
        setOverScrollMode(View.OVER_SCROLL_NEVER);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        final boolean toIntercept = super.onInterceptTouchEvent(flipXY(ev));
        flipXY(ev);
        return toIntercept;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        final boolean toHandle = super.onTouchEvent(flipXY(ev));
        flipXY(ev);
        return toHandle;
    }

    private MotionEvent flipXY(MotionEvent ev) {
        final float width = getWidth();
        final float height = getHeight();
        final float x = (ev.getY() / height) * width;
        final float y = (ev.getX() / width) * height;
        ev.setLocation(x, y);
        return ev;
    }

    private static final class VerticalPageTransformer implements ViewPager.PageTransformer {
        @Override
        public void transformPage(View view, float position) {
            final int pageWidth = view.getWidth();
            final int pageHeight = view.getHeight();
            if (position < -1) {
                view.setAlpha(0);
            } else if (position <= 1) {
                view.setAlpha(1);
                view.setTranslationX(pageWidth * -position);
                float yPosition = position * pageHeight;
                view.setTranslationY(yPosition);
            } else {
                view.setAlpha(0);
            }
        }
    }
}

MainActivity.java

と交換しただけVerticalViewPagerですViewPager

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends AppCompatActivity {

    static final int NUMBER_OF_PAGES = 2;

    MyAdapter mAdapter;
    VerticalViewPager mPager;

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

        mAdapter = new MyAdapter(getSupportFragmentManager());
        mPager = findViewById(R.id.viewpager);
        mPager.setAdapter(mAdapter);
    }

    public static class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return NUMBER_OF_PAGES;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return FragmentOne.newInstance(0, Color.WHITE);
                case 1:
                    // return a different Fragment class here
                    // if you want want a completely different layout
                    return FragmentOne.newInstance(1, Color.CYAN);
                default:
                    return null;
            }
        }
    }

    public static class FragmentOne extends Fragment {

        private static final String MY_NUM_KEY = "num";
        private static final String MY_COLOR_KEY = "color";

        private int mNum;
        private int mColor;

        // You can modify the parameters to pass in whatever you want
        static FragmentOne newInstance(int num, int color) {
            FragmentOne f = new FragmentOne();
            Bundle args = new Bundle();
            args.putInt(MY_NUM_KEY, num);
            args.putInt(MY_COLOR_KEY, color);
            f.setArguments(args);
            return f;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mNum = getArguments() != null ? getArguments().getInt(MY_NUM_KEY) : 0;
            mColor = getArguments() != null ? getArguments().getInt(MY_COLOR_KEY) : Color.BLACK;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.fragment_one, container, false);
            v.setBackgroundColor(mColor);
            TextView textView = v.findViewById(R.id.textview);
            textView.setText("Page " + mNum);
            return v;
        }
    }
}

完成した

アプリを実行して、上記のアニメーションで結果を確認できるはずです。

こちらもご覧ください


3
コードは正常に機能しています。1つの小さなヘルプが必要です。現在のコードでは、次のページを取得するために下から上にスワイプする必要がありますが、小さなスワイプでも次のページを取得する必要があります。
AMIT

20

2つのステップで機能する解決策があります。

  1. onInstantiateItem()PagerAdapter、ビューを作成し、-90回転します。

    view.setRotation(-90f)

    を使用している場合FragmentPagerAdapter

    objFragment.getView().setRotation(-90)
  2. ViewPagerビューを90度回転:

    objViewPager.setRotation(90)

少なくとも私の要件では魅力のように機能します。


4
このソリューションは機能しますが、viewPagerが垂直方向にスクロールするようになりましたが、水平方向にスワイプする必要があります
leochab

@Kulai私はここで何をすべきか明確ではありませんが、私が理解しているように少し説明してくださいpublic Object instantiateItem(ViewGroup container、int position)ここで私たちはcontainer.setRotation(-90f);
varun 2014年

1
そうすることは魅力のように機能します!Althougビューが上部と下部でカットされ、理由が
わかり

2
長方形ではなく、正方形の画像に正しく機能します。長方形を回転すると、寸法が正しく表示されません。
Kulai 2014年

1
誰がこの回答に賛成したのかわかりません。これは、VerticalViewPagerではありません。90度回転したViewPagerであり、ジェスチャーと遷移は正反対です。そしてそれはまったく自然ではありません
ドロイデフ19/07/12

14

垂直方向のViewPagerを水平方向で動作させる方法に苦労している人のために、次のことを行ってください:

垂直ViewPager

public class VerticalViewPager extends ViewPager {
    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setPageTransformer(true, new VerticalPageTransformer());
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) {
                view.setAlpha(0);
            } else if (position <= 1) {
                view.setAlpha(1);

                view.setTranslationX(view.getWidth() * -position);

                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);
            } else {
                view.setAlpha(0);
            }
        }
    }

    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev);
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

水平ViewPager

public class HorizontalViewPager extends ViewPager {
    private GestureDetector xScrollDetector;

    public HorizontalViewPager(Context context) {
        super(context);
    }

    public HorizontalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        xScrollDetector = new GestureDetector(getContext(), new XScrollDetector());
    }

    class XScrollDetector extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            return Math.abs(distanceX) > Math.abs(distanceY);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (xScrollDetector.onTouchEvent(ev)) {
            super.onInterceptTouchEvent(ev);
            return true;
        }

        return super.onInterceptTouchEvent(ev);
    }

}

この水平および垂直ビューページャーをビューに追加するにはどうすればよいですか?
user1810931 2017年


上記のHorizo​​ntalおよびVerticalビューページャークラスをビューに実装するにはどうすればよいですか?コードスニペットが役立ちます
-user1810931

ViewPagerはすでに表示されています。あなたの質問の内容がわかりません。
ダイバーは2017年

「Material Calendar View」(github.com/prolificinteractive/material-calendarview)というライブラリを使用していますが、すでに水平ビューページャーが含まれており、垂直ビューページャーを追加したいと考えています。
user1810931

8

この回答のわずかな拡張は、私の要件を達成するのに役立ちました(垂直ビューページャーは、Inshorts-Newsのようなものを60ワードでアニメーション化します

public class VerticalViewPager extends ViewPager {

public VerticalViewPager(Context context) {
    super(context);
    init();
}

public VerticalViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    // The majority of the magic happens here
    setPageTransformer(true, new VerticalPageTransformer());
    // The easiest way to get rid of the overscroll drawing that happens on the left and right
    setOverScrollMode(OVER_SCROLL_NEVER);
}

private class VerticalPageTransformer implements ViewPager.PageTransformer {
 private static final float MIN_SCALE = 0.75f;
    @Override
    public void transformPage(View view, float position) {

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        }  else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            // Counteract the default slide transition
            view.setTranslationX(view.getWidth() * -position);

            //set Y position to swipe in from top
            float yPosition = position * view.getHeight();
            view.setTranslationY(yPosition);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // [0,1]
            view.setAlpha(1);

            // Counteract the default slide transition
            view.setTranslationX(view.getWidth() * -position);


            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }

    }

}

/**
 * Swaps the X and Y coordinates of your touch event.
 */
private MotionEvent swapXY(MotionEvent ev) {
    float width = getWidth();
    float height = getHeight();

    float newX = (ev.getY() / height) * width;
    float newY = (ev.getX() / width) * height;

    ev.setLocation(newX, newY);

    return ev;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev){
    boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
    swapXY(ev); // return touch coordinates to original reference frame for any child views
    return intercepted;
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    return super.onTouchEvent(swapXY(ev));
}
}

これが他の誰かに役立つことを願っています。


1
MIN_SCALEの理想的な値は?
divyenduz

すばやくスワイプして問題が発生しませんでしたか?移行はスムーズではありません
Praneeth

なぜ誰かが速く上にスワイプするのですか?
Amrut Bidri 2016

明確にするためのコメント:このソリューションは、新しいページが下からではなく古いページの後ろから来るようにアニメーションを変更します。つまり、基本的には、ページを並べて配置するのではなく、一連のページを重ねて配置します。したがって、この解決策は、元の質問がしようとしていたこととは異なる場合があります。
ベンジャミンバスマシ

4

これを行うと主張するいくつかのオープンソースプロジェクトがあります。はい、どうぞ:

これらは、作成者によって非推奨とマークされています。

後もう一つ:

  • そこのファイル名にもあるAndroidのソースでVerticalViewPager.javaからdeskclockアプリが、私がそれのためのドキュメントを見つけることができないとして、正式にはサポートされていないようです。

3

2
覚えておくべきことは、DirectionalViewPagerはしばらく更新されておらずViewPager、サポートライブラリのの新しい機能の一部が欠落していることです。すなわち setPageMargin(int)。一般的にはそれでも仕事をする必要があります。そうでない場合でも、ソースコードを取得しViewPagerてすべてのx / yと幅/高さのロジックを入れ替えるのはそれほど難しくありません。
MH。

私はすでに考慮していますDirectionalViewPagerが、MHが言ったように、それは更新されていません(開発者はそれを非推奨と見なしています)!! Android開発者がコミュニティに垂直ViewPagerではなく水平のみを提供していることは驚くべきことです。私はAndroidのViewPager初心者ですが、x / yを垂直方向にスワップアウトするのは簡単ではありません。すでに構築済みのソリューションを使用したいと思います。とにかく、ありがとう
user1709805

2
こんにちは、垂直ビューページャーをなんとかしましたか?感謝
ポール

3

デバイスの表示が長方形であるため、座標(X、Y)を(Y、X)に正しく変換するための@Brettおよび@ Salman666からの回答の改善。

...

/**
 * Swaps the X and Y coordinates of your touch event
 */
@Override
public boolean onTouchEvent(MotionEvent ev) {
    return super.onTouchEvent(swapXY(ev));
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    return super.onInterceptTouchEvent(swapXY(ev));
}

private MotionEvent swapXY(MotionEvent ev) {

    //Get display dimensions
    float displayWidth=this.getWidth();
    float displayHeight=this.getHeight();

    //Get current touch position
    float posX=ev.getX();
    float posY=ev.getY();

    //Transform (X,Y) into (Y,X) taking display dimensions into account
    float newPosX=(posY/displayHeight)*displayWidth;
    float newPosY=(1-posX/displayWidth)*displayHeight;

    //swap the x and y coords of the touch event
    ev.setLocation(newPosX, newPosY);

    return ev;
}

...

ただし、タッチスクリーンの応答性を向上させるには、まだ何かする必要があります。この問題は、@ msdarkが@ Salman666の回答にコメントしたことに関連している可能性があります。


私はいつも返すことによって、いくつかの改良を持っているtrueonInterceptTouchEvent:私もDPADを使用してではなく、左/右のUP / DOWNでスクロールをトリガーするように、キーバインドを変更したgist.github.com/zevektor/fbacf4f4f6c39fd6e409
Vektor88

@ Vektor88が常にtrueを返すと、内部ビューがタッチイベントを受信できなくなります..最善の解決策は、ブレットアンサーと同様です..
Mohammad Zekrallah

2
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }


    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init() {

        setPageTransformer(true, new VerticalPageTransformer());

        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements PageTransformer {

        @Override
        public void transformPage(View view, float position) {
            int pageWidth = view.getWidth();
            int pageHeight = view.getHeight();

            if (position < -1) {

                view.setAlpha(0);

            } else if (position <= 1) {
                view.setAlpha(1);


                view.setTranslationX(pageWidth * -position);


                float yPosition = position * pageHeight;
                view.setTranslationY(yPosition);

            } else {

                view.setAlpha(0);
            }
        }
    }
        @Override
    public boolean onTouchEvent(MotionEvent ev) {

        ev.setLocation(ev.getY(), ev.getX());

        return super.onTouchEvent(ev);
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        ev.setLocation(ev.getY(), ev.getX());
        return super.onInterceptTouchEvent(ev);
    }
}

1
これは非常にうまく機能しますが、要素または左/スワイプイベントの
touchEventを失い

0

実際、Androidソースにはすでに1つあります。私はそれをよりよく機能するように修正しました:

package com.crnlgcs.sdk.widgets;



import android.content.Context;
import android.support.v4.view.ViewConfigurationCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewParent;

public class VerticalViewPager extends ViewPager {
    private static final String TAG = "VerticalViewPager";
    private static final boolean DEBUG = true;

    private float mLastMotionX;
    private float mLastMotionY;
    private float mTouchSlop;
    private boolean mVerticalDrag;
    private boolean mHorizontalDrag;

    // Vertical transit page transformer
    private final ViewPager.PageTransformer mPageTransformer = new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View view, float position) {
            final int pageWidth = view.getWidth();
            final int pageHeight = view.getHeight();
            if (position < -1) {
                // This page is way off-screen to the left.
                view.setAlpha(0);
            } else if (position <= 1) {
                view.setAlpha(1);
                // Counteract the default slide transition
                view.setTranslationX(pageWidth * -position);
                // set Y position to swipe in from top
                float yPosition = position * pageHeight;
                view.setTranslationY(yPosition);
            } else {
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    };

    public VerticalViewPager(Context context) {
        super(context, null);
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
        init();
    }

    private void init() {
        // Make page transit vertical
        setPageTransformer(true, mPageTransformer);
        // Get rid of the overscroll drawing that happens on the left and right (the ripple)
        setOverScrollMode(View.OVER_SCROLL_NEVER);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        final float x = ev.getX();
        final float y = ev.getY();

        if (DEBUG) Log.v(TAG, "onTouchEvent " + x + ", " + y);

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                mLastMotionX = x;
                mLastMotionY = y;
                if (!super.onTouchEvent(ev))
                    return false;
                return verticalDrag(ev);
            }
            case MotionEvent.ACTION_MOVE: {
                final float xDiff = Math.abs(x - mLastMotionX);
                final float yDiff = Math.abs(y - mLastMotionY);
                if (!mHorizontalDrag && !mVerticalDrag) {
                    if (xDiff > mTouchSlop && xDiff > yDiff) { // Swiping left and right
                        mHorizontalDrag = true;
                    } else if (yDiff > mTouchSlop && yDiff > xDiff) { //Swiping up and down
                        mVerticalDrag = true;
                    }
                }
                if (mHorizontalDrag) {
                    return super.onTouchEvent(ev);
                } else if (mVerticalDrag) {
                    return verticalDrag(ev);
                }
            }
            case MotionEvent.ACTION_UP: {
                if (mHorizontalDrag) {
                    mHorizontalDrag = false;
                    return super.onTouchEvent(ev);
                }
                if (mVerticalDrag) {
                    mVerticalDrag = false;
                    return verticalDrag(ev);
                }
            }
        }
        // Set both flags to false in case user lifted finger in the parent view pager
        mHorizontalDrag = false;
        mVerticalDrag = false;

        return false;
    }


    private boolean verticalDrag(MotionEvent ev) {
        final float x = ev.getX();
        final float y = ev.getY();
        ev.setLocation(y, x);
        return super.onTouchEvent(ev);
    }
}

これは正常に動作しません.. androidソースバージョンでも動作しません..グリッチがあり、右/左ジェスチャーでのみ機能します..上下に動かした場合、スクロールしません..少なくとも私にとっては..
Mohammad Zekrallah


0

これは垂直スクロール可能なViewPager実装です。RecyclerViewとListViewでうまく機能します。guochong / VerticalViewPager

ViewPager.PageTransformerを使用して、ViewPagerを垂直方向にスクロールし、スクロールの競合に対処するためにView.OnTouchListenerを提供します。

/**
 * 1.dispatch ACTION_DOWN,ACTION_UP,ACTION_CANCEL to child<br>
 * 2.hack ACTION_MOVE
 *
 * @param v
 * @param e
 * @return
 */
@Override
public boolean onTouch(View v, MotionEvent e) {
    Log.i(TAG, "onTouchEvent " + ", action " + e.getAction() + ", e.rawY " + e.getRawY() + ",lastMotionY " + lastMotionY + ",downY " + downY);
    switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downY = e.getRawY();
            break;
        case MotionEvent.ACTION_MOVE:

            if (downY == Float.MIN_VALUE && lastMotionY == Float.MIN_VALUE) {
                //not start from MOTION_DOWN, the child dispatch this first motion
                downY = e.getRawY();
                break;
            }

            float diff = e.getRawY() - (lastMotionY == Float.MIN_VALUE ? downY : lastMotionY);
            lastMotionY = e.getRawY();
            diff = diff / 2; //slow down viewpager scroll
            Log.e(TAG, "scrollX " + dummyViewPager.getScrollX() + ",basescrollX " + dummyViewPager.getBaseScrollX());

            if (dummyViewPager.getScrollX() != dummyViewPager.getBaseScrollX()) {
                if (fakeDragVp(v, e, diff)) return true;
            } else {
                if (ViewCompat.canScrollVertically(v, (-diff) > 0 ? 1 : -1)) {
                    Log.e(TAG, "scroll vertically  " + diff + ", move.lastMotionY " + e.getY());
                    break;
                } else {
                    dummyViewPager.beginFakeDrag();
                    fakeDragVp(v, e, diff);
                    adjustDownMotion(v, e);
                    return true;
                }
            }

            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            if (dummyViewPager.isFakeDragging()) {
                try {
                    dummyViewPager.endFakeDrag();
                } catch (Exception e1) {
                    Log.e(TAG, "", e1);
                }
            }
            reset();
            break;
    }

    return false;
}

StackOverflowへようこそ。ご協力いただきありがとうございます。いくつかのコードを追加して、答えをさらに良くしたい場合があります。
エリアスMP

0

XとYを入れ替えてViewPagerを垂直にすることで私も同じ問題に直面していました。まったくスムーズではありませんでした。

これは、スワイプの角度が7.125度未満の場合にのみ機能していたためです。=インターセプト中はarctan(1/8)、タッチ中は14度= arctan(1/4)。スワイプの角度が26.565度未満の場合、元のViewPagerの水平方向の1つが機能するため、インターセプト中に26度= arctan(1/2)、タッチ中に45度= arctan(1)。

そのため、Android support-core-uiのコードをコピーし、値を変数に移動しました。これをリフレクションを使用して乗算しました。

https://github.com/deepakmishra/verticalviewpagerでコードとREADMEを、https://github.com/deepakmishra/verticalviewpager/blob/master/app/src/main/java/com/viewpager/VerticalViewPager でVerticalViewPagerを見つけてください。 .java


0

より良い方法は、ビューページャーを90度回転し、constraintLayoutを使用して位置を調整することです。


0

ここで見たすべてのソリューションに欠陥があるため、垂直方向または水平方向にスクロールできる新しいDirectionalViewPagerを作成しました。

  1. 既存のVerticalViewPager実装(castorflexおよびLambergaRによる)

    • それらは非常に古いサポートライブラリバージョンに基づいています。
  2. 座標スワッピングによる変換トリック

    • オーバースクローラーは依然として左/右端から表示されます。
    • 座標が交換VelocityTracker.computeCurrentVelocityされていても、X軸で速度を計算するため、ページフリングは正しく機能しません。これは、おそらく内部で座標交換を無視するネイティブコールを使用しているためです。
  3. 回転を表示

    • すべての子ビューも回転する必要があるハック。
    • 他の座標を読みたい場合は、軸を交換する必要があります。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.