ViewPager上的左右箭头指示器

Question

我想在我的ViewPager上显示左右箭头,表示滑动.

我在ViewPager元素上添加了两个ImageButton,但这些区域阻止ViewPager触发"滑动".

我也希望按下这些箭头来触发片段相应地改变.

简而言之:ImageButtons不应干扰滑动,但应注册按下.

我怎样才能做到这一点？谢谢!

Answer 1

下面的代码非常适合我. 注意:使用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);
        }
    });

产量

Answer 2

无需为此管理当前索引或手动处理任何滑动.只需viewPager.arrowScroll(int direction)在左右箭头的点击事件上调用方法方法即可.

简而言之,请遵循以下两个简单步骤:

1. 为左右箭头实现2个ImageViews/ImageButtons/Buttons.

2. 点击它们,请致电:

   a)如果点击左箭头 - viewPager.arrowScroll(View.FOCUS_LEFT);

   b)如果点击右箭头 - viewPager.arrowScroll(View.FOCUS_RIGHT);

Answer 3

在片段中实现左右箭头按钮.然后在您的活动中注册他们的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);
}

Answer 4

我现在使用 ImageView，而不是使用 ImageButtons 来显示箭头，因为它们将任何触摸事件传递到下面的层。

然后，我将透明按钮放在片段本身上，这样它们就不会阻止 ViewPagers 滑动行为，但会触发 onClick 事件！