引入第三方依赖 implementation ‘com.isanwenyu.highlight:highlight:1.8.0’
MainActivity2
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.oplayer.orunningplus.R;
import zhy.com.highlight.HighLight;
import zhy.com.highlight.interfaces.HighLightInterface;
import zhy.com.highlight.position.OnBottomPosCallback;
import zhy.com.highlight.position.OnLeftPosCallback;
import zhy.com.highlight.position.OnRightPosCallback;
import zhy.com.highlight.shape.CircleLightShape;
import zhy.com.highlight.shape.OvalLightShape;
import zhy.com.highlight.shape.RectLightShape;
import zhy.com.highlight.view.HightLightView;
public class MainActivity2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
showNextTipViewOnCreated();
}
HighLight mHightLight;
/**
* 显示 next模式 我知道了提示高亮布局
* @param view id为R.id.iv_known的控件
* @author isanwenyu@163.com
*/
public void showNextKnownTipView(View view) {
mHightLight = new HighLight(MainActivity2.this)//
.autoRemove(false)//设置背景点击高亮布局自动移除为false 默认为true
// .intercept(false)//设置拦截属性为false 高亮布局不影响后面布局的滑动效果
.intercept(true)//拦截属性默认为true 使下方ClickCallback生效
//.enableNext()//开启next模式并通过show方法显示 然后通过调用next()方法切换到下一个提示布局,直到移除自身
.setClickCallback(new HighLight.OnClickCallback() {
@Override
public void onClick() {
Toast.makeText(MainActivity2.this, "clicked and remove HightLight view by yourself", Toast.LENGTH_SHORT).show();
// mHightLight.next();
}
})
// .anchor(findViewById(R.id.id_container))//如果是Activity上增加引导层,不需要设置anchor
.addHighLight(R.id.rl_smartWatch_novel,R.layout.activity_main2,new OnLeftPosCallback(45),new RectLightShape(0,0,15,0,0)) //矩形去除圆角
.addHighLight(R.id.rl_smartWatch_novel,R.layout.info_known,new OnBottomPosCallback(100),new RectLightShape(0,0,15,0,0)) ;
mHightLight.show();
}
/**
* 响应所有R.id.iv_known的控件的点击事件
* <p>
* 移除高亮布局
* </p>
*
* @param view
*/
public void clickKnown(View view)
{
Toast.makeText(MainActivity2.this, "clicked and show next tip vie", Toast.LENGTH_SHORT).show();
if(mHightLight.isShowing() && mHightLight.isNext())//如果开启next模式
{
//mHightLight.next();
Toast.makeText(MainActivity2.this, "clicked and show next tip vie", Toast.LENGTH_SHORT).show();
}else
{
// remove(null);
}
}
public void clickKnown2(View view)
{
Toast.makeText(MainActivity2.this, "clicked and show next tip vie22", Toast.LENGTH_SHORT).show();
if(mHightLight.isShowing() && mHightLight.isNext())//如果开启next模式
{
//mHightLight.next();
Toast.makeText(MainActivity2.this, "clicked and show next tip vie", Toast.LENGTH_SHORT).show();
}else
{
// remove(null);
}
}
/**
* 下一个回调监听 只有Next模式下生效
*/
public static interface OnNextCallback extends HighLightInterface.OnNextCallback {
/**
* 监听下一步动作
*
* @param hightLightView 高亮布局控件
* @param targetView 高亮目标控件
* @param tipView 高亮提示控件
*/
void onNext(HightLightView hightLightView, View targetView, View tipView);
}
/**
* 当界面布局完成显示next模式提示布局
* 显示方法必须在onLayouted中调用
* 适用于Activity及Fragment中使用
* 可以直接在onCreated方法中调用
* @author isanwenyu@163.com
*/
public void showNextTipViewOnCreated(){
mHightLight = new HighLight(MainActivity2.this)//
//.anchor(findViewById(R.id.id_container))//如果是Activity上增加引导层,不需要设置anchor
.autoRemove(false)
//.enableNext()
.setOnLayoutCallback(new HighLightInterface.OnLayoutCallback() {
@Override
public void onLayouted() {
//mAnchor界面布局完成添加tipview
// mHightLight.addHighLight(R.id.btn_rightLight,R.layout.info_gravity_left_down,new OnLeftPosCallback(45),new RectLightShape())
// .addHighLight(R.id.btn_light,R.layout.info_gravity_left_down,new OnRightPosCallback(5),new CircleLightShape())
// .addHighLight(R.id.btn_bottomLight,R.layout.info_gravity_left_down,new OnTopPosCallback(),new CircleLightShape());
mHightLight.addHighLight(R.id.rl_smartWatch_novel,R.layout.activity_main2,new OnLeftPosCallback(45),new RectLightShape(0,0,15,0,0)) //矩形去除圆角
.addHighLight(R.id.rl_smartWatch_novel,R.layout.info_known,new OnBottomPosCallback(100),new RectLightShape(0,0,15,0,0)) ;
//然后显示高亮布局
mHightLight.show();
}
})
.setClickCallback(new HighLight.OnClickCallback() {
@Override
public void onClick() {
Toast.makeText(MainActivity2.this, "clicked and show next tip view by yourself", Toast.LENGTH_SHORT).show();
mHightLight.next();
}
});
}
/**
* 显示我知道了提示高亮布局
* @param view id为R.id.iv_known的控件
* @author isanwenyu@163.com
*/
public void showKnownTipView(View view) {
mHightLight = new HighLight(MainActivity2.this)//
.autoRemove(false)//设置背景点击高亮布局自动移除为false 默认为true
.intercept(false)//设置拦截属性为false 高亮布局不影响后面布局的滑动效果 而且使下方点击回调失效
.setClickCallback(new HighLight.OnClickCallback() {
@Override
public void onClick() {
Toast.makeText(MainActivity2.this, "clicked and remove HightLight view by yourself", Toast.LENGTH_SHORT).show();
// remove(null);
}
})
// .anchor(findViewById(R.id.id_container))//如果是Activity上增加引导层,不需要设置anchor
.anchor(findViewById(R.id.id_container))//如果是Activity上增加引导层,不需要设置anchor
.addHighLight(R.id.btn_rightLight,R.layout.info_down,new OnLeftPosCallback(45),new RectLightShape())
.addHighLight(R.id.btn_light,R.layout.info_down,new OnRightPosCallback(5),new CircleLightShape(0,0,0))
// .addHighLight(R.id.btn_bottomLight,R.layout.info_down,new OnTopPosCallback(),new CircleLightShape())
.addHighLight(view,R.layout.info_down,new OnBottomPosCallback(10),new OvalLightShape(5,5,20));
mHightLight.show();
// //added by isanwenyu@163.com 设置监听器只有最后一个添加到HightLightView的knownView响应了事件
// //优化方案:在布局中声明onClick方法 {@link #clickKnown(view)}响应所有R.id.iv_known的控件的点击事件
// View decorLayout = mHightLight.getHightLightView();
// ImageView knownView = (ImageView) decorLayout.findViewById(R.id.iv_known);
// knownView.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View view) {
remove(null);
// Toast.makeText(MainActivity2.this, "clicked and remove", Toast.LENGTH_SHORT).show();
//
// }
// });
}
}```
```xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_container">
<Button
android:id="@+id/btn_show_known_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:onClick="showKnownTipView"
android:text="showKnownTip" />
<Button
android:id="@+id/btn_show_next_known_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btn_show_known_tip"
android:layout_alignParentLeft="true"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:onClick="showNextKnownTipView"
android:text="showNextKnownTip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="250dp"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_settings_disconn_novel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_below="@+id/rl_name_novel"
android:layout_marginLeft="5dp"
android:layout_marginTop="1dp"
android:layout_marginRight="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_settings_disconn_novel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:src="@mipmap/today_connect" />
<com.oplayer.orunningplus.view.them.ThemeTextView
android:id="@+id/tv_settings_disconn_novel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="30dp"
android:layout_toEndOf="@+id/iv_settings_disconn_novel"
android:gravity="center_vertical"
android:text="@string/settings_disconn"
app:textFont="3"
app:textSize="18" />
<ImageView
android:id="@+id/iv_arrow_disconn_novel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_marginEnd="5dp"
android:src="@mipmap/settings_arrow" />
<include layout="@layout/layout_line" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_smartWatch_novel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_below="@+id/rl_name_novel"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_icon_smartWatch_novel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:src="@mipmap/settings_smartwatchsettings" />
<com.oplayer.orunningplus.view.them.ThemeTextView
android:id="@+id/tv_smartWatch_novel_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="30dp"
android:layout_toEndOf="@+id/iv_icon_smartWatch_novel"
android:gravity="center_vertical"
android:text="@string/newTypeSetting_smartWatch"
app:textFont="3"
app:textSize="18" />
<ImageView
android:id="@+id/iv__smartWatch_novelarrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_marginEnd="5dp"
android:src="@mipmap/settings_arrow" />
<include layout="@layout/layout_line" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_activityWellness_novel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_below="@+id/rl_smartWatch_novel"
android:layout_marginLeft="5dp"
android:layout_marginTop="1dp"
android:layout_marginRight="5dp"
android:orientation="vertical"
android:visibility="visible"
app:cardElevation="2dp">
<ImageView
android:id="@+id/iv_icon_activityWellness_novel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:src="@mipmap/wellness" />
<com.oplayer.orunningplus.view.them.ThemeTextView
android:id="@+id/tv_activityWellness_novel_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="30dp"
android:layout_toEndOf="@+id/iv_icon_activityWellness_novel"
android:gravity="center_vertical"
android:text="@string/newTypeSetting_activityWellness"
app:textFont="3"
app:textSize="18" />
<ImageView
android:id="@+id/iv__activityWellness_novelarrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_marginEnd="5dp"
android:src="@mipmap/settings_arrow" />
<include layout="@layout/layout_line" />
</RelativeLayout>
<ImageView
android:id="@+id/iv_icon_bgkkkkk"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:src="@mipmap/wellness"
android:visibility="gone" />
</LinearLayout>
<Button
android:id="@+id/btn_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="200dp"
android:text="高亮按钮" />
<Button
android:id="@+id/btn_rightLight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="290dp"
android:layout_alignParentRight="true"
android:text="高亮按钮1" />
<Button
android:id="@+id/btn_bottomLight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"
android:layout_alignParentBottom="true"
android:layout_marginLeft="30dp"
android:layout_marginBottom="60dp"
android:text="高亮按钮2" />
</RelativeLayout>
info_known.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".function.main.settings.SettingsFragment"
android:orientation="vertical">
<TextView
android:id="@+id/id_iv_tip"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="profile_nameprofile_nameprofile_name"
android:textSize="20sp"
android:textColor="@color/white"
/>
<TextView
android:id="@+id/iv_known"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/id_iv_tip"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="我知道了"
android:textColor="@color/white"
android:gravity="center"
android:paddingRight="10dp"
android:background="@mipmap/sportpush_square" />
</LinearLayout>
<!--copy from layout/info_gravity_left_down.xml-->
fragment使用方法
open fun showNextTipViewOnCreated() {
var mHightLight:HighLight? = null
mHightLight = HighLight(requireActivity())
// .anchor(activity?.findViewById<LinearLayout>((R.id.ll_setting_disconn_bgk)))
.autoRemove(true) //.enableNext()
.intercept(true)
.setOnLayoutCallback { //mAnchor界面布局完成添加tipview
mHightLight?.addHighLight(
R.id.rl_smartWatch_novel,
R.layout.info_known,
OnBottomPosCallback(100f),
RectLightShape(0f, 0f, 15f, 0f, 0f)
)
// mHightLight?.addHighLight(
// R.id.rl_smartWatch_novel,
// R.layout.activity_main2,
// OnLeftPosCallback(45f),
// RectLightShape(0f, 0f, 15f, 0f, 0f)
// ) //矩形去除圆角
//然后显示高亮布局
mHightLight?.show()
}
.setClickCallback {
var view = activity?.findViewById<LinearLayout>(R.layout.info_known)
view?.findViewById<TextView>(R.id.iv_known)?.setOnClickListener {
Slog.d("EVENT_CHANGE_UNIT_FORMAT22")
}
Slog.d("输出EVENT_CHANGE_UNIT_FORMATEVENT_CHANGE_UNIT_FORMAT")
}
}