背景
iOS很早就有系统级别的放大镜控件供开发者使用,Android在9版本(API 级别 28)中也提供了放大镜微件的使用。
放大镜微件(Magnifier )是一个虚拟放大镜,通过代表镜头的叠加窗格来显示所选视图的放大副本。此功能可改善文本插入和选择方面的用户体验:将放大镜应用于文本时,用户可以通过查看窗格内随其手指移动的放大文本来精确定位光标或选择手柄。
效果如下:
当前官方放大镜已与 TextView、EditText 或 WebView 等平台微件集成。它可在各种应用上提供一致的文本操纵体验。该微件附带一个简单的 API,可用于根据应用的上下文放大任何 View。
官方文档地址:放大镜微件
今天我们在应用中实现放大镜微件功能。
首先咱研究最早的API 28的版本。
API 28版本
在这个初始版本里,我们使用放大镜时能配置的内容比较少。
我们可以直接设置放大镜:
View view = findViewById(R.id.view);
Magnifier magnifier = new Magnifier(view);
magnifier.show(view.getWidth() / 2, view.getHeight() / 2);
根据官方文档描述,此代码就为view设置了一个放大镜,在执行代码时就会显示。但是我是用了这段代码后发现放大镜并没有显示(原因先不研究吧)。
根据代码看,上面是在固定的位置显示一个放大镜,这显然不符合我们的诉求。我们要的放大镜是要跟随手势移动并不断刷新显示内容的。
这时候就需要监听手势触摸操作了。我封装了一个方法实现:
/**
* 设置放大镜显示
* @param view 触摸显示放大镜的view
*/
@SuppressLint("ClickableViewAccessibility")
private void setMagnifier(View view) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
Magnifier magnifier = new Magnifier(view);
view.setOnTouchListener((v, event) -> {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
final int[] viewPosition = new int[2];
v.getLocationOnScreen(viewPosition);
magnifier.show(event.getRawX() - viewPosition[0], event.getRawY() - viewPosition[1]);
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
magnifier.dismiss();
break;
}
return true;
});
}
}
然后初始化时对应的view调用该方法即可:
setMagnifier(mSTvShiciContent);
setMagnifier(mTvShiciAuthor);
此时按压对应的view,就会出现文章最开始显示的放大镜效果了。
效果实现了,但是我们发现针对于放大镜我们可配置功能很少,包括:效果只能是这种默认长方形、放大倍数等均不可调。
我希望最终实现类似于iOS的原型放大镜效果,这个功能在API 29的版本实现了。
下面我们研究一下基于API 29的定义实现。
API 29版本
在API 29中,系统新增了Magnifier.Builder构造方法,可以通过该构造方法配置放大镜的显示效果:
@SuppressLint("ClickableViewAccessibility")
private void setMagnifier(View view) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
Magnifier.Builder builder = new Magnifier.Builder(view);
builder.setOverlay(ContextCompat.getDrawable(this, R.drawable.magnifier));//设置覆盖物
builder.setInitialZoom(2);//设置初始放大倍数,与Magnifier的setZoom功能相同
builder.setCornerRadius(100); //设置圆角:0-100
builder.setClippingEnabled(false);//false时放大镜可以滑到手机屏幕外;true时放大镜只能再屏幕内滑动。
builder.setSize(180, 180);//设置放大镜宽高
Magnifier magnifier = builder.build();
magnifier.setZoom(2); //设置放大倍数:
view.setOnTouchListener((v, event) -> {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
// Fall through.
case MotionEvent.ACTION_MOVE: {
final int[] viewPosition = new int[2];
v.getLocationOnScreen(viewPosition);
magnifier.show(event.getRawX() - viewPosition[0], event.getRawY() - viewPosition[1]);
break;
}
case MotionEvent.ACTION_CANCEL:
// Fall through.
case MotionEvent.ACTION_UP: {
magnifier.dismiss();
}
}
return true;
});
}
}
}
如以上代码中描述,可以通过:
setOverlay设置放大镜的覆盖物,此时覆盖物可以是一个透明的放大镜边框。
setInitialZoom与setZoom都是设置放大倍数,都设置的话,以后者为准。倍数大于0.经实测在0-3体验较好,再大就只能看到很少的数据。 setCornerRadius设置放大镜圆角,取值0-100,大于100时与100相同。
setSize用于设置放大镜的宽高。
以上代码最终效果如下:
效果基本与iOS保持一致了。
以上代码请参考,源码可访问睡眠助理。
网友评论