web-dev-qa-db-ja.com

ViewPager上の左右矢印インジケーター

スワイプを示すために、ViewPagerの上に左矢印と右矢印を表示したいと思います。

2つのImageButtonをViewPager要素の上に追加しましたが、それらの領域はViewPagerが「スワイプ」をトリガーするのをブロックします。

また、これらの矢印を押してフラグメントをトリガーし、それに応じて変化させます。

つまり、ImageButtonはスワイプを妨げるべきではありませんが、押すことを登録する必要があります。

どうすればこれを達成できますか？ありがとう！

androidandroid-viewpagerswipe
18
Daggepagge

私は解決策を見つけました。とても簡単です。

矢印の表示にImageButtonsを使用する代わりに、ImageViewsを使用します。これは、タッチイベントを下のレイヤーに渡すためです。

次に、代わりにフラグメント自体に透明なボタンを配置します。これにより、ViewPagersのスワイプ動作はブロックされませんが、onClickイベントが発生します。

4
Daggepagge

以下のコードは完全にうまく機能しました。 注：重複するビューを許可するため、FrameLayoutを使用してください

        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="wrap_content"
                Android:layout_height="200dp" />

            <ImageButton
                Android:id="@+id/left_nav"
                Android:layout_width="48dp"
                Android:layout_height="48dp"
                Android:layout_gravity="center_vertical|left"
                Android:src="@drawable/ic_chevron_left_black_24dp" />

            <ImageButton
                Android:id="@+id/right_nav"
                Android:layout_width="48dp"
                Android:layout_height="48dp"
                Android:layout_gravity="center_vertical|right"
                Android:src="@drawable/ic_chevron_right_black_24dp" />

        </FrameLayout>

ImageButtonのクリックイベントを処理するために使用した次の部分

viewPager = (ViewPager) view.findViewById(R.id.viewpager);

leftNav = (ImageButton) view.findViewById(R.id.left_nav);
rightNav = (ImageButton) view.findViewById(R.id.right_nav);

// Images left navigation
    leftNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            if (tab > 0) {
                tab--;
                viewPager.setCurrentItem(tab);
            } else if (tab == 0) {
                viewPager.setCurrentItem(tab);
            }
        }
    });

    // Images right navigatin
    rightNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            tab++;
            viewPager.setCurrentItem(tab);
        }
    });

出力

enter image description here

39
Christopher Kikoti

このために現在のインデックスを管理したり、スワイプを手動で処理したりする必要はありません。左矢印と右矢印のクリックイベントでメソッドviewPager.arrowScroll(int direction)メソッドを呼び出すだけです。

簡単に言えば、次の2つの簡単な手順に従います。

  1. 左矢印と右矢印に2つのImageViews/ImageButtons/Buttonsを実装します。

  2. それらをクリックすると、呼び出します：

    a）左矢印がクリックされた場合-viewPager.arrowScroll(View.FOCUS_LEFT);

    b）右矢印がクリックされた場合-viewPager.arrowScroll(View.FOCUS_RIGHT);

13
Keshav Bansal

フラグメントに左矢印ボタンと右矢印ボタンを実装します。次に、アクティビティにonClickを登録し、viewpagerのarrowScrollメソッドを呼び出して、viewPagerをプログラムでスクロールします。

public void onRightClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_RIGHT);
}

public void onLeftClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_LEFT);
}

フラグメントの左矢印/右矢印の表示を切り替えるメソッドを作成します。

public void toggleArrowVisibility(boolean isAtZeroIndex, boolean isAtLastIndex) {
    if(isAtZeroIndex)
        leftBtn.setVisibility(View.INVISIBLE);
    else
        leftBtn.setVisibility(View.VISIBLE);
    if(isAtLastIndex)
        rightBtn.setVisibility(View.INVISIBLE);
    else
        rightBtn.setVisibility(View.VISIBLE);

}

次に、ViewPager.OnPageChangeListenerをアクティビティに実装します。 SmartFragmentStatePagerAdapter を使用して、メモリに登録されたフラグメントを追跡します。

@Override
public void onPageSelected(int position) {
    MyFragment fragment = (MyFragment) smartAdapter.getRegisteredFragment(position);
    fragment.toggleArrowVisibility(position == 0, position == list.size() - 1);
}
8
Salil Dhawan

最初に相対レイアウトを親レイアウトとして使用します

2番目に、それに一致する親属性を持つビューページャーを追加します

3つ目は、ビューページャー上に2つの画像ボタンを配置しますが、親レイアウトの階層の下で、それらを重力として垂直に中央に配置し、要件に応じて左右を左右に保ちます。

4番目に、ボタンの関数コードを記述します

5番目は、現在のビューページャーページを取得するために静的カウンターを取る

左と右のボタンセットのマイナスとプラスのページャーカウンターの応答。そしてそれに従ってビューページャーでデータを表示します

これは、Googleで検索できるコードのシンプルなロジックで、簡単に取得できます

1
Android is everything for me