ViewPager上的左右箭头指示器

时间:2014-08-06 09:43:55

标签: android android-viewpager swipe

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

我在ViewPager元素上添加了两个ImageButtons,但这些区域阻止了ViewPager触发“滑动”。

我也希望按下这些箭头来触发片段相应的更改。

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

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

5 个答案:

答案 0 :(得分:32)

下面的代码非常适合我。 NB:使用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

答案 1 :(得分:11)

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

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

  1. 为左右箭头实现2个ImageViews / ImageButtons / Buttons。
  2. 点击它们后,请致电:

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

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

答案 2 :(得分:5)

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

答案 3 :(得分:4)

我找到了解决方案。这很简单。

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

然后,我在片段上放置透明按钮,这样他们就不会阻止ViewPagers的滑动行为,但是它们会触发onClick事件!

答案 4 :(得分:1)

首先使用相对布局作为父布局

然后在其中添加视图寻呼机,并在其上添加匹配父属性

第三个在视图寻呼机上取两个图像按钮,但在父布局的层次结构下 将它们作为重力垂直放置,并根据您的要求保持其左右一侧

按钮的第四个写功能代码

第五次采取静态计数器获取当前视图寻呼机页面

左右按钮设置减去加上视图寻呼机计数器。并根据该视图寻呼机显示数据

这是代码的简单逻辑,你可以在google上搜索它,你很容易得到它