码迷，mamicode.com
首页 > 移动开发 > 详细

android-自定义对话框视图及参数传递

时间：2015-07-23 13:29:14      阅读：183      评论：0      收藏：0      [点我收藏+]

标签：

一、雏形构建

先给大家看下这小节的效果图：

自定义一个对话框，内容是四个ImageView横排；

技术分享

1、Dialog布局

根据上图的对话框样式，我们看一下Dialog的布局定义（custom_dialog.xml）

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:id="@+id/log_in_layout"  
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="wrap_content"  
  7.     android:orientation="horizontal">  
  8.   
  9.     <ImageView  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="100dip"  
  12.         android:src="@drawable/animal1"  
  13.         android:clickable="true"  
  14.         android:layout_weight="1"/>  
  15.     <ImageView  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="100dip"  
  18.         android:src="@drawable/animal2"  
  19.         android:clickable="true"  
  20.         android:layout_weight="1"/>  
  21.     <ImageView  
  22.         android:layout_width="match_parent"  
  23.         android:layout_height="100dip"  
  24.         android:src="@drawable/animal3"  
  25.         android:clickable="true"  
  26.         android:layout_weight="1"/>  
  27.     <ImageView  
  28.         android:layout_width="match_parent"  
  29.         android:layout_height="100dip"  
  30.         android:src="@drawable/animal4"  
  31.         android:clickable="true"  
  32.         android:layout_weight="1"/>  
  33.   
  34. </LinearLayout>  

2、从Dialog派生对话框类

 

有关构造函数：
有三种构造函数，现在我这里使用重写了两个，这里只需要使用第一个，即传进去context即可；

有关OnCreate()
在OnCreate()时，利用LayoutInflater获取我们对话框的View，然后利用SetContentView指定为我们CustomDialog类的布局。
[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog {  
  2.     Context mContext;  
  3.     public CustomDialog (Context context){  
  4.         super(context);  
  5.         mContext = context;  
  6.     }  
  7.     public CustomDialog(Context context, int theme) {  
  8.         super(context, theme);  
  9.         mContext = context;  
  10.     }  
  11.   
  12.     @Override  
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.   
  16.         LayoutInflater inflater = (LayoutInflater) mContext  
  17.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  18.         View layout = inflater.inflate(R.layout.custom_dialog, null);  
  19.         this.setContentView(layout);  
  20.     }  
  21. }  

3、主函数（MainActivity）

在MainActivity中，我们写一个Button,当用户点击的时候弹出我们自定义的对话框实例

MainActivity的布局：（activity_main.xml）

 

[html] view plaincopy技术分享技术分享
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity">  
  6.   
  7.     <Button  
  8.         android:id="@+id/btn_pop_dialog"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="弹出对话框"/>  
  12.   
  13. </RelativeLayout>  

代码中的处理：(MainActivity.java)
在点击Btn的时候，创建CustomDialog类的实例，并显示

 

 

[java] view plaincopy技术分享技术分享
 
  1. public class MainActivity extends Activity {  
  2.   
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.   
  8.         Button btn = (Button)findViewById(R.id.btn_pop_dialog);  
  9.         btn.setOnClickListener(new View.OnClickListener() {  
  10.             @Override  
  11.             public void onClick(View view) {  
  12.                 CustomDialog dialog = new  CustomDialog(MainActivity.this);  
  13.                 dialog.show();  
  14.             }  
  15.         });  
  16.     }  
  17.   
  18. }  
这部分源码在文章最底部给出；

二、定义对话框样式

这里再回头看看上面弹出的对话框：

技术分享

在布局中，我们只定义了一个水平布局，里面放了四个ImageView，即那四个小动物，那上面那一坨是哪来的呢（我用红笔圈出来的那块）？能不能去掉？这节，我们就说说有关样式的问题。

第一个问题，只所有上面那一坨，是因为我们没有指定对话框样式，系统会使用默认样式，那一坨就是标题栏。

要去掉的话，我们就需要自定义样式。

1、自定义样式

我们的样式是写在res/values文件夹下的style.xml文件中的，如图，如果没有style.xml，自已新建一个，位置如图：

技术分享

这里定义的样式代码是这样的：

 

[html] view plaincopy技术分享技术分享
 
  1. <style name="dialog" parent="android:Theme.Dialog">  
  2.     <item name="android:windowFrame">@null</item>  
  3.     <item name="android:windowIsFloating">true</item>  
  4.     <item name="android:windowContentOverlay">@null</item>  
  5.     <item name="android:windowNoTitle">true</item>  
  6. </style>  

先对这几个参数解释一下：

 

android:windowFrame:界面对应的前景图片；
android:windowIsFloating:表示浮在屏幕上的，如果在这里使用了，整个layout就会在 屏幕中心，相当于浮在屏幕上，所以这个只适用于dialog
android:windowContentOverlay:表示标题栏的阴影部分的样式，使用图片或者颜色
android:windowNoTitle:标题栏是否隐藏，这就是我们上面显示的标题栏

有关样式的内容很多很杂，这里有篇文章大家可以参考下《Andriod中Style/Theme原理以及Activity界面文件选取过程浅析》，有机会给大家总结一下有关样式和主题的内容，到时再细讲，这里不是本篇的重点，就不再细讲了。

2、使用样式

方法一：

这里有两种方法来使用样式，主要还是利用构造函数，还记得我们上面说过，对话框的两个构造函数：

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog {  
  2.     Context mContext;  
  3.   
  4.     public CustomDialog(Context context) {  
  5.         super(context);  
  6.         mContext = context;  
  7.     }  
  8.   
  9.     public CustomDialog(Context context, int theme) {  
  10.         super(context, theme);  
  11.         mContext = context;  
  12.     }  
  13.   
  14.     …………  
  15. }  

看第二个就是我们的Theme样式，所以第一种使用样式的方法是在构造时直接将样式传进来，如果这样使用，那我们在构造对话框时应该是这样的“：

 

 

[java] view plaincopy技术分享技术分享
 
  1. public class MainActivity extends Activity {  
  2.   
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.         setContentView(R.layout.activity_main);  
  7.   
  8.         Button btn = (Button)findViewById(R.id.btn_pop_dialog);  
  9.         btn.setOnClickListener(new View.OnClickListener() {  
  10.             @Override  
  11.             public void onClick(View view) {  
  12.                 CustomDialog dialog = new  CustomDialog(MainActivity.this,R.style.dialog);  
  13.                 dialog.show();  
  14.             }  
  15.         });  
  16.     }  
  17. }  

即在新建CustomDialog实例时，第二个参数传进来我们上面定义的样式。

 

方法二：

第二种方法，就是我们在构造时，不让别人传样式，只让传进来Context，但在内部，我们利用Super(context,theme)来指定样式，代码如下：

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog {  
  2.     Context mContext;  
  3.   
  4.     public CustomDialog(Context context) {  
  5.         super(context,R.style.dialog);  
  6.         mContext = context;  
  7.     }  
  8.   
  9.     …………  
  10. }  

这种情况一般用在我们封装代码时，不让其它人在外部改变我们的样式时使用的。
无论使用哪种方法，我们就已经指定我我们的对话框样式，现在的效果是这样的：

 

技术分享

看到了没，上面的标题栏没了，下面再看看有关参数传递的问题

三、参数传递

这里涉及到两个问题：传进去和传出来；

传进去：下面有两个按钮，当用户点第一个按钮时，在对话框中显示"From btn 1"，如果用户点击第二个按钮，在对话框中显示“From btn 2”

传出来：这四个图片都是可以点击的，当用户点击任何一个图片，把它的ID传出来，并设置到我们的MainActivity中；

这里为了好理解，更改了对话框的布局，将水平布局改成了垂直布局。并且在MainActiviy下面加了一个ImageView.

技术分享

1、传进去

往对话框里传参数，一般就是利用构造函数来完成的，很简单，即在对话框的构造函数上加上我们自己想要传的参数，这里我们需要额外传一个字符串，来表示从哪个BTN来的。

所以对话框的构造函数就变成了这样：

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog{  
  2.     private Context mContext;  
  3.     private String mStr;  
  4.   
  5.     public CustomDialog(Context context, String str, int theme) {  
  6.         super(context, theme);  
  7.         mContext = context;  
  8.         mStr = str;  
  9.     }  
  10.   
  11.     …………  
  12. }  

在使用的时候，也很简单：

 

 

[java] view plaincopy技术分享技术分享
 
  1. Button btn2 = (Button)findViewById(R.id.btn_pop_dialog_2);  
  2. btn2.setOnClickListener(new View.OnClickListener() {  
  3.     @Override  
  4.     public void onClick(View view) {  
  5.         CustomDialog dialog = new  CustomDialog(MainActivity.this,"From btn 2",R.style.dialog);  
  6.         dialog.show();  
  7.     }  
  8. });  

直接利用构造函数传参即可

 

 

2、传出来

利用构造函数传参数大家都知道，但要怎么把用户的操作信息传出来就不是那么简单了，这里就要利用回调来实现了！

 

回调函数的使用主要依照下面这些步骤：

在对话框中：

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog {  
  2.   
  3.     // 利用interface来构造一个回调函数  
  4.     public interface ICustomDialogEventListener {  
  5.         public void customDialogEvent(int valueYouWantToSendBackToTheActivity);  
  6.     }  
  7.   
  8.     private ICustomDialogEventListener onCustomDialogEventListener;  
  9.   
  10.     // 在构造函数中，设置进去回调函数  
  11.     public CustomDialog(Context context,  
  12.                         ICustomDialogEventListener onCustomDialogEventListener) {  
  13.         super(context);  
  14.         this.onCustomDialogEventListener = onCustomDialogEventListener;  
  15.     }  
  16.   
  17.     //当你想把值传回去的时候，调用回调函数将值设置进去  
  18.     @Override  
  19.     public void onCreate(Bundle savedInstanceState)  
  20.     {  
  21.         Button btnOk = (Button) findViewById(R.id.customDialogButton);  
  22.         btnOk.setOnClickListener( new Button.OnClickListener()  
  23.         {  
  24.             public void onClick(View v) {  
  25.                 onCustomDialogEventListener.customDialogEvent(valueYouWantToSendBackToTheActivity);  
  26.                 dismiss();  
  27.             }  
  28.         });  
  29.     }  
  30. }  

在构造对话框时：

 

 

[java] view plaincopy技术分享技术分享
 
  1. final CustomDialog dialog = new CustomDialog(this, new ICustomDialogEventListener() {  
  2.     public void customDialogEvent(int value) {  
  3.         //在这里就获取到了从对话框传回来的值  
  4.     }  
  5. });  

大致使用流程就是这样的，下面就把我们上面的效果利用回调函数实现出来；

 

首先在对话框中新建一个回调函数（接口），并且在对话框的构造方法中把回调函数传进来：

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog implements View.OnClickListener {  
  2.   
  3.     //增加一个回调函数,用以从外部接收返回值  
  4.     public interface ICustomDialogEventListener {  
  5.         public void customDialogEvent(int id);  
  6.     }  
  7.   
  8.     private ICustomDialogEventListener mCustomDialogEventListener;  
  9.     private Context mContext;  
  10.     private String mStr;  
  11.     //把回调函数传进来  
  12.     public CustomDialog(Context context, String str, ICustomDialogEventListener listener, int theme) {  
  13.         super(context, theme);  
  14.         mContext = context;  
  15.         mStr = str;  
  16.         mCustomDialogEventListener = listener;  
  17.     }  
  18.   
  19.     …………  
  20. }  

然后在OnCreate() 函数中设定ImageView的点击事件，我们将CustomDialog类继承View.OnClickListener接口，对点击事件统一处理：

 

 

[java] view plaincopy技术分享技术分享
 
  1. private void bindImageClickEvent(View layout){  
  2.     ImageView img1 = (ImageView)layout.findViewById(R.id.dialog_image1);  
  3.     ImageView img2 = (ImageView)layout.findViewById(R.id.dialog_image2);  
  4.     ImageView img3 = (ImageView)layout.findViewById(R.id.dialog_image3);  
  5.     ImageView img4 = (ImageView)layout.findViewById(R.id.dialog_image4);  
  6.     img1.setOnClickListener(this);  
  7.     img2.setOnClickListener(this);  
  8.     img3.setOnClickListener(this);  
  9.     img4.setOnClickListener(this);  
  10. }  
  11.       
  12. @Override  
  13. protected void onCreate(Bundle savedInstanceState) {  
  14.     super.onCreate(savedInstanceState);  
  15.   
  16.     LayoutInflater inflater = (LayoutInflater) mContext  
  17.             .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  18.     View layout = inflater.inflate(R.layout.custom_dialog, null);  
  19.   
  20.     TextView tv = (TextView)layout.findViewById(R.id.dialog_text);  
  21.     tv.setText(mStr);  
  22.   
  23.     bindImageClickEvent(layout);//绑定ImageView点击事件  
  24.      
  25.     this.setContentView(layout);  
  26. }  

在OnCreate()中，首先将传进来的String字符串设置到对话框的TextView中；然后绑定各个ImageView的点击事件
然后 就是在OnClick中的处理：

 

主要是根据用户当前点击的ImageView的ID，把这个ImageView所用的图片的DrawableID返回给MainActivity，代码如下：

 

[java] view plaincopy技术分享技术分享
 
  1. public void onClick(View view) {  
  2.     int id = view.getId();  
  3.     int drawableID = -1;  
  4.     switch (id){  
  5.         case R.id.dialog_image1:  
  6.             drawableID = R.drawable.animal1;  
  7.             break;  
  8.         case R.id.dialog_image2:  
  9.             drawableID = R.drawable.animal2;  
  10.             break;  
  11.         case R.id.dialog_image3:  
  12.             drawableID = R.drawable.animal3;  
  13.             break;  
  14.         case R.id.dialog_image4:  
  15.             drawableID = R.drawable.animal4;  
  16.             break;  
  17.     }  
  18.     if (drawableID != -1) {  
  19.         mCustomDialogEventListener.customDialogEvent(drawableID);  
  20.     }  
  21.     dismiss();  
  22. }  

这样就把对话框的构造过程讲完了，完整的对话框代码是这样的：

 

 

[java] view plaincopy技术分享技术分享
 
  1. public class CustomDialog extends Dialog implements View.OnClickListener{  
  2.   
  3.     //增加一个回调函数,用以从外部接收返回值  
  4.     public interface ICustomDialogEventListener {  
  5.         public void customDialogEvent(int id);  
  6.     }  
  7.   
  8.     private ICustomDialogEventListener mCustomDialogEventListener;  
  9.     private Context mContext;  
  10.     private String mStr;  
  11.   
  12.     public CustomDialog(Context context) {  
  13.         super(context);  
  14.         mContext = context;  
  15.     }  
  16.   
  17.     public CustomDialog(Context context, String str,ICustomDialogEventListener listener,int theme) {  
  18.         super(context, theme);  
  19.         mContext = context;  
  20.         mStr = str;  
  21.         mCustomDialogEventListener = listener;  
  22.     }  
  23.     private void bindImageClickEvent(View layout){  
  24.         ImageView img1 = (ImageView)layout.findViewById(R.id.dialog_image1);  
  25.         ImageView img2 = (ImageView)layout.findViewById(R.id.dialog_image2);  
  26.         ImageView img3 = (ImageView)layout.findViewById(R.id.dialog_image3);  
  27.         ImageView img4 = (ImageView)layout.findViewById(R.id.dialog_image4);  
  28.         img1.setOnClickListener(this);  
  29.         img2.setOnClickListener(this);  
  30.         img3.setOnClickListener(this);  
  31.         img4.setOnClickListener(this);  
  32.     }  
  33.   
  34.     @Override  
  35.     protected void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.   
  38.         LayoutInflater inflater = (LayoutInflater) mContext  
  39.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  40.         View layout = inflater.inflate(R.layout.custom_dialog, null);  
  41.   
  42.         TextView tv = (TextView)layout.findViewById(R.id.dialog_text);  
  43.         tv.setText(mStr);  
  44.   
  45.         bindImageClickEvent(layout);  
  46.   
  47.         this.setContentView(layout);  
  48.     }  
  49.   
  50.     @Override  
  51.     public void onClick(View view) {  
  52.         int id = view.getId();  
  53.         int drawableID = -1;  
  54.         switch (id){  
  55.             case R.id.dialog_image1:  
  56.                 drawableID = R.drawable.animal1;  
  57.                 break;  
  58.             case R.id.dialog_image2:  
  59.                 drawableID = R.drawable.animal2;  
  60.                 break;  
  61.             case R.id.dialog_image3:  
  62.                 drawableID = R.drawable.animal3;  
  63.                 break;  
  64.             case R.id.dialog_image4:  
  65.                 drawableID = R.drawable.animal4;  
  66.                 break;  
  67.         }  
  68.         if (drawableID != -1) {  
  69.             mCustomDialogEventListener.customDialogEvent(drawableID);  
  70.         }  
  71.         dismiss();  
  72.     }  
  73. }  

下面就是构造对话框的过程了：

 

在MainAcitivity中，当点击一个按钮时，new一个ICustomDialogEventListener实例来接收传过来的值；

 

[java] view plaincopy技术分享技术分享
 
  1. Button btn = (Button)findViewById(R.id.btn_pop_dialog_1);  
  2. btn.setOnClickListener(new View.OnClickListener() {  
  3.     @Override  
  4.     public void onClick(View view) {  
  5.         CustomDialog dialog = new  CustomDialog(MainActivity.this,"From btn 1",new CustomDialog.ICustomDialogEventListener() {  
  6.             @Override  
  7.             public void customDialogEvent(int id) {  
  8.                 ImageView imageView = (ImageView)findViewById(R.id.main_image);  
  9.                 imageView.setImageDrawable(getResources().getDrawable(id));  
  10.             }  
  11.         },R.style.dialog);  
  12.         dialog.show();  
  13.     }  
  14. });  

在我们收到传过来的DrawableID时，把它设置gc主页面ImageVIew里显示出来，这就完成了我们上面的功能。

转自：http://blog.csdn.net/harvic880925/article/details/42712777

android-自定义对话框视图及参数传递

标签：

原文地址：http://www.cnblogs.com/harry335/p/4670063.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！