页面添加蒙版,但是不影响页面其他事件响应


最近需要做一个比较坑人的功能,就是在APP每个页面上都添加一个蒙版的效果,但是还不能影响页面上其他的事件,要是仅仅修改几个页面,应该相对比较容易的,因为可以修改xml,在最外层套一个FrameLayout或者RelativeLayout,然后将蒙版的View添加到底部,focusable和clickable都设置成”false”即可。相关xml布局如下(使用FrameLayout,注蒙版的View一定要添加在下面)

activity_main.xml

<?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="wrap_content" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/id_swipe_ly"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <android.support.v7.widget.RecyclerView
                android:id="@+id/id_recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </android.support.v7.widget.RecyclerView>
        </android.support.v4.widget.SwipeRefreshLayout>
    </LinearLayout>
   
    <include layout="@layout/view_mask" />

</FrameLayout>

view_mask.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout_mask"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#88000000"
    android:clickable="false"
    android:focusable="false"
    android:gravity="top"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:text="这是蒙版啊!"
        android:textColor="#fff" />

</LinearLayout>

但楼主刚刚也提到,需要将项目中所有的页面都添加,几十个啊,根本添加不起,于是就想到能不能封装一下,大家都共用,这样就不用修改xml文件啦,可是我是个小白,不知如何下手,上网搜索资料,蒙版的实现方式都跟我上述实现的方式类似,于是我想到了Dialog这个控件,毕竟实现loading的效果就是使用这个,蒙版效果可以很容易实现,现在的问题就是如何使页面添加蒙版,并不影响页面其他事件响应,于是我就想到了能不能将这个Dialog的focusable和clickable类似的相关属性同样设置为false,于是就自己封装了一个MaskDialog,通过设置窗口布局Flag来实现,以下就是相关代码:

public class MaskDialog extends Dialog {

	private Context context;

	public MaskDialog(Context context, int theme) {
		super(context, theme);
		// TODO Auto-generated constructor stub
		this.context = context;
		setupUI();

	}
	protected MaskDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
		super(context, cancelable, cancelListener);
		// TODO Auto-generated constructor stub
		this.context = context;
		setupUI();
	}

	public MaskDialog(Context context) {
		super(context);
		this.context = context;
		// TODO Auto-generated constructor stub
		setupUI();
	}

	private void setupUI() {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		Window window = getWindow();
		WindowManager.LayoutParams wl = window.getAttributes();
		WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
		int width = wm.getDefaultDisplay().getWidth();
		int height = wm.getDefaultDisplay().getHeight();
		wl.x = 0; // 这两句设置了对话框的位置.
		wl.y = 0;
		wl.width = width;
		wl.height = height;
		wl.flags = wl.flags | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;
		wl.flags = wl.flags | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE;
		window.setAttributes(wl);
		LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View view = inflater.inflate(R.layout.view_mask, null);// 获取弹出页layout
		setView(view);
		this.setContentView(view);
	}
	
	private void setView(View view) {
		TextView txtName = (TextView) view.findViewById(R.id.textView1);
		txtName.setText("哈哈,这是蒙版页面!");
	}
}


关于WindowManager LayoutParams的所有flag介绍,可参照这篇文章:http://my.oschina.net/u/1781028/blog/307263

 

MaskDialog的用法,跟Dialog一致,相关代码如下:

dialog = new MaskDialog(this, android.R.style.Theme_Translucent_NoTitleBar);
dialog.show();

以上就是实现在页面添加蒙版,但是不影响页面其他事件响应这个功能的相关代码,希望对大家有帮助,谢谢!


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是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 ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值