Android自定义遮罩层设计

在做网页设计时，前端设计人员会经常用到基于JS开发的遮罩层，并且背景半透明。这样的效果怎么样在Android上实现呢？这个实现并不困难，先来上效果图：

<ignore_js_op> 

20121029222704.jpg (29.46 KB, 下载次数: 61)

下载附件  保存到相册

2013-5-3 15:29 上传

 

本实例源码下载：点击下载

PopMaskViewActivity代码：

[mw_shl_code=java,true]package com.sunchis.demo; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.Button; 

public class PopMaskViewActivity extends Activity { 
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
         
        Button button = (Button) findViewById(R.id.button); 
        button.setOnClickListener(new OnClickListener() { 
            @Override 
            public void onClick(View v) { 
                // 弹出遮罩层 
                new DialogView(PopMaskViewActivity.this).show(); 
            } 
        }); 
    } 
} 
[/mw_shl_code]

DialogView代码，该View实际上是对话框(Dialog)的自定义，通过单击按钮来触发Dialog的弹出，其样式的控制在style.xml中。

[mw_shl_code=java,true]package com.sunchis.demo; 

import android.app.Activity; 
import android.app.Dialog; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.Window; 
import android.view.ViewGroup.LayoutParams; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 

public class DialogView { 
    private Dialog dialog; 
     
    public DialogView(Activity mActivity) { 
        dialog = new Dialog(mActivity, R.style.mask_dialog); 
        LinearLayout popView = (LinearLayout) LayoutInflater. 
                from(mActivity).inflate(R.layout.dialog_view, null); 
         
        // 关闭按钮 
        ImageView viewClose = (ImageView) popView.findViewById(R.id.win_close); 
        viewClose.setOnClickListener(new OnClickListener() { 
            @Override 
            public void onClick(View v) { 
                hide(); 
            } 
        }); 
         
        dialog.setContentView(popView,  
                new LinearLayout.LayoutParams( 
                        LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); 
        dialog.setFeatureDrawableAlpha(Window.FEATURE_OPTIONS_PANEL, 0); 
    } 
     
    public void show() { 
        dialog.show(); 
    } 
     
    public void hide() { 
        dialog.dismiss(); 
    } 
} [/mw_shl_code]

对话框(Dialog)样式style.xml代码，通过“new Dialog(context, theme)”方法进行设置。
[mw_shl_code=java,true]<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <!-- 模仿dialog的遮罩层属性 --> 
    <style name="mask_dialog" parent="@android:style/Theme.Dialog"> 
        <item name="android:windowIsFloating">true</item> 
        <item name="android:windowIsTranslucent">true</item> 
        <item name="android:windowNoTitle">true</item> 
        <item name="android:windowBackground">@null</item> 
        <item name="android:backgroundDimEnabled">true</item> 
    </style> 
</resources> [/mw_shl_code]

最后就是遮罩层的布局代码了：

[mw_shl_code=xhtml,true]<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/dialog" 
    android:orientation="vertical" > 



    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="@drawable/title" > 

        <ImageView 
            android:id="@+id/win_close" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src="@drawable/close" /> 

        <TextView 
            android:id="@+id/win_title" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent" 
            android:layout_weight="1.05" 
            android:gravity="center" 
            android:text="@string/view_title" 
            android:textColor="#ffffff" 
            android:textSize="20sp" /> 

        <ImageView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src="@drawable/default_button" /> 
    </LinearLayout> 
</LinearLayout> [/mw_shl_code]

涉及到的部分图片素材就没有一一列出来，但都包含在源码包中，建议下载源进行研究和学习！