Android常用提示框(dialog和popuwindow)
2016-11-07 21:41
459 查看
一、UI显示
日常生活中,我们经常会看到应用中那些提示框,有在正中的,有在底部的,这篇文章我来学习一下这两类提示框UI,主要是dialog和popuwindow。
首先上图:
1、dialog
2、popuwindow
二、代码的编写(dialog)
dialog
1、首先我们来构思一下所要显示的样式,基本上是分三个部分,①标题②内容③取消确认键。这里我使用的是layout_weight,是为了控制显示比例,易于适配屏幕。
2、这里我们就已经有一个基本的布局了,然后是自定义这个布局。创建一个类来继承Dialog,实现重写构造函数,然后绑定一些控件。
这里我使用的是按照获取到的手机的屏幕,来控制这个dialog的显示比例,这样可以适配的更加方便。
3、然后在代码中使用这个控件,这里我们注意一下,还要传入hemeResId的值,因为如果不传入,效果就不会那么好。
4、使用themeResId的样式,styles.xml文件中
外加background的样式,主要是周围显示的圆角,dialog_random_code_shape.xml文件
这里dialog的自定义先告一段落。
三、代码的编写(popuwindow)
popuwindow
1、我们也还是先定义一个布局
布局的样式:
2、有了布局的样式之后,就开始为布局添加绑定。
① mPopWindowMore.showAtLocation(_view, Gravity.BOTTOM, 0, 0);是设置此popuwindow要显示的位置,这里显示在底部
②setBackgroundAlpha()的方法来使得显示popuwindow的时候,会有变暗的效果,当popuwindow消失的时候,又会恢复。bgAlpha取值为0.0-1.0
③使用mPopWindowMore.setOnDismissListener()来监听popuwindow的消失
设置背景颜色的方法
日常生活中,我们经常会看到应用中那些提示框,有在正中的,有在底部的,这篇文章我来学习一下这两类提示框UI,主要是dialog和popuwindow。
首先上图:
1、dialog
2、popuwindow
二、代码的编写(dialog)
dialog
1、首先我们来构思一下所要显示的样式,基本上是分三个部分,①标题②内容③取消确认键。这里我使用的是layout_weight,是为了控制显示比例,易于适配屏幕。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/view_custom_alter_dialog_title" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:text="@string/view_load_gif_dialog_title" android:textSize="@dimen/view_load_gif_title_text_size" /> <TextView android:id="@+id/view_custom_alter_dialog_content" android:layout_width="match_parent" android:layout_height="0dp" android:text="@string/view_load_gif_dialog_message" android:layout_weight="2" android:gravity="center" android:layout_marginLeft="@dimen/view_load_gif_content_margin_left_right" android:layout_marginRight="@dimen/view_load_gif_content_margin_left_right" android:layout_marginBottom="@dimen/view_load_gif_content_margin_bottom" android:textSize="@dimen/view_load_gif_content_text_size" android:lineSpacingExtra="@dimen/view_load_gif_line_space_extra" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/activity_main_bottom_controller_bg" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.5" android:orientation="horizontal"> <TextView android:id="@+id/view_custom_alter_dialog_cancel" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:textColor="@color/app_main_color" android:text="@string/view_random_code_dialog_cancel" android:textSize="@dimen/view_load_gif_cancel_sure_textsize" /> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/activity_main_bottom_controller_bg" /> <TextView android:id="@+id/view_custom_alter_dialog_sure" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:textColor="@color/app_main_color" android:text="@string/view_random_code_dialog_sure" android:textSize="@dimen/view_load_gif_cancel_sure_textsize" /> </LinearLayout> </LinearLayout> </RelativeLayout>
2、这里我们就已经有一个基本的布局了,然后是自定义这个布局。创建一个类来继承Dialog,实现重写构造函数,然后绑定一些控件。
这里我使用的是按照获取到的手机的屏幕,来控制这个dialog的显示比例,这样可以适配的更加方便。
public class CustomAlertDialog extends Dialog { protected View mView; //ui protected TextView mTextTitle,mTextContent,mTextCancel,mTextSure; public CustomAlertDialog(Context context) { this(context,0); } public CustomAlertDialog(Context context, int themeResId) { super(context, themeResId); mView = LayoutInflater.from(context).inflate(R.layout.view_custom_alert_dialog,null); setContentView(mView); initView(); //setting size Window dialogWindow = this.getWindow(); WindowManager m = getWindow().getWindowManager(); Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用 WindowManager.LayoutParams p = dialogWindow.getAttributes(); // 获取对话框当前的参数值 //手机横竖屏时候 if (context.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){ p.height = (int) (d.getHeight() * 0.25); // 高度设置为屏幕的 p.width = (int) (d.getWidth() * 0.7); // 宽度设置为屏幕的 }else if (context.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){ p.height = (int) (d.getHeight() * 0.3); // 高度设置为屏幕的 p.width = (int) (d.getWidth() * 0.4); // 宽度设置为屏幕的 } dialogWindow.setAttributes(p); } private void initView() { try{ mTextTitle = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_title); mTextContent = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_content); mTextCancel = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_cancel); mTextSure = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_sure); }catch(Exception _e){ ExceptionHandler.onException(_e); } } public void setText(String _title,String _content,String _cancel,String _sure){ try{ if (null != _title) mTextTitle.setText(_title); if (null != _content) mTextContent.setText(_content); if (null != _cancel) mTextCancel.setText(_cancel); if (null != _sure) mTextSure.setText(_sure); }catch(Exception _e){ ExceptionHandler.onException(_e); } } public void setLeftOnclick(View.OnClickListener _onclick){ try{ mTextCancel.setOnClickListener(_onclick); }catch(Exception _e){ ExceptionHandler.onException(_e); } } public void setRightOnclick(View.OnClickListener _onclick){ try{ mTextSure.setOnClickListener(_onclick); }catch(Exception _e){ ExceptionHandler.onException(_e); } } }
3、然后在代码中使用这个控件,这里我们注意一下,还要传入hemeResId的值,因为如果不传入,效果就不会那么好。
public void reDownloadResourceDialog(){ try{ final CustomAlertDialog _customAlterDialog = new CustomAlertDialog(this,R.style.random_code_dialog); _customAlterDialog.show(); _customAlterDialog.setLeftOnclick(new View.OnClickListener() { @Override public void onClick(View v) { _customAlterDialog.dismiss(); } }); _customAlterDialog.setRightOnclick(new View.OnClickListener() { @Override public void onClick(View v) { _customAlterDialog.dismiss(); ActivityActionList.this.reDownloadResources(); } }); }catch(Exception _e){ ExceptionHandler.onException(_e); } }
4、使用themeResId的样式,styles.xml文件中
<!--view_random_dialog--> <style name="random_code_dialog" parent="@android:style/Theme.Dialog"> <item name="android:background">@drawable/dialog_random_code_shape</item> <item name="android:windowIsFloating">true</item> <item name="android:windowIsTranslucent">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowBackground">@android:color/transparent</item> </style> <!--view_random_dialog end-->
外加background的样式,主要是周围显示的圆角,dialog_random_code_shape.xml文件
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="10dp" /> <solid android:color="@color/common_white" /> </shape>
这里dialog的自定义先告一段落。
三、代码的编写(popuwindow)
popuwindow
1、我们也还是先定义一个布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/activity_exercise_plan_xml_padding"> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/activity_exercise_plan_xml_height" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@drawable/plan_more_show_shape" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/activity_quit_plan_xml_show" android:textSize="@dimen/activity_exercise_plan_xml_show_sp" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="@dimen/activity_exercise_plan_xml_splitor" android:background="@color/activity_main_bottom_controller_bg" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.5" android:background="@drawable/plan_more_quit_shape" android:orientation="vertical"> <TextView android:id="@+id/exercise_plan_more_quit" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/activity_quit_plan_xml_quit" android:textColor="@android:color/holo_red_light" android:textSize="@dimen/activity_exercise_plan_xml_text_sp" /> </LinearLayout> <Space android:layout_width="match_parent" android:layout_height="@dimen/activity_exercise_plan_xml_space" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.5" android:background="@drawable/plan_more_cancel_shape" android:orientation="vertical"> <TextView android:id="@+id/exercise_plan_more_cancel" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/activity_quit_plan_xml_cancel" android:textColor="@android:color/holo_blue_light" android:textSize="@dimen/activity_exercise_plan_xml_text_sp" /> </LinearLayout> </LinearLayout> </LinearLayout>
布局的样式:
2、有了布局的样式之后,就开始为布局添加绑定。
① mPopWindowMore.showAtLocation(_view, Gravity.BOTTOM, 0, 0);是设置此popuwindow要显示的位置,这里显示在底部
②setBackgroundAlpha()的方法来使得显示popuwindow的时候,会有变暗的效果,当popuwindow消失的时候,又会恢复。bgAlpha取值为0.0-1.0
③使用mPopWindowMore.setOnDismissListener()来监听popuwindow的消失
public void showPopwindowQuitPlan(View _view) { View _viewPopwindow = null; TextView _quitTextView,_cancelTextView; try { _viewPopwindow = LayoutInflater.from(this).inflate(R.layout.view_exercise_plan_more,null); _quitTextView = (TextView) _viewPopwindow.findViewById(R.id.exercise_plan_more_quit); _cancelTextView = (TextView) _viewPopwindow.findViewById(R.id.exercise_plan_more_cancel); if (null != _viewPopwindow){ mPopWindowMore = new PopupWindow(_viewPopwindow, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, true); mPopWindowMore.setTouchable(true); mPopWindowMore.showAtLocation(_view, Gravity.BOTTOM, 0, 0); mPopWindowMore.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss() { setBackgroundAlpha(1f); } }); } if (null != _quitTextView){ _quitTextView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //确认点击 } }); } if (null != _cancelTextView){ _cancelTextView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //取消点击 } }); } }catch (Exception _e){ ExceptionHandler.onException(_e); } }
设置背景颜色的方法
public void setBackgroundAlpha(float bgAlpha) { WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.alpha = bgAlpha; //0.0-1.0 getWindow().setAttributes(lp); }
相关文章推荐
- Android界面之常用的圆角提示框Dialog
- Android 常用dialog提示对话框
- 常用的android提示对话框
- Android的对话框常用的有两种:PopupWindow和Dialog。
- Android UI设计——画廊Gallery与提示框Dialog的综合运用
- Android 常用对话框Dialog封装
- android中常用的弹出提示框
- Android常用Dialog总结
- Android中自定义Dialog常用的两种方式
- android中常用的弹出提示框
- Android开发之四(十五):常用控件之对话框(Dialog)
- android中常用的弹出提示框
- android dialog圆角显示及解决出现的黑色棱角.(友情提示)
- android中常用的弹出提示框
- 常用的android提示对话框
- android基础学习(6)-------AlertDialog.Builder提示对话框
- android中常用的弹出提示框
- Android开发笔记--Dialog提示框
- 【Android常用控件】EditText常用属性【一】:空白提示/文本域/特殊字符/数字类型/等属性设置
- android中常用的弹出提示框