首页 > 代码库 > Android自定义遮罩层设计
Android自定义遮罩层设计
在做网页设计时,前端设计人员会经常用到基于JS开发的遮罩层,并且背景半透明。这样的效果怎么样在Android上实现呢?这个实现并不困难,先来上效果图:
<ignore_js_op>
20121029222704.jpg
下载附件 保存到相册
本实例源码下载:点击下载
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="http://www.mamicode.com/@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="http://www.mamicode.com/@drawable/default_button" />
</LinearLayout>
</LinearLayout> [/mw_shl_code]
涉及到的部分图片素材就没有一一列出来,但都包含在源码包中,建议下载源进行研究和学习!