轻松浏览页面(点击左/右):Android中的自定义视图器
#android #ux #ui #viewpager

介绍

Android提供了一系列组件,使开发人员可以创建引人入胜且直观的用户界面。一个这样的组件是ViewPager,这是一个布局管理器,它允许用户翻阅数据页,类似于在书页面上滑动。但是,如果我们可以使此导航更加直观怎么办?如果简单的水龙头可以运输您的页面怎么办?在此博客文章中,我们将探讨如何创建一个自定义视图器,以响应页面导航的单tap事件。

目的

Android中的传统视图器响应在页面之间移动的滑动手势。但是,在某些情况下,您需要更简单的互动,例如一次点击。我们在这里的目标是创建一个自定义视图器,以响应单打事件。在屏幕的左半部分点击将将用户带到上一页,而右半导航到下一页。

如何实现这一目标

为了实现这一目标,我们将扩展默认的ViewPager类并自定义以处理所需的TAP事件。这涉及使用Android的姿态,这将使我们能够聆听单tap事件并做出相应的响应。

代码样本

这是Java中自定义查看点的示例代码:

import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import androidx.viewpager.widget.ViewPager;
import java.util.Objects;

public class CustomViewPager extends ViewPager {
    private GestureDetector gestureDetector;

    public CustomViewPager(Context context) {
        super(context);
        init(context);
    }

    public CustomViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onSingleTapConfirmed(MotionEvent e) {
                float halfWidth = getWidth() / 2.0f;
                if (e.getX() < halfWidth) {
                    if (getCurrentItem() > 0) {
                        setCurrentItem(getCurrentItem() - 1, true);
                    }
                } else {
                    if (getCurrentItem() < Objects.requireNonNull(getAdapter()).getCount() - 1) {
                        setCurrentItem(getCurrentItem() + 1, true);
                    }
                }
                performClick();
                return super.onSingleTapConfirmed(e);
            }
        });
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        performClick();
        gestureDetector.onTouchEvent(ev);
        return super.onTouchEvent(ev);
    }

    @Override
    public boolean performClick() {
        return super.performClick();
    }
}

代码分解

CustomViewPager类扩展了默认的ViewPager,并通过覆盖某些方法并添加chesturedetector来修改其行为。设置了姿态材料以检测单次击中事件,并基于TAP的位置(屏幕的左或右半),分别导航到上一页或下一页。这是在两个构造函数中称为init()方法中完成的。

onTouchEvent()被覆盖,以确保每个触摸事件也发送给了姿势,并执行点击操作以供其他组件或可访问性服务使用。

如何使用自定义查看点

与任何其他视图组件一样,可以在应用程序中使用自定义视图器。这是有关如何做的指南:

java

首先,您需要在活动中创建一个customViewPager的实例,并为其设置一个适配器:

CustomViewPager customViewPager = new CustomViewPager(this);
PagerAdapter adapter = new CustomPagerAdapter(); // This should be your custom PagerAdapter
customViewPager.setAdapter(adapter);

setContentView(customViewPager);

您还可以获取当前项目,并以编程方式设置当前项目:

int currentItem = customViewPager.getCurrentItem();
customViewPager.setCurrentItem(currentItem + 1, true); 

xml

另外,您可以在布局XML文件中声明CustomViewPager并在活动中引用它:

<com.example.yourapp.CustomViewPager
    android:id="@+id/customViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后,在您的活动中:

CustomViewPager customViewPager = (CustomViewPager) findViewById(R.id.customViewPager);
PagerAdapter adapter = new CustomPagerAdapter(); // This should be your custom PagerAdapter
customViewPager.setAdapter(adapter);

请记住,为了使ViewPager显示任何内容,您需要为其设置一个PagerAdapter,以提供代表每个页面的视图。

另外,请在XML使用中替换为您的实际软件包名称。

用例

自定义视图器非常适合用户更喜欢最少的手动移动或在页面上找到不便的应用程序。对于针对具有可访问性需求的用户的应用程序,它也可能是有益的,因为单tap导航可能更容易使用。例如,在数字图书阅读应用程序中,这将允许用户单点轻按页面在页面之间导航,从而模仿两侧翻转书页的行为。

结论

增强用户体验是Android开发的关键方面。通过自定义视图器来响应单tap事件,我们可以使通过应用程序页面进行导航更加容易,更直观。虽然这篇文章着重于单次录像事件,但Android的姿态eTector提供了广泛的手势检测功能,开发人员可以利用这些功能来构建引人入胜且用户友好的接口。

文档参考

  1. ViewPager | Android Developers
  2. GestureDetector | Android Developers
  3. MotionEvent | Android Developers
  4. Building a Custom Component | Android Developers

记住,代码只是满足用户需求的工具。通过了解您的用户并根据其偏好调整代码,您可以构建一个真正突出的应用程序。愉快的编码!