Android UI设计--半透明效果对话框及activity(可做遮罩层)
2024-08-26 10:54:28
下面是style的一些属性及其解释
<style name="dialog_translucent" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@null</item><!-- 边框 --> <item name="android:windowIsFloating">true</item><!-- 是否悬浮在activity上 --> <item name="android:windowIsTranslucent">false</item><!-- 半透明 --> <item name="android:windowNoTitle">true</item><!-- 无标题 --> <item name="android:windowBackground">@android:color/transparent</item><!-- 背景透明 --> <item name="android:backgroundDimEnabled">false</item><!-- 模糊 --> <item name="android:backgroundDimAmount">0.6</item><!-- 灰度 --> <item name="android:windowContentOverlay">@null</item><!-- 对话框是否有遮盖 --> <item name="android:windowAnimationStyle">@style/dialog_animation</item><!-- 弹出或者进入时的动画效果 --> <item name="android:colorBackgroundCacheHint">@null</item><!-- 背景缓存颜色 --> </style>
自定义对话框效果如下
styles.xml
<style name="popupDialog" parent="@android:style/Theme.Dialog"> <item name="android:windowNoTitle">true</item> <item name="android:windowBackground">@drawable/filled_box</item> <item name="android:backgroundDimEnabled">false</item> <item name="android:windowIsTranslucent">false</item> <item name="android:backgroundDimAmount">0.6</item> <item name="android:windowAnimationStyle">@style/dialog_animation</item> </style>
filled_box.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#9000"/> <stroke android:width="3dp" color="#ffff8080"/> <corners android:radius="30dp"/> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"/></shape>
dialog_animation.xml
<style name="dialog_animation"> <item name="android:windowEnterAnimation">@anim/fading_in</item> <item name="android:windowExitAnimation">@anim/fading_out</item> </style>
在anim目录下创建fading_in.xml,进入时候的淡入效果
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /></set>
fading_out.xml淡出效果
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /></set>
showVerify方法,效果如上面图所示
private void verifyDialog(String msg) { final Dialog dialog = new Dialog(MainActivity.this, R.style.popupDialog); dialog.setContentView(R.layout.verify_dialog); dialog.setCanceledOnTouchOutside(false); dialog.setCancelable(false); TextView message = (TextView)dialog.getWindow().findViewById(R.id.messageTxt); Button okBtn = (Button)dialog.getWindow().findViewById(R.id.dismissBtn); message.setText(msg); okBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if(dialog!=null && dialog.isShowing()) { dialog.dismiss(); } } }); if(dialog!=null && !dialog.isShowing()) { dialog.show(); } }
如果是想把整个activity做成类似于微博的new feature透明背景样式,如图
上面的图是透明背景,透明颜色可以自己定义
styles.xml
<style name="activity_translucent"> <item name="android:windowBackground">@drawable/filled_activity_bg</item> <item name="android:backgroundDimEnabled">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowIsTranslucent">false</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowAnimationStyle">@style/dialog_animation</item> <item name="android:colorBackgroundCacheHint">@null</item> <item name="android:backgroundDimAmount">0.6</item><!-- 灰度 --> </style>
如果想设置的不是纯透明,改成灰色透明度的,可以设置windowBackground背景,下面是filled_activity_bg.xml,这样就是灰色的透明背景,类似于第一张图片
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#9000"/> <stroke color="#ffff8080"/></shape>
如果不做任何灰度处理,效果如上图,可以设置背景色为透明
<style name="activity_translucent"> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:backgroundDimEnabled">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowIsTranslucent">false</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowAnimationStyle">@style/dialog_animation</item> <item name="android:colorBackgroundCacheHint">@null</item> </style>
显示activity,代码如下。可以通过类似的原理制作遮罩层,其他的半透明能效果,例如popup菜单半透明效果等
Dialog dialog = new Dialog(MainActivity.this, R.style.activity_translucent); dialog.setContentView(R.layout.transparent_layout); dialog.show();
最新文章
- react-router 组件式配置与对象式配置小区别
- ASP.NET MVC 3 网站优化总结(六)压缩 HTML
- Mongodb集群搭建的三种方式
- objective-c 语法快速过(7)编译器特性ARC
- Macaca-iOS入门那些事2
- [JAVA 多种方式读取文件]
- [NSURLConnection]分别用Post和Get方式获取网络数据并把数据显示到表格
- Python基础、文件处理
- 使用Github管理项目代码的版本
- 曲线行驶s弯道技巧图解【转】
- robotframework笔记25
- 矩阵基本运算的 Python 实现
- Java学习笔记——双等号和equals的区别
- 分析WordPress主题结构是如何架构的?
- Xcode HeaderDoc 教程(2)
- NET中级课--浅谈委托,事件,异步调用,回调等概念
- linux shell脚本学习xargs命令使用详解
- time模块整理
- HDU 1159 Common Subsequence【dp+最长公共子序列】
- linux学习:xargs与grep用法整理
热门文章
- 作用域插槽 向父组件传递 <;template slot-scope=";{ row, index }"; slot=";dateNo";>;
- 新数据的GT列表
- Active Directory网域
- Fortran学习笔记6(函数、子程序)
- 洛谷 P2921 在农场万圣节
- jdk环境变量配置(参考自《疯狂java讲义》)
- 如何利用 CSS 动画原理,在页面上表现日蚀现象
- 水题:UVa253-Cube painting
- 从士兵到程序员再到 SOHO 程序员 (三) - 游击战与阻力
- 【PL/SQL编程基础】