Android仿QQ消息提示实现d出式对话框

Android仿QQ消息提示实现d出式对话框,第1张

概述本文在《7种形式的AndroidDialog使用实例》在这篇文章的基础进行学习,具体内容如下

本文在《7种形式的Android Dialog使用实例》在这篇文章的基础进行学习,具体内容如下

@H_502_3@1.概述

  androID原生控件向来以丑著称(新推出的Material Design当另说),因此几乎所有的应用都会特殊定制自己的UI样式。而其中d出式提示框的定制尤为常见,本篇我们将从模仿QQ退出提示框来看一下常见的几种自定义提示框的实现方式。
  这里使用的几种d出框实现方法概括为以下几种:

自定义Dialog
自定义PopupWindow
自定义Layout VIEw
Activity的Dialog样式
FragmentDialog

先看下最终的效果图:

@H_502_3@2.实践

  前面提到几种实现方式均可以达到同样的演示效果,但其中又是各有不同。这里先逐一列举各种具体实现,最后加以综述总结和归纳吧。
  在此之前呢,先看一下这里实现的对话框共用布局layout/confirm_dialog.xml 。

<?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:layout_marginleft="5dp" androID:layout_marginRight="5dp" androID:background="@drawable/confirm_dialog_bg" androID:orIEntation="vertical"> <linearLayout  androID:layout_wIDth="fill_parent"  androID:layout_height="wrap_content"  androID:background="@androID:color/transparent"  androID:orIEntation="vertical" >  <TextVIEw   androID:ID="@+ID/Title_name"   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content"   androID:gravity="center_horizontal"   androID:paddingBottom="10dp"   androID:paddingtop="15dp"   androID:text="Message Title"    androID:textcolor="@androID:color/black"   androID:textSize="20sp"   androID:visibility="visible" /> </linearLayout> <linearLayout  androID:layout_wIDth="fill_parent"  androID:layout_height="fill_parent"  androID:background="@androID:color/transparent"  androID:orIEntation="vertical" >  <TextVIEw    androID:ID="@+ID/text_vIEw"   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content"   androID:layout_marginleft="15dp"   androID:layout_marginRight="15dp"   androID:layout_margintop="10dp"   androID:textcolor="@androID:color/black"   androID:text="this is message content"   androID:textSize="16dip"/>  <VIEw   androID:layout_wIDth="match_parent"   androID:layout_height="1px"   androID:layout_margintop="15dip"   androID:background="#c5c5c5" />  <linearLayout   androID:layout_wIDth="fill_parent"   androID:layout_height="50dip"   androID:background="@androID:color/transparent"   androID:gravity="center_horizontal"   androID:orIEntation="horizontal" >   <!-- 取消按钮 -->   <button    androID:ID="@+ID/btn_cancel"    androID:layout_wIDth="wrap_content"    androID:layout_height="match_parent"    androID:layout_weight="1"    androID:text="Cancel"    androID:textStyle="bold"    androID:textcolor="#0072c6"    androID:background="@drawable/confirm_dialog_cancel_selector"    androID:textSize="15sp" />   <!-- 确认按钮 -->   <VIEw     androID:layout_wIDth="1px"    androID:layout_height="match_parent"    androID:layout_gravity="center_horizontal"    androID:background="#c5c5c5"/>   <button    androID:ID="@+ID/btn_ok"    androID:layout_wIDth="wrap_content"    androID:layout_height="match_parent"    androID:layout_weight="1"    androID:text="OK"    androID:textStyle="bold"    androID:textcolor="#0072c6"    androID:background="@drawable/confirm_dialog_ok_selector"    androID:textSize="15sp" />  </linearLayout> </linearLayout></linearLayout>

仅仅通过布局预览就可以看到效果了:

下边我们分别通过上述几种方式来使用这个布局展示消息提示框。   

@[email protected] Dialog 

这个是最基本也最常见的非阻塞式对话框。具体形式可分为七种,详细参见网上各种文章,随便引用一篇7种形式的Android Dialog使用举例。
(注:官方在fragmentDialog推出后就不在推荐直接使用Dialog来创建对话框,这是后话)

我们这里自定义的提示框ConfirmDialog继承自Dialog,使用confirm_dialog.xml 初始化布局,绑定相应事件。

public class ConfirmDialog extends Dialog { private Context context; private TextVIEw TitleTv,contentTv; private VIEw okBtn,cancelBtn; private OnDialogClickListener dialogClickListener; public ConfirmDialog(Context context) {  super(context);  this.context = context;  initalize(); } //初始化VIEw private voID initalize() {  LayoutInflater inflater = LayoutInflater.from(context);  VIEw vIEw = inflater.inflate(R.layout.confirm_dialog,null);  setContentVIEw(vIEw);  initwindow();  TitleTv = (TextVIEw) findVIEwByID(R.ID.Title_name);  contentTv = (TextVIEw) findVIEwByID(R.ID.text_vIEw);  okBtn = findVIEwByID(R.ID.btn_ok);  cancelBtn = findVIEwByID(R.ID.btn_cancel);  okBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    dismiss();    if(dialogClickListener != null){     dialogClickListener.onOKClick();    }   }  });  cancelBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    dismiss();    if(dialogClickListener != null){     dialogClickListener.onCancelClick();    }   }  }); } /** *添加黑色半透明背景 */ private voID initwindow() {  Window dialogWindow = getwindow();  dialogWindow.setBackgroundDrawable(new colorDrawable(0));//设置window背景  dialogWindow.setSoftinputMode(WindowManager.LayoutParams.soFT_input_STATE_HIDDEN | WindowManager.LayoutParams.soFT_input_ADJUST_PAN);//设置输入法显示模式  WindowManager.LayoutParams lp = dialogWindow.getAttributes();  displayMetrics d = context.getResources().getdisplayMetrics();//获取屏幕尺寸  lp.wIDth = (int) (d.wIDthPixels * 0.8); //宽度为屏幕80%   lp.gravity = Gravity.CENTER;  //中央居中  dialogWindow.setAttributes(lp); } public voID setonDialogClickListener(OnDialogClickListener clickListener){  dialogClickListener = clickListener; } /** *添加按钮点击事件 */ public interface OnDialogClickListener{  voID onOKClick();  voID onCancelClick(); }}

@[email protected] PopupWindow 

  PopupWindow是阻塞式对话框,只有在退出 *** 作时候程序才会继续运行。另外PopupWindow可以根据自由确定自身位置。按照位置有无偏移分,可以分为偏移和无偏移两种;按照参照物的不同,可以分为相对于某个控件(Anchor锚)和相对于父控件。具体如下

showAsDropDown(VIEw anchor):相对某个控件的位置(正左下方),无偏移
showAsDropDown(VIEw anchor,int xoff,int yoff):相对某个控件的位置(正下方),有偏移
showAtLocation(VIEw parent,int gravity,int x,int y):相对于父控件的位置(例如正中央Gravity.CENTER,下方Gravity.BottOM等),可以设置偏移或无偏移

这里只是达到同样的显示效果,仅示范下showAtBottom的使用:

public class ConfirmPopWindow extends PopupWindow{ private Context context; private TextVIEw TitleTv,cancelBtn; private OnDialogClickListener dialogClickListener; public ConfirmPopWindow(Context context) {  super(context);  this.context = context;  initalize(); } private voID initalize() {  LayoutInflater inflater = LayoutInflater.from(context);  VIEw vIEw = inflater.inflate(R.layout.confirm_dialog,null);  setContentVIEw(vIEw);  initwindow();  TitleTv = (TextVIEw) vIEw.findVIEwByID(R.ID.Title_name);  contentTv = (TextVIEw) vIEw.findVIEwByID(R.ID.text_vIEw);  okBtn = vIEw.findVIEwByID(R.ID.btn_ok);  cancelBtn = vIEw.findVIEwByID(R.ID.btn_cancel);  okBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    dismiss();    if(dialogClickListener != null){     dialogClickListener.onOKClick();    }   }  });  cancelBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    dismiss();    if(dialogClickListener != null){     dialogClickListener.onCancelClick();    }   }  }); } private voID initwindow() {  this.setBackgroundDrawable(new colorDrawable(0));   displayMetrics d = context.getResources().getdisplayMetrics();  this.setWIDth((int) (d.wIDthPixels * 0.8));   this.setHeight(LayoutParams.WRAP_CONTENT);   this.setFocusable(true);   this.setoutsIDetouchable(true);   this.update();  } public voID showAtBottom(VIEw vIEw){  showAsDropDown(vIEw,Math.abs((vIEw.getWIDth() - getWIDth())/2),20); } public voID setonDialogClickListener(OnDialogClickListener clickListener){  dialogClickListener = clickListener; } public interface OnDialogClickListener{  voID onOKClick();  voID onCancelClick(); }}

@[email protected] 自定义Layout 

  前边两种是系统封装好的VIEw,同样的,我们也可以自定义layout布局来实现的d出式对话框效果。既然是自定义,有必要细致讲述一下,
  Confirmlayout继承自FrameLayout,通过获取窗口管理器WindowManager 将我们的自定义view添加到窗口最前端并显示出来,达到预期效果。     

1.初始化VIEw

  先初始化半透明黑色背景和对应的confirm_layout,然后给窗体添加按键返回事件

 protected voID initialize() {  initBackground();//初始化黑色背景  initContentVIEw();//初始化confirm_layout 对应的VIEw  windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);  setonKeyListener(new OnKeyListener() { //添加按键返回事件   @OverrIDe   public boolean onKey(VIEw v,int keyCode,KeyEvent event) {    if (KeyEvent.KEYCODE_BACK == keyCode && KeyEvent.ACTION_DOWN == event.getAction()) {     hIDe();//隐藏当前vIEw     return true;    }    return false;   }  setFocusable(true); //可获得焦点  setFocusableIntouchMode(true); //可触碰获得焦点 }

2.显示自定义view : show()

  调用显示的时候保证在主线程中,如果当前VIEw没有被添加至窗口中,则添加;然后使用动画渐变效果显示背景,最后动画完成时显示当前对话框VIEw.

public voID show() {  ((Activity) getContext()).runOnUiThread(new Runnable() {   @OverrIDe   public voID run() {    if (getParent() == null) { //没有添加则添加至窗体     //获取窗体的布局属性,设置左上角对齐,填充父容器     WindowManager.LayoutParams wlp = new WindowManager.LayoutParams();     wlp.type = WindowManager.LayoutParams.TYPE_APPliCATION;     wlp.format = PixelFormat.transparent;     wlp.gravity = Gravity.left | Gravity.top;     wlp.wIDth = LayoutParams.MATCH_PARENT;     wlp.height = LayoutParams.MATCH_PARENT;     windowManager.addVIEw(Confirmlayout.this,wlp);    }    showBackGround();//显示背景动画和自定义view   }  }); } /** *显示背景动画 */ protected voID showBackGround() {  if (isShowing)   return;  isShowing = true;  background.clearanimation();  background.setVisibility(VIEw.VISIBLE);  AlphaAnimation an = new AlphaAnimation(0,1);  an.setDuration(durationMillis);  background.startAnimation(an); }

3.隐藏自定义view : hIDe()

  隐藏对话框的方法跟show()恰恰相反,首先调用隐藏动画,动画结束从窗体中移除VIEw

 public voID hIDe() {  ((Activity) getContext()).runOnUiThread(new Runnable() {   @OverrIDe   public voID run() {    hIDeBackGround();//隐藏背景    if (getParent() != null)     windowManager.removeVIEw(Confirmlayout.this);//移除vIEw   }  }); } /** *隐藏背景背景动画 */ protected voID hIDeBackGround() {  if (!isShowing)   return;  isShowing = false;  background.clearanimation();  AlphaAnimation an = new AlphaAnimation(1,0);  an.setDuration(durationMillis);  an.setAnimationListener(new AnimationListener() {   @OverrIDe   public voID onAnimationStart(Animation animation) {   }   @OverrIDe   public voID onAnimationRepeat(Animation animation) {   }   @OverrIDe   public voID onAnimationEnd(Animation animation) {    background.setVisibility(VIEw.GONE);   }  });  background.startAnimation(an); }

其他部分同上,不再一一贴出,详细可查看示例源码。   

@[email protected] Activity的Dialog样式 

  通过使用主题theme来实现Activity作为一个dialog来显示的效果。我们首先在 AndroIDManifest.xml 中配置该activity,使得

androID:theme=”@androID:style/theme.Dialog”
同样我们可以自定义继承于theme.Dialog的style样式增加自定义属性,比如:

<resources> <style name="DialogStyle" parent="@androID:style/theme.Dialog">  <item name="androID:windowBackground">@androID:color/transparent</item>  <item name="androID:windowFrame">@null</item>  <item name="androID:windowNoTitle">true</item>  <item name="androID:windowIsfloating">true</item>  <item name="androID:windowIsTranslucent">true</item>  <item name="androID:windowFullscreen">true</item>  <item name="androID:backgroundDimEnabled">true</item> </style></resources>

然后使用 > androID:theme=”@style/DialogStyle” 达到上述效果。具体实现跟dialog类似:

public class ConfirmActivity extends Activity{ private TextVIEw TitleTv,cancelBtn; private OnDialogClickListener dialogClickListener; @OverrIDe protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  requestwindowFeature(Window.FEATURE_NO_Title);  setContentVIEw(R.layout.confirm_dialog);  initVIEws();  initListeners(); } private voID initVIEws() {  initwindow();  TitleTv = (TextVIEw) findVIEwByID(R.ID.Title_name);  contentTv = (TextVIEw) findVIEwByID(R.ID.text_vIEw);  okBtn = findVIEwByID(R.ID.btn_ok);  cancelBtn = findVIEwByID(R.ID.btn_cancel);  okBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    finish();    if(dialogClickListener != null){     dialogClickListener.onOKClick();    }   }  }); } private voID initwindow() {  getwindow().setBackgroundDrawable(new colorDrawable(0));  getwindow().setSoftinputMode(WindowManager.LayoutParams.soFT_input_STATE_HIDDEN |    WindowManager.LayoutParams.soFT_input_ADJUST_PAN); } private voID initListeners() {  cancelBtn.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    finish();    if(dialogClickListener != null){     dialogClickListener.onCancelClick();    }   }  }); } public voID setonDialogClickListener(OnDialogClickListener clickListener){  dialogClickListener = clickListener; } public interface OnDialogClickListener{  voID onOKClick();  voID onCancelClick(); }}

@[email protected] DialogFragment 

  DialogFragment在androID 3.0时被引入并被加以推广。
  我们在使用DialogFragment时,至少需要实现onCreateVIEw或者onCreateDIalog方法。这里在onCreateDIalog中直接返回前面写好的ConfirmDialog来实现这个Fragment。

public class ConfirmFragment extends DialogFragment{ @OverrIDe @NonNull public Dialog onCreateDialog(Bundle savedInstanceState) {  return new ConfirmDialog(getActivity()); }public voID setonDialogClickListener(OnDialogClickListener clickListener){  ((ConfirmDialog)getDialog()).setonDialogClickListener(clickListener); }}

  当然并不推荐偷懒直接返回前面定义好的ConfirmDialog。我们实际上使用fragment的onCreateVIEw也更合理和简介,他可以产生同样的Dialog效果,同时可以作为内嵌fragment引用。从使用总结来看,FragmentDialog 相较于Dialog有两点好处:

@H_502_3@在手机配置变化,导致Activity需要重新创建时,例如旋屏,DialogFragment对话框将会由FragmentManager自动重建,然而Dialog实现的对话框则不会重新生成;

@H_502_3@DialogFragment还拥有fragment的优点,即可以在一个Activity内部实现回退(因为FragmentManager会管理一个回退栈 ,另外,他可以直接作为一个普通Fragment嵌套在其他布局里边;

@H_502_3@3.小结

  从实现效果来看我们确实有很多选择,当然我们用的最多的必然要数Dialog(FragmentDialog)和PopupWindow了。但在一般情况下,选择Dialog和PopupWindow是由我们的具体使用场景来定。比如有些提示消息,比较适合Dialog,而d出一些具体选项,需要等待选择结果等情况,更倾向于使用PopupWindow了。

FragmentDialog的几种使用场景

  

PopupWindow的几种使用场景

  

@H_502_3@4.补充

  其实还有种长按d出菜单,这种除了可以通过上述方法d出菜单选项外,还可以通过系统提供的 VIEw.setonCreateContextMenu()方法来实现。比如:

itemVIEw.setonCreateContextMenuListener(new VIEw.OnCreateContextMenuListener() {    @OverrIDe    public voID onCreateContextMenu(ContextMenu menu,VIEw v,ContextMenu.ContextMenuInfo menuInfo) {     menu.add("删除").setonMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {      @OverrIDe      public boolean onMenuItemClick(MenuItem item) {       //执行删除 *** 作       return true;      }     });    }   });

长按d出,基本效果为:

有兴趣的不妨试一下。

  后边的话我们先从源码角度来看一下这里讲的几种实现方案的具体原理,最后通过一些简易封装来做一个类似IOS上的ActionSheet控件的效果。
  演示效果大概为:   

  

  详情请继续关注接下来的博文。

最后附上本篇所讲内容的源码:示例源码demo(已重新更新)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿QQ消息提示实现d出式对话框全部内容,希望文章能够帮你解决Android仿QQ消息提示实现d出式对话框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1147880.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存