Android常用提示框(dialog和popuwindow)

来源:互联网 发布:电脑端怎么看手机淘宝 编辑:程序博客网 时间:2024/05/21 07:13

一、UI显示
日常生活中,我们经常会看到应用中那些提示框,有在正中的,有在底部的,这篇文章我来学习一下这两类提示框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);    }
0 0