Android自定义遮罩层设计
在做网页设计时，前端设计人员会经常用到基于JS开发的遮罩层，并且背景半透明。这样的效果怎么样在Android上实现呢？这个实现并不困难，先来上效果图：
<ignore_js_op>
本实例源码下载：点击下载
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]
涉及到的部分图片素材就没有一一列出来，但都包含在源码包中，建议下载源进行研究和学习！