Curtain
一个更简洁好用的高亮蒙层库:
- 一行代码完成某个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