在ViewPager上添加左右箭头指示器

23
我想在我的ViewPager上方显示左右箭头,以指示滑动。
我在ViewPager元素上添加了两个ImageButtons,但这些区域会阻止ViewPager触发“滑动”。
我还希望按下这些箭头可以相应地改变片段。
简而言之:ImageButtons不应干扰滑动,但应该注册按压操作。
如何实现此目标? 谢谢!
5个回答

47

以下代码对我来说完美地运行了。 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);
        }
    });

输出

在此输入图片描述


1
完美解决方案 - Pamela Sillah

17

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

简而言之,按照以下两个简单步骤操作:

  1. 实现两个ImageViews/ImageButtons/Buttons用于左右箭头。
  2. 单击它们时,调用:

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

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


太好了!非常感谢 :D - Rohan Taneja
如果它能够正常工作,这是一种简单的方法,但arrowScroll()并不是设计用于无条件地向左/右翻页。它应该向左/右移动焦点,并且只有在到达焦点链的末尾时才会向左/右翻页。因此,如果屏幕上有可聚焦的视图,则可能以令人困惑的方式失败。请参见https://stackoverflow.com/a/57679214/423105了解问题,以及@Christopher的答案以获得向左/右翻页的强大方法。 - LarsH

10

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

谢谢您也添加了切换可见性。这也非常有用。 - Florinache

4

为了显示箭头,我现在使用ImageViews而不是ImageButtons,因为它们可以将任何触摸事件传递到下层图层。

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


1
你好!我想知道你是如何使用哪些箭头来显示 ImageViews 的,能否详细说明一下?我也想在我的项目中实现同样的效果。谢谢! - w_lpz
嗨!不太确定我理解问题的意思:) 我是用Photoshop设计的箭头。 - daglundberg
好的,有没有特定的图像格式(jpeg、png、bmp等)需要处理? - w_lpz
太棒了!还有一个问题,你在回答中写的最后一段是为了使箭头能够通过点击切换页面,对吗? - w_lpz
1
没问题!请随意。 - daglundberg
显示剩余2条评论

1
首先将相对布局作为您的父布局。
其次,在其中添加视图分页器,并在其上使用match parent属性。
第三,在父布局的层次结构下,将两个图像按钮放置在视图分页器上方,将它们的重心设置为垂直居中,并根据需要将它们的侧面保持在右侧和左侧。
第四,为按钮编写功能代码。
第五,获取当前视图分页器页面的静态计数器。
在左右按钮上,设置减去和加上视图分页器计数器,然后根据此显示视图分页器中的数据。
这是简单的代码逻辑,您可以在Google上搜索并轻松获得它。

你能简要地解释一下“干扰”的意思吗?你想通过点击按钮来更改页面吗? - Android is everything for me
当我用手指在其中一个ImageButtons上开始滑动时,ViewPager不会注册滑动。如果不清楚,很抱歉! - daglundberg
不会,那会有什么区别吗? - daglundberg
@Androidiseverythingforme,我和上面的人有类似的问题:http://stackoverflow.com/questions/26262806/onclicklistener-is-not-detected-using-viewpager-and-pageradapter - Kala J
对于仍然感兴趣的人:也可以查看此链接:https://github.com/sembozdemir/ViewPagerArrowIndicator - CDrosos
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接