蒙板引导页面

一、引导页面的弹出

总结网上资料得到以下几种弹出方法:

1.使用FrameLayout:

查找到contentview的父亲,是一个FrameLayout类型的布局文件,id为android:id/content。在这个FrameLayout的最上层插入引导view,即可实现引导功能。示例代码:

FrameLayout frameLayout=(FrameLayout)getActivity().findViewById(android.R.id.content);
View view=new View(getActivity());
view.setOnClickListener(null);
view.setBackgroundColor(0x80000000);
FrameLayout.LayoutParams layoutParams=new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
view.setLayoutParams(layoutParams);
frameLayout.addView(view);

2.使用WindowManager方法:

使用WindowManager在屏幕上弹出一个window,在window上显示引导view,示例代码:

WindowManager windowManager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
                WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
                layoutParams.type = WindowManager.LayoutParams.TYPE_APPLICATION;
                layoutParams.format = PixelFormat.RGBA_8888;
                layoutParams.gravity = Gravity.LEFT | Gravity.TOP;
                layoutParams.width=720;
                layoutParams.height=1280;
                View view = new View(getActivity());
                view.setOnClickListener(null);
                view.setBackgroundColor(0x80000000);
                windowManager.addView(view,layoutParams);

3.使用PopupWindow/AlertDialog方法

弹出一个合屏的PopupWindow/AlertDialog来显示引导view

4.使用Activity方法

打开一个新的Activity来显示引导view

二、引导页面的显示

一般一说可以显示任何内容,包括文字、图片和动画等,这些内容一般需要和被引导页面的某些控件的位置一致。所以在显示引导页面的时候,可以将被引导页面的控件坐标和大小等信息传递给引导页面,让引导页面在正确的位置显示内容。
另外一种特殊的显示是在引导页面上“打洞”,显示出某些被引导页面的控件,这种方法的一种实现方法是将对应的位置或者更大的范围设置成完全透明的区域。
下面是一段设置透明区域的代码:

private void init(){
    mPaint=new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));                    
}
@Override
protected void onDraw(Canvas canvas) {
    if(mBitmap==null){
        mBitmap=Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
        mBitmapCanvas=new Canvas(mBitmap);
    }
    mBitmapCanvas.drawColor(0x80000000, PorterDuff.Mode.SRC); //给bitmap画一个底色
    mBitmapCanvas.drawRect(0, 0, getWidth(), getHeight() / 3, mPaint); //再画一个透明的方块
    canvas.drawBitmap(mBitmap,0,0,null); //将bitmap画到界面上
}

透明区域显示的位置可以通过计算得知:
1.使用view.getLocationOnScreen获取被透控件的屏幕相对位置
2.使用maskview.getLocationOnScreen获取引导页面的屏幕相对位置
3.计算被透控件相对引导页面的位置,然后画透明框

三、引导页面与被引导页面的交互

  一般的应用在点击引导页面时,直接让引导页面消失,不存在交互的过程,而有时候则需要进行交互。交互的方式有:

  • 引导页面调用被引导页面的某些方法
  • 引导页面透传触摸事件
    重写onTouchEvent,如果触摸点是在指定区域内,就返回fase透传触摸事件
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是uniapp跳转页面过渡效果与蒙版的介绍: 1.跳转页面过渡效果 在uniapp中,可以通过设置页面的animation属性来实现跳转页面的过渡效果。具体步骤如下: (1)在跳转的目标页面中,设置页面的animation属性,例如: ```html <template> <view class="container" animation="{{animationData}}"> <!-- 页面内容 --> </view> </template> <script> export default { data() { return { animationData: {} // 动画对象 } }, onShow() { // 创建动画对象 const animation = uni.createAnimation({ duration: 500, // 动画时长 timingFunction: 'ease-in-out', // 缓动函数 delay: 0 // 延迟时间 }) // 设置动画效果 animation.translateX(100).step() // 更新动画对象 this.animationData = animation.export() } } </script> ``` (2)在跳转的源页面中,使用uni.navigateTo或uni.redirectTo方法跳转到目标页面,例如: ```javascript uni.navigateTo({ url: '/pages/target/target' }) ``` 2.蒙版 在uniapp中,可以通过设置一个遮罩层来实现蒙版效果。具体步骤如下: (1)在页面中添加一个遮罩层,例如: ```html <template> <view class="container"> <!-- 页面内容 --> <view class="mask" v-show="showMask"></view> </view> </template> <style> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } </style> ``` (2)在页面的data中添加一个showMask属性,用于控制遮罩层的显示和隐藏,例如: ```javascript export default { data() { return { showMask: false // 是否显示遮罩层 } } } ``` (3)在需要显示遮罩层的时候,将showMask属性设置为true,例如: ```javascript this.showMask = true ``` (4)在需要隐藏遮罩层的时候,将showMask属性设置为false,例如: ```javascript this.showMask = false ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值