需求：在界面上特定位置做出指引，一步步告诉用户是怎么操作
效果图：
tips.jpg
实现思路：
在界面出来之后，获取相应的坐标，然后传坐标到startActivity一个新的界面，该界面背景是带透明度的，界面上添加一个根据坐标点镂空的TipsView
下面一步步实现
步骤一：自定义镂空控件TipsView
示例代码：
public class TipsView extends FrameLayout {
private final Context mContext;
private int[] mCircleLocation;
private int position = 0;
public TipsView(Context context) {
this(context, null);
}
public TipsView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TipsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView();
}
private void initView() {
setBackgroundColor(Color.parseColor("#7f000000"));//半透明底色
}
public void setCircleLocation(int[] location,int position) {
this.mCircleLocation = location;
this.position = position;
invalidate(); //重新绘画
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mCircleLocation != null) {
//根据传过来的特定坐标位置掏空一个圆形
Paint paintarc = new Paint(Paint.ANTI_ALIAS_FLAG);
PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
paintarc.setXfermode(porterDuffXfermode);
paintarc.setAntiAlias(true);
RectF rectF = new RectF(mCircleLocation[0], mCircleLocation[1], mCircleLocation[2], mCircleLocation[3]);
canvas.drawArc(rectF, 0, 360, true, paintarc);
//画虚线
//Paint paintdashed = new Paint(Paint.ANTI_ALIAS_FLAG);
//paintdashed.setStyle(Paint.Style.STROKE);
//paintdashed.setColor(Color.WHITE);
//paintdashed.setStrokeWidth(1);
//PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 0);
//paintdashed.setPathEffect(pathEffect);
//canvas.drawArc(rectF, 0, 360, true, paintdashed);
if (position == 0){
//画分享指引图片
Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_share_arrow_mark);
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int def = Util.dip2px(10f);
int left = mCircleLocation[0] - width+def;
int top = mCircleLocation[3] + def;
canvas.drawBitmap(bitmap, left, top, paintImage);
} else if(position == 1) {
//画打卡指引图片
Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_daka_arrow_mark);
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int def = Util.dip2px(10f);
int left = mCircleLocation[2] - def;
int top = mCircleLocation[3] ;
canvas.drawBitmap(bitmap, left, top, paintImage);
} else if (position == 2) {
//画大纲指引图片
Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_dagang_arrow_mark);
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int def = Util.dip2px(10f);
int left = mCircleLocation[0] + (mCircleLocation[2] - mCircleLocation[0])/2 - def;
int top = mCircleLocation[3] + def;
canvas.drawBitmap(bitmap, left, top, paintImage);
} else if (position == 3) {
//画简介指引图片
Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.course_jianjie_arrow_mark);
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int def = Util.dip2px(10f);
int left = mCircleLocation[0] - width + (mCircleLocation[2] - mCircleLocation[0])/2;
int top = mCircleLocation[3] + def;
canvas.drawBitmap(bitmap, left, top, paintImage);
}
}
}}
步骤二：配置TipsActivity
<!-- 重新主题去掉activity切换的动画效果 -->
<style name="ThemeTips" parent="@android:style/Theme.Translucent.NoTitleBar">
<item name="android:windowAnimationStyle">@style/TipAnimation</item>
</style>
<style name="TipAnimation">
<item name="android:activityOpenEnterAnimation">@null</item>
<item name="android:activityOpenExitAnimation">@null</item>
<item name="android:activityCloseEnterAnimation">@null</item>
<item name="android:activityCloseExitAnimation">@null</item>
<item name="android:taskOpenEnterAnimation">@null</item>
<item name="android:taskOpenExitAnimation">@null</item>
<item name="android:taskCloseEnterAnimation">@null</item>
<item name="android:taskCloseExitAnimation">@null</item>
<item name="android:taskToFrontEnterAnimation">@null</item>
<item name="android:taskToFrontExitAnimation">@null</item>
<item name="android:taskToBackEnterAnimation">@null</item>
<item name="android:taskToBackExitAnimation">@null</item>
</style>
TipActivity
public class TipsActivity extends Activity {
private RelativeLayout tips_rootview;
private int[] mShareLocs;
private int[] mDakaLocs;
private int[] mJianjieLocs;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tips);
if (getIntent().hasExtra("shareLocs")){
mShareLocs = getIntent().getIntArrayExtra("shareLocs");
}
if (getIntent().hasExtra("dakaLocs")){
mDakaLocs = getIntent().getIntArrayExtra("dakaLocs");
}
if (getIntent().hasExtra("jianjieLocs")){
mJianjieLocs = getIntent().getIntArrayExtra("jianjieLocs");
}
tips_rootview = findViewById(R.id.tips_rootview);
final TipsView tipsView = new TipsView(this);
tipsView.setCircleLocation(mShareLocs,0);
tips_rootview.addView(tipsView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
final TipsView tipsDakaView = new TipsView(this);
tipsDakaView.setCircleLocation(mDakaLocs,1);
tips_rootview.addView(tipsDakaView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
tipsDakaView.setVisibility(View.GONE);
final TipsView tipsJianjieView = new TipsView(this);
tipsJianjieView.setCircleLocation(mJianjieLocs,3);
tips_rootview.addView(tipsJianjieView,new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
tipsJianjieView.setVisibility(View.GONE);
tipsView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tipsView.setVisibility(View.GONE);
tipsDakaView.setVisibility(View.VISIBLE);
}
});
tipsDakaView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tipsDakaView.setVisibility(View.GONE);
tipsJianjieView.setVisibility(View.VISIBLE);
}
});
tipsJianjieView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
overridePendingTransition(0,0);
}
});
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
finish();
overridePendingTransition(0, 0);
return true;
}
return super.onKeyDown(keyCode, event);
}}
清单注册：
<activity android:name=".activity.TipsActivity"
android:theme="@style/ThemeTips"
/>
注意：清单注册中不要固定竖屏或者横屏，不然在8.0的手机会闪退，切记，切记。不要怀疑
步骤四：使用示例
public class MainActivity extends AppCompatActivity {
private TextView tv_jianjie;
private TextView tv_share;
private TextView tv_daka;
@Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv_jianjie = findViewById(R.id.tv_jianjie);
tv_share = findViewById(R.id.tv_share);
tv_daka = findViewById(R.id.tv_daka);
tv_share.post(new Runnable() {
@Override
public void run() {
int left = tv_share.getLeft();
int top = tv_share.getTop();
int right = tv_share.getRight();
int bottom = tv_share.getBottom();
int[] shareLoc = new int[]{left,top,right,bottom};
int dakaleft = tv_daka.getLeft();
int dakatop = tv_daka.getTop();
int dakaright = tv_daka.getRight();
int dakabottom = tv_daka.getBottom();
int[] dakaLoc = new int[]{dakaleft,dakatop,dakaright,dakabottom};
int jianjieleft = tv_jianjie.getLeft();
int jianjiedakatop = tv_jianjie.getTop();
int jianjiedakaright = tv_jianjie.getRight();
int jianjiedakabottom = tv_jianjie.getBottom();
int[] jianjieLoc = new int[]{jianjieleft,jianjiedakatop,jianjiedakaright,jianjiedakabottom};
Intent it = new Intent(MainActivity.this, TipsActivity.class);
it.putExtra("shareLocs", shareLoc);
it.putExtra("dakaLocs",dakaLoc);
it.putExtra("jianjieLocs",jianjieLoc);
MainActivity.this.startActivity(it);
}
});
}}
关键点：传坐标，蒙版activity的配置，镂空处理
网友评论