微信扫一扫

028-83195727 , 15928970361
business@forhy.com

带三角形的dialog制作

带小三角的dialog,带三角形下拉框,微信带小三角下拉框,带小三角弹出框,自定义dialog2016-07-16

       最近在公司做项目时遇到了做一个带小三角的dialog的功能,像微信里带三角形的下拉框,这个东西在项目里常常用到,所以今天特意整理了一下,写出来,包括demo,供大家学习讨论,有疑问可以留言。

       首先大家可以看一下效果图:



       这个项目呢没什么代码量,主要工作量都在xml布局文件里,学习了这个项目后,相信你的布局水平会有一个质的提高,对美化常用控件会有很大的提高

            下面我来讲解一下思路,首先毫无疑问这是一个dialog,只不过dialog的布局文件是自己额外设计的;设计完dialog的布局后,使用dialog时我们首先隐藏它的标题,然后用代码动态设置dialog显示的位置就好了。下面是我展示dialog并且确定它位置的代码,dialog_triangle_common是我自己设计的dialog内容布局文件

//带小三角的dialog
	private void showTriangleDialog(){
		View view = getActivity().getLayoutInflater().inflate(R.layout.dialog_triangle_common, null);
		dialog=new Dialog(getActivity(),R.style.transparentFrameWindowStyle);
		dialog.setContentView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
		window =dialog.getWindow();
		WindowManager.LayoutParams lp=window.getAttributes();
		window.setGravity(Gravity.RIGHT | Gravity.TOP);
		lp.x=35;
		lp.y=100;
		window.setAttributes(lp);
		dialog.setCanceledOnTouchOutside(true);
		dialog.show();

	}

          下面我来说一下布局文件的思路,首先是先找到一张三角形图片,背景为透明色,然后将布局内容背景设置为和三角形一样的颜色,合理调整三角形的位置便可以得到上面的样式结果。具体是怎么布局的?大家可以直接看我的源码

下载demo链接