Android自定义遮罩层设计

12
回复
244776
查看
[复制链接]

55

主题

370

帖子

1407

安币

Android大神

安卓斗士

Rank: 6Rank: 6

QQ达人

QQ
发表于 2013-5-3 15:29:33 | 显示全部楼层 |阅读模式

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


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

PopMaskViewActivity代码:


[Java] 查看源文件 复制代码
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(); 
            } 
        }); 
    } 
} 


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

[Java] 查看源文件 复制代码
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(); 
    } 
} 


对话框(Dialog)样式style.xml代码,通过“new Dialog(context, theme)”方法进行设置。
[Java] 查看源文件 复制代码
<?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> 


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

[XHTML] 查看源文件 复制代码
<?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> 


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



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
爱美女,爱生活,爱安卓,爱网络~

8

主题

522

帖子

3485

安币

码皇(巴士元老)

Android菜鸟

Rank: 8Rank: 8

QQ达人

QQ
发表于 2013-5-3 15:34:54 | 显示全部楼层
嗯 好像以后会用到
<-sina_sign,3117156127,d5fe4234,1->现在的我无论向哪个方向学习android都是进步的

1

主题

89

帖子

153

安币

程序猿

小白

Rank: 2

发表于 2013-5-17 14:45:21 | 显示全部楼层
非常感谢,需要啊
小白

6

主题

70

帖子

89

安币

程序猿

Rank: 2

发表于 2013-9-9 11:19:33 | 显示全部楼层
很漂亮  收下 以后肯定能用
my little  ojy

1

主题

219

帖子

136

安币

程序猿

Rank: 2

QQ达人

发表于 2013-9-23 22:40:18 | 显示全部楼层
楼主威武

1

主题

219

帖子

136

安币

程序猿

Rank: 2

QQ达人

发表于 2013-10-14 17:33:46 | 显示全部楼层
楼主牛逼,学习了

主题

帖子

安币

游客

发表于 2013-11-25 18:23:58 | 显示全部楼层
好好.................

0

主题

570

帖子

1455

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2014-3-11 15:47:13 | 显示全部楼层
楼主牛逼,学习了{:6_158:}
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )