Lance老师UI系列教程第五课->自定义风格单选多选对话框的实现

UI系列教程第五课：自定义单选多选对话框的实现

在Android的应用中，常常会用到单选和多选对话框

最简单的方式是直接使用系统自带的对话框

不过有时候出于对应用程序整体风格的考虑

会用到自定义的对话框

说到自定义对话框，无非就是两种实现方式

一种是自定义dialog，另一种就是popwindow

二者皆是设置自定义布局然后再进行一些属性设置

这里包括对话框本身的设置以及对内部控件的监听设置

本文就以常用的单选多选对话框为例来讲解其实现

先来看效果图：

                                                   

 

                                                   

 

再看工程代码结构：

 

看ACTIVITY里的调用

public class CustomDialogActivity extends Activity implements OnClickListener{

	
	private View mRootView;
	private Button mBtn1;
	private Button mBtn2;
	private Button mBtn3;
	private Button mBtn4;
	
	private SingleChoicePopWindow mSingleChoicePopWindow;
	private MultiChoicePopWindow mMultiChoicePopWindow;
	private SingleChoiceDialog mSingleChoiceDialog;
	private MultiChoicDialog mMultiChoicDialog;
	
	
	private List<String> mSingleDataList;
	private List<String> mMultiDataList;
	
	private Context mContext;
	
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mContext = this;
        
        initView();
        
        initData();
    }

    
    public void initView()
    {
    	mBtn1 = (Button) findViewById(R.id.button1);
    	mBtn1.setOnClickListener(this);
    	
    	mBtn2 = (Button) findViewById(R.id.button2);
    	mBtn2.setOnClickListener(this);
    	
    	mBtn3 = (Button) findViewById(R.id.button3);
    	mBtn3.setOnClickListener(this);
    	
    	mBtn4 = (Button) findViewById(R.id.button4);
    	mBtn4.setOnClickListener(this);
    	
    	
    	mRootView = findViewById(R.id.rootView);
    }
    
    private final static int COUNT = 3;
    
    public void initData()
    {
    	mSingleDataList = new ArrayList<String>();
    	mMultiDataList = new ArrayList<String>();
    	boolean booleans[] = new boolean[COUNT * 5];
    	
    	for(int i = 0; i < COUNT; i++)
    	{
    		String string1 = "geniuseoe2012 -->" + i;
    		mSingleDataList.add(string1);		
    	}
    	
    	for(int i = 0; i < COUNT * 2; i++)
    	{
    		String string2 = "talent -->" + i;
    		mMultiDataList.add(string2);
    	}	
    	
    	initPopWindow(booleans);
    	
    	initDialog(booleans);
 	
    }
    
    
    public void initPopWindow(boolean []booleans)
    {
    	mSingleChoicePopWindow = new SingleChoicePopWindow(this, mRootView, mSingleDataList);
    	
    	mSingleChoicePopWindow.setTitle("genius single title");
    	mSingleChoicePopWindow.setOnOKButtonListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				int selItem = mSingleChoicePopWindow.getSelectItem();
				Toast.makeText(mContext, "selItem = " + selItem, Toast.LENGTH_SHORT).show();
			}
		});
    	
    	mMultiChoicePopWindow = new MultiChoicePopWindow(this, mRootView, mMultiDataList, booleans);   	
    	mMultiChoicePopWindow.setTitle("genius multi title");
    	mMultiChoicePopWindow.setOnOKButtonListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				boolean []selItems = mMultiChoicePopWindow.getSelectItem();
				int size = selItems.length;
				StringBuffer stringBuffer = new StringBuffer();
				for(int i = 0; i < size; i++)
				{
					if (selItems[i])
					{
						stringBuffer.append(i + " ");
					}
					
				}
				
				Toast.makeText(mContext, "selItems = " + stringBuffer.toString(), Toast.LENGTH_SHORT).show();
			}
		});
    }
    
    public void initDialog(boolean []booleans)
    {
    	mSingleChoiceDialog = new SingleChoiceDialog(this, mSingleDataList);
    	mSingleChoiceDialog.setTitle("genius single title");
    	mSingleChoiceDialog.setOnOKButtonListener(new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				int selItem = mSingleChoiceDialog.getSelectItem();
				Toast.makeText(mContext, "selItem = " + selItem, Toast.LENGTH_SHORT).show();
			}
			
		
		});
    
    	
    	
    	mMultiChoicDialog = new MultiChoicDialog(this, mMultiDataList, booleans);
    	mMultiChoicDialog.setTitle("genius multi title");
    	mMultiChoicDialog.setOnOKButtonListener(new DialogInterface.OnClickListener() {

			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				boolean []selItems = mMultiChoicDialog.getSelectItem();
				int size = selItems.length;
				StringBuffer stringBuffer = new StringBuffer();
				for(int i = 0; i < size; i++)
				{
					if (selItems[i])
					{
						stringBuffer.append(i + " ");
					}
					
				}
				
				Toast.makeText(mContext, "selItems = " + stringBuffer.toString(), Toast.LENGTH_SHORT).show();
			}
			
		
		});
   
    }
    
    
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch(v.getId())
		{
		case R.id.button1:
			showSingleChoiceWindow();
			break;
		case R.id.button2:
			showMultiChoiceWindow();
			break;
		case R.id.button3:
			showSingleChoiceDialog();
			break;
		case R.id.button4:
			showMultiChoiceDialog();
			break;
		}
	}
	
	
	public void showSingleChoiceWindow()
	{
		mSingleChoicePopWindow.show(true);
		
	}
	
	public void showMultiChoiceWindow()
	{
		mMultiChoicePopWindow.show(true);
		
	}
	
	
	public void showSingleChoiceDialog()
	{
		mSingleChoiceDialog.show();
	}
	
	public void showMultiChoiceDialog()
	{
		
		mMultiChoicDialog.show();
	}
}

以单选popwindow为例，其调用方式如下：

mSingleChoicePopWindow = new SingleChoicePopWindow(this, mRootView, mSingleDataList);
    	
    	mSingleChoicePopWindow.setTitle("genius single title");
    	mSingleChoicePopWindow.setOnOKButtonListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				int selItem = mSingleChoicePopWindow.getSelectItem();
				Toast.makeText(mContext, "selItem = " + selItem, Toast.LENGTH_SHORT).show();
			}
		});

1.初始化对象

2.设置标题

3.添加按钮监听

最后在监听回调里通过getSelectItem方法获取选择值即可得到结果值，简洁易用

大家可直接拷贝到项目里再根据具体情况做细微调整即可

不过不知道为什么dialog始终无法填充全屏，所以只好去掉布局的背景色好与周围的暗色融为一体

 

附上链接工程：

http://download.csdn.net/detail/geniuseoe2012/4522431

欲知更多Android-UI技巧，请关注窝的下一堂课,更多精彩尽在http://blog.csdn.net/geniuseoe2012

 welcome to join android develop group:298044305

上一课： Lance老师UI系列教程第四课->微信TAB界面的实现

下一课：Lance老师UI系列教程第六课->微信聊天气泡界面的实现