web-dev-qa-db-ja.com

Android ViewPager-左右にページのプレビューを表示

AndroidのViewPagerを使用しています。私がやりたいのは、ページのプレビューを左と右の両方に表示することです。負のpageMarginを使用して右側のプレビューを表示できる場所を見てきました。

setPageMargin(-100);

とにかく、左側のプレビューも表示できますか？基本的には、探しているギャラリーウィジェットに似ています。

androidandroid-viewpager
93
Brian Boyle

左右のページのプレビューを表示するには、次の2つの値を設定します

  1. viewpager.setClipToPadding(false);
  2. viewpager.setPadding(left,0,right,0);

ビューページャーの2つのページ間にスペースが必要な場合は、追加します

viewpager.setPageMargin(int);
192
Jiju Induchoodan

@JijuInduchoodanの答えは完璧で、うまく機能しています。ただし、私はAndroidに比較的慣れていないため、適切に理解して設定するのに時間がかかりました。したがって、今後の参考のためにこの回答を投稿し、私と同じ靴を履いている他の人を助けます。

if (viewPager == null) 
        {

            // Initializing view pager
            viewPager = (ViewPager) findViewById(R.id.vpLookBook);

            // Disable clip to padding
            viewPager.setClipToPadding(false);
            // set padding manually, the more you set the padding the more you see of prev & next page
            viewPager.setPadding(40, 0, 40, 0);
            // sets a margin b/w individual pages to ensure that there is a gap b/w them
            viewPager.setPageMargin(20);
        }

アダプターのViewPager'sページに幅を設定する必要はありません。 ViewPagerの前のページと次のページを表示するために追加のコードは必要ありません。ただし、各ページの上部と下部に空白を追加する場合は、次のコードをViewPager's子ページの親レイアウトに設定できます。

Android:paddingTop="20dp"
Android:paddingBottom="20dp"

Final ViewPager

これがViewPagerの最終的な外観になります。

68
Rohan Kandwal

2017年には、RecyclerViewを PagerSnapHelper （v7サポートライブラリのバージョン25.1.0で追加）を使用して簡単に実現できます：

enter image description here

少し前に、このようなビューページャーのような機能が必要になり、小さなライブラリを準備しました。

MetalRecyclerPagerView -すべてのコードとその例があります。

主に単一のクラスファイルで構成されます： MetalRecyclerViewPager.Java （および2つのxml： attrs.xml および ids.xml ）。

それが誰かを助け、いくつかの時間を節約することを願っています:)

24
Alexander Bilchuk

誰かがまだ解決策を探している場合、負のマージンを使用せずにそれを達成するためにViewPageをカスタマイズし、ここでサンプルプロジェクトを見つけました https://github.com/44kksharma/Android-ViewPager-Carousel-UI itほとんどの場合は機能するはずですが、mPager.setPageMargin(margin in pixel);を使用してページマージンを定義できます

9
44kksharma

ビューページャーにゼロパディングを設定しないと、ビューページャーのエッジ効果の配置が乱れます。これはビューページャーのバグです。ここを参照してください： viewpager edgeeffect bug

Android:overScrollMode="never"をビューページャーに設定してEdge効果を無効にするか、EdgeEffectクラスのわずかに変更したバージョンでバグを修正できます： ViewPagerEdgeEffect fix

0
ssynhtn

以下のコードを使用するだけで、xmlファイルでこれを実行できます。

 Android:clipToPadding="false"
 Android:paddingLeft="XX"
 Android:paddingRight="XX"

例えば：

<androidx.viewpager.widget.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:clipToPadding="false"
        Android:paddingLeft="30dp"
        Android:paddingRight="30dp" />

注：ページ間にスペースが必要な場合は、パディング/マージンを子フラグメントに設定してください

0
sma6871

これをさまざまな画面で表示するのに苦労している人のために、

mPager.setClipToPadding(false);
DisplayMetrics displayMetrics = new DisplayMetrics();
self.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int paddingToSet = width/4; //set this ratio according to how much of the next and previos screen you want to show.
mPager.setPadding(paddingToSet,0,paddingToSet,0);
0
Saurabh Verma