Curtain
Introduction: 一个 Android 高亮 View 蒙层库
Tags:
一个更简洁好用的高亮蒙层库：
- 一行代码完成某个 View,或者多个 View 的高亮展示
- 支持基于 AapterView(如 ListView、GridView) 和 RecyclerView 的 item 以及 item 中元素的高亮
- 自动识别圆角背景,也可以自定义高亮形状
- 高亮区域支持自定义大小、操作灵活
- 顺应变化,基于 Android X
配置简单，导入方便
Installation：
dependencies {
implementation 'com.github.soulqw:Curtain:0.3.0'
}
Usage：
仅仅是高亮某个 View
private void showCurtain(){ new Curtain(MainActivity.this) .with(findViewById(R.id.textView)) .show(); }
如果你希望那个 view 的蒙层区域更大一些:
private void showCurtain(){
new Curtain(MainActivity.this)
.with(findViewById(R.id.textView))
.withPadding(findViewById(R.id.textView),Padding.all(10))
.show();
}
- 也可以同时高亮多个 View:
private void showCurtain(){
new Curtain(MainActivity.this)
.with(findViewById(R.id.textView))
.with(findViewById(R.id.imageView))
.show();
}
- 如果你在蒙层上加上一些其他的元素,可以额外传入 View 布局:
private void showCurtain(){
new Curtain(MainActivity.this)
.with(findViewById(R.id.textView))
.setTopView(R.layout.nav_header_main)
.show();
}
- 如果你想监听蒙层的展示或者消失的回调:
private void showCurtain(){
new Curtain(MainActivity.this)
.with(findViewById(R.id.imageView))
.setCallBack(new Curtain.CallBack() {
@Override
public void onShow(IGuide iGuide) {
}
@Override
public void onDismiss(IGuide iGuide) {
}
}).show();
}
- 默认会识别 View 的背景而生成相关高亮区域的形状,也可以自定形状:
private void showThirdGuide() {
new Curtain(SimpleGuideActivity.this)
.with(findViewById(R.id.btn_shape_custom))
//圆角
.withShape(findViewById(R.id.btn_shape_custom), new RoundShape(12))
//椭圆形
// .withShape(findViewById(R.id.btn_shape_custom),new CircleShape())
// 也可继承自 Shape 自己实现形状
// .withShape(findViewById(R.id.btn_shape_custom), new Shape() {
// @Override
// public void drawShape(Canvas canvas, Paint paint, HollowInfo info) {
//draw your shape here
// }
// })
.show();
}
在 ListView 或者 GridView 中使用:
/** * 高亮 item */ private void showGuideInItem() { View item1 = ViewGetter.getFromAdapterView(listView, 5); View item2 = ViewGetter.getFromAdapterView(listView, 2); //如果你的 View 的位置不在屏幕中，返回值为 null 需要判空处理 if (null == item1 || null == item2) { return; } new Curtain(this) .with(item1) .with(item2) .show(); } /** * 高亮 item 中的元素 */ private void showGuideInItemChild() { View item1 = ViewGetter.getFromAdapterView(listView, 1); View item2 = ViewGetter.getFromAdapterView(listView, 3); //如果你的 View 的位置不在屏幕中，返回值为 null 需要判空处理 if (null == item1 || null == item2) { return; } new Curtain(this) .withShape(item1.findViewById(R.id.image), new CircleShape()) .with(item2.findViewById(R.id.tv_text)) .show(); }效果:
- 其他一些功能介绍:
private void showInitGuide() {
new Curtain(SimpleGuideActivity.this)
.with(findViewById(R.id.iv_guide_first))
.with(findViewById(R.id.btn_shape_circle))
.with(findViewById(R.id.btn_shape_custom))
//自定义高亮形状
.withShape(findViewById(R.id.btn_shape_custom), new RoundShape(12))
//自定义高亮形状的 Padding
// .withPadding(findViewById(R.id.btn_shape_custom), Padding.only(30,20))
.withPadding(findViewById(R.id.btn_shape_custom), Padding.all(10))
.setTopView(R.layout.view_guide_1)
// .setNoCurtainAnimation(true)
//如果你希望高亮的目标 View 仍然可以响应 touch 事件的话(默认 true)
.setInterceptTargetView(false)
//如果你不希望 Curtain 拦截蒙层之下的事件的话(默认 true)
// .setInterceptTouchEvent(false)
//add onclick listener in the top view
.addOnTopViewClickListener(R.id.tv_i_know, new OnViewInTopClickListener<IGuide>() {
@Override
public void onClick(View current, IGuide currentHost) {
//close the
currentHost.dismissGuide();
}
})
.show();
}
CurtainFlow
如果你想按照一定的顺序去高亮一些列的 View,可以方便的管理前进后退,减少方法的嵌套的场景下推荐使用:
- 仅仅需要按照步骤的 Id,和构建你想要高亮的 Curtain 对象,统一交给 CurtianFlow 来处理
private void showInitGuide() {
new CurtainFlow.Builder()
.with(ID_STEP_1, getStepOneGuide())
.with(ID_STEP_2, getStepTwoGuide())
.with(ID_STEP_3, getStepThreeGuide())
.create()
.start(new CurtainFlow.CallBack() {
@Override
public void onProcess(int currentId, final CurtainFlowInterface curtainFlow) {
switch (currentId) {
case ID_STEP_2:
//回到上个
curtainFlow.findViewInCurrentCurtain(R.id.tv_to_last)
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
curtainFlow.pop();
}
});
break;
case ID_STEP_3:
curtainFlow.findViewInCurrentCurtain(R.id.tv_to_last)
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
curtainFlow.pop();
}
});
//重新来一遍，即回到第一步
curtainFlow.findViewInCurrentCurtain(R.id.tv_retry)
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
curtainFlow.toCurtainById(ID_STEP_1);
}
});
break;
}
//去下一个
curtainFlow.findViewInCurrentCurtain(R.id.tv_to_next)
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
curtainFlow.push();
}
});
}
});
}
2.效果
- APi 细节上可以参考 Demo
