在做网页设计时,前端设计人员会经常用到基于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]

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

Android自定义遮罩层设计的更多相关文章

  1. [微信小程序]实现一个自定义遮罩层

    正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button ...

  2. C# Winform 实现自定义半透明loading加载遮罩层

    在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...

  3. C# Winform 实现自定义半透明遮罩层介绍

    在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...

  4. Android UI设计--半透明效果对话框及activity(可做遮罩层)

    下面是style的一些属性及其解释 <style name="dialog_translucent" parent="@android:style/Theme.Di ...

  5. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  6. iOS 自定义相机带拍摄区域边框及半透明遮罩层(含源码)

    开始时准备封装成ViewController的相机,但是在不改我相机控件源码的情况下,使用者很难自定义UI.于是想到将相机核心功能封装到View里,暴露出功能方法给外面调用,调用者只需将LFCamer ...

  7. Mybatis学习之自定义持久层框架(二) 自定义持久层框架设计思路

    前言 上一篇文章讲到了JDBC的基本用法及其问题所在,并提出了使用Mybatis的好处,那么今天这篇文章就来说一下该如何设计一个类似Mybatis这样的持久层框架(暂时只讲思路,具体的代码编写工作从下 ...

  8. Android 遮罩层效果--制作圆形头像

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  9. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

随机推荐

  1. replace 替换全部的正确姿势

    本文同步自我的个人博客:http://www.52cik.com/2015/11/06/replace-all.html 关于字符串替换问题,其实是个很简单的问题,但却也不那么简单,至少对于很多新手而 ...

  2. 第五章 与众不同的this

    我们来看下面的代码: ①var name="windows"; function myfun() //定义一个函数myfun { console.log("I'm &qu ...

  3. xsd、wsdl生成C#类的命令行工具使用方法

    1.xsd生成C#类命令 示例:xsd <xsd文件路径> /c /o:<生成CS文件目录> <其他参数> 参数说明: /c 生成为cs文件,/d 生成DataSe ...

  4. [codevs 1051]接龙游戏(栈)

    题目:http://codevs.cn/problem/1051/ 分析: 当然单词查找树是可以的,但这题有更为简便的方法.可以先按字典序排序,然后弄一个栈,如果当前字串可以接到栈顶元素的后面,那么当 ...

  5. [USACO2005][POJ3044]City Skyline(贪心+单调栈)

    题目:http://poj.org/problem?id=3044 题意:以坐标的形式给出一张图,表示一些楼房的正视图,求出楼房的最少个数. 分析:和小学常做的立方体问题很像,很容易想到一个贪心方法, ...

  6. linux之条件判断

    一.文件类型比较 判断一个文件是否存在(注意:中括号表示判断,其两边必须有空格) 二.文件权限判断 判断是否有可执行权限(这里是不区分用户的,只要该文件能执行就返回0) 3.整数比较 判断两个数是否相 ...

  7. 05.C#泛型类型(三章3.1-3.2)

    接下来说下C#中的泛型,熟练地使用泛型能提高代码的重用性,使用我们代码瞬间就高大上了,当然只有一点点,真的只有一点点,因为后面要学习和掌握的知识还有很多.先来看下一个使用Dictionary<T ...

  8. LINQ浅析

    在C# 3.0之前,我们对不同的数据源(数据集合.SQL 数据库.XML 文档等等)进行操作(查询.筛选.投影等等),会使用不同的操作方式. C# 3.0中提出了LINQ(Language Integ ...

  9. Convention插件

    考虑使用COnvention插件可以进行零配置而且插件进行很多规范的约定也可以对开发合作当中按着它相应的规律开发..感觉也挺方便管理的.下面简单介绍它的使用. 首先我们需要使用到的jar包: Java ...

  10. WebForm之FileUpload控件(文件上传)

    FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径" ...