引导层界面的Canvas和Paint效果


废话不多说，先上图



此效果为一个透明的activity覆在最上层，在xml中按照对应提示的位置排列好布局，然后再新建一个类DrawView继承View，在类的OnDraw方法中新建自己要求的画笔画出要透漏的图形，然后在activity中新建这个类的对象，然后把这个view添加的activity所关联的布局上

先来看xml中的代码：首先新建一个布局名字叫indecatorhomepage内部有三张透明底色的图片代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/indecatorhomepage_ll">
<ImageView
android:layout_weight="1"
android:layout_marginRight="10dp"
android:layout_marginTop="40dp"
android:layout_gravity="center_horizontal|right"
android:layout_width="200dp"
android:layout_height="100dp"
android:src="@drawable/indecator_user_center"/>
<ImageView
android:layout_weight="1"
android:layout_marginLeft="40dp"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:src="@drawable/indecator_recharge"/>
<ImageView
android:layout_weight="1"
android:layout_marginBottom="30dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_width="200dp"
android:layout_height="100dp"
android:src="@drawable/indecator_iknow"/>
</FrameLayout>

然后新建一个类IndecatorActivity关联这个布局代码如下：

public class IndecatorActivity extends Activity {
FrameLayout frameLayout;//布局要使用帧布局
WindowManager wm;//获取屏幕
int scaleX,scaleY;//屏幕宽高
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//无title
requestWindowFeature(Window.FEATURE_NO_TITLE);
//全屏

setContentView(R.layout.indecatorhomepage);
init();
frameLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
private void init() {
wm = (WindowManager)this.getSystemService(Context.WINDOW_SERVICE);
scaleX = wm.getDefaultDisplay().getWidth();
scaleY = wm.getDefaultDisplay().getHeight();
frameLayout = (FrameLayout)findViewById(R.id.indecatorhomepage_ll);
final DrawView drawView = new DrawView(this,scaleX,scaleY);//新建这个view同时把宽高传过去
drawView.setMinimumWidth(scaleX);
drawView.setMinimumHeight(scaleY);
// drawView.invalidate();

frameLayout.addView(drawView);//把这个view添加到布局中

}
}

下面就是关键的DrawView在这个类中画出你想要的图案：

public class DrawView extends View {
int scaleX,scaleY;

/* 唤醒渐变渲染 */
Shader mRadialGradient = null;
Shader mRadialGradientRect = null;

public DrawView(Context context,int scaleX,int scaleY) {
super(context);
this.scaleX = scaleX;
this.scaleY = scaleY;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
Paint mpaint = new Paint();
Paint mpaintRect = new Paint();

mRadialGradient = new RadialGradient(17.75f * scaleX / 19, scaleY / 12.6f, scaleX/11,
new int[]{Color.WHITE,Color.BLACK},
null, Shader.TileMode.MIRROR);//环形渲染，出现类似灯光打上的效果
mRadialGradientRect = new RadialGradient(170*scaleX/720,730*scaleY/1280,scaleX / 7,
new int[]{Color.WHITE,Color.BLACK},
null, Shader.TileMode.MIRROR);
mpaint.setShader(mRadialGradient);
mpaint.setColor(Color.WHITE);//设置画笔的颜色为白色
mpaintRect.setColor(Color.WHITE);
mpaintRect.setShader(mRadialGradientRect);//设置渲染
mpaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//设置mask的模式
mpaintRect.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawCircle(170 * scaleX / 720, 730 * scaleY / 1280, scaleX / 7, mpaintRect);

canvas.drawCircle(17.75f * scaleX / 19, scaleY / 12.6f, scaleX / 11, mpaint);
paint.setColor(Color.WHITE);
paint.setAlpha(40);//设置透明度

paint.setShader(mRadialGradientRect);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawCircle(17.75f * scaleX / 19, scaleY / 12.6f, scaleX / 22, paint);

}
}

然后就是在你的Manifest.xml中设置你IndecatorActivity的theme为你自定义的透明度（这里就不细说了，我设置的是80%）：

<activity android:name=".IndecatorActivity"
android:theme="@style/translucent">
<intent-filter>
<action android:name="com.fgs.indecatorTest"/><span style="color: rgb(128, 128, 128); font-style: italic;"><!--</span><span style="color: rgb(128, 128, 128); font-family: '宋体'; font-style: italic;">自定义透明度</span><span style="color: rgb(128, 128, 128); font-style: italic;">--></span>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</activity>

然后就是在主Activity中设置启动后跳转了：

public class MainActivity extends AppCompatActivity {
private static int status = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.layoutindecator);

if (status == 0){
Intent intent = new Intent("com.fgs.indecatorTest");
startActivity(intent);
//status++;
}
}

}

给一个mask遮掩层的实例做参考：/article/3687688.html

好了现在就实现了图示效果了，大家有哪里不理解的可以给我留言。