`
熊滔爱孟涛静
  • 浏览: 122214 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DIalog与popWindow布局

AndroidXMLOS 
阅读更多

Android默认的PopupWindow和EditText的外观是矩形框，看起来不是太好，本示例通过设置布局View的背景和PopupWindowd对象的背景，实现有白色圆角边框的对话框效果和圆角文字编辑框。代码如下（关键部分是背景布局XML）：

 


 

对话框弹出效果图：



 
 

 

Java代码 复制代码
  1. package com.test;   
  2.   
  3. import android.app.Activity;   
  4. import android.content.Context;   
  5. import android.os.Bundle;   
  6. import android.text.InputType;   
  7. import android.view.Gravity;   
  8. import android.view.LayoutInflater;   
  9. import android.view.View;   
  10. import android.view.View.OnClickListener;   
  11. import android.widget.Button;   
  12. import android.widget.EditText;   
  13. import android.widget.PopupWindow;   
  14. import android.widget.LinearLayout.LayoutParams;   
  15.   
  16.   
  17. public class RoundCorner extends Activity {   
  18.   
  19.     Button mButton;    
  20.   
  21.     @Override  
  22.     public void onCreate(Bundle savedInstanceState) {   
  23.         super.onCreate(savedInstanceState);   
  24.         setContentView(R.layout.main);   
  25.            
  26.         // 定义按钮   
  27.         mButton = (Button) this.findViewById(R.id.Button01);   
  28.         mButton.setOnClickListener(new ClickEvent());   
  29.            
  30.         // 两个圆角文字编辑框   
  31.         EditText et1 = (EditText) this.findViewById(R.id.roundedtext1);   
  32.         EditText et2 = (EditText) this.findViewById(R.id.roundedtext2);   
  33.         et1.setInputType(InputType.TYPE_TEXT_FLAG_AUTO_CORRECT);   
  34.         et2.setInputType(InputType.TYPE_NULL); //不显示软键盘   
  35.            
  36.     }   
  37.   
  38.     // 处理按键事件   
  39.     class ClickEvent implements OnClickListener {   
  40.         @Override  
  41.         public void onClick(View v) {   
  42.             if (v == mButton) {   
  43.                 showRoundCornerDialog(RoundCorner.this, RoundCorner.this.findViewById(R.id.Button01));   
  44.             }   
  45.         }   
  46.     }   
  47.   
  48.     // 显示圆角对话框   
  49.     public void showRoundCornerDialog(Context context, View parent) {   
  50.         LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);   
  51.            
  52.         // 获取圆角对话框布局View，背景设为圆角   
  53.         final View dialogView = inflater.inflate(R.layout.popupwindow, null, false);   
  54.         dialogView.setBackgroundResource(R.drawable.rounded_corners_view);    
  55.            
  56.         // 创建弹出对话框，设置弹出对话框的背景为圆角    
  57.         final PopupWindow pw = new PopupWindow(dialogView, 300, LayoutParams.WRAP_CONTENT, true);   
  58.         pw.setBackgroundDrawable(getResources().getDrawable(R.drawable.rounded_corners_pop));   
  59.            
  60.         //注：上面的设背景操作为重点部分，可以自行注释掉其中一个或两个设背景操作，查看对话框效果   
  61.         //注：上面的设背景操作为重点部分，可以自行注释掉其中一个或两个设背景操作，查看对话框效果   
  62.            
  63.         final EditText edtUsername = (EditText) dialogView.findViewById(R.id.username_edit);   
  64.         final EditText edtPassword = (EditText) dialogView.findViewById(R.id.password_edit);   
  65.         edtUsername.setHint("用户名..."); // 设置提示语   
  66.         edtPassword.setHint("密码...");   // 设置提示语   
  67.   
  68.         // OK按钮及其处理事件   
  69.         Button btnOK = (Button) dialogView.findViewById(R.id.BtnOK);   
  70.         btnOK.setOnClickListener(new OnClickListener() {   
  71.             @Override  
  72.             public void onClick(View v) {   
  73.                 // 设置文本框内容   
  74.                 edtUsername.setText("username");   
  75.                 edtPassword.setText("password");   
  76.             }   
  77.         });   
  78.   
  79.         // Cancel按钮及其处理事件   
  80.         Button btnCancel = (Button) dialogView.findViewById(R.id.BtnCancel);   
  81.         btnCancel.setOnClickListener(new OnClickListener() {   
  82.             @Override  
  83.             public void onClick(View v) {   
  84.                 pw.dismiss();// 关闭   
  85.             }   
  86.         });   
  87.            
  88.         // 显示RoundCorner对话框   
  89.         pw.showAtLocation(parent, Gravity.CENTER|Gravity.BOTTOM, 0, 0);   
  90.     }   
  91.        
  92. }  
package com.test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.text.InputType;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.PopupWindow;
import android.widget.LinearLayout.LayoutParams;


public class RoundCorner extends Activity {

	Button mButton; 

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		// 定义按钮
		mButton = (Button) this.findViewById(R.id.Button01);
		mButton.setOnClickListener(new ClickEvent());
		
		// 两个圆角文字编辑框
		EditText et1 = (EditText) this.findViewById(R.id.roundedtext1);
		EditText et2 = (EditText) this.findViewById(R.id.roundedtext2);
		et1.setInputType(InputType.TYPE_TEXT_FLAG_AUTO_CORRECT);
		et2.setInputType(InputType.TYPE_NULL); //不显示软键盘
		
	}

	// 处理按键事件
	class ClickEvent implements OnClickListener {
		@Override
		public void onClick(View v) {
			if (v == mButton) {
				showRoundCornerDialog(RoundCorner.this, RoundCorner.this.findViewById(R.id.Button01));
			}
		}
	}

	// 显示圆角对话框
	public void showRoundCornerDialog(Context context, View parent) {
		LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		
		// 获取圆角对话框布局View，背景设为圆角
		final View dialogView = inflater.inflate(R.layout.popupwindow, null, false);
		dialogView.setBackgroundResource(R.drawable.rounded_corners_view); 
		
		// 创建弹出对话框，设置弹出对话框的背景为圆角 
		final PopupWindow pw = new PopupWindow(dialogView, 300, LayoutParams.WRAP_CONTENT, true);
		pw.setBackgroundDrawable(getResources().getDrawable(R.drawable.rounded_corners_pop));
		
		//注：上面的设背景操作为重点部分，可以自行注释掉其中一个或两个设背景操作，查看对话框效果
		//注：上面的设背景操作为重点部分，可以自行注释掉其中一个或两个设背景操作，查看对话框效果
		
		final EditText edtUsername = (EditText) dialogView.findViewById(R.id.username_edit);
		final EditText edtPassword = (EditText) dialogView.findViewById(R.id.password_edit);
		edtUsername.setHint("用户名..."); // 设置提示语
		edtPassword.setHint("密码...");   // 设置提示语

		// OK按钮及其处理事件
		Button btnOK = (Button) dialogView.findViewById(R.id.BtnOK);
		btnOK.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// 设置文本框内容
				edtUsername.setText("username");
				edtPassword.setText("password");
			}
		});

		// Cancel按钮及其处理事件
		Button btnCancel = (Button) dialogView.findViewById(R.id.BtnCancel);
		btnCancel.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				pw.dismiss();// 关闭
			}
		});
		
		// 显示RoundCorner对话框
		pw.showAtLocation(parent, Gravity.CENTER|Gravity.BOTTOM, 0, 0);
	}
	
}

 

 

1，圆角对话框的背景布局文件XML。

--------rounded_corners_pop.xml此为PopupWindow的背景布局文件

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">   
  3.     <solid android:color="#ffffffff" />   
  4.        
  5.     <stroke android:width="3dp" color="#ffff8080" />   
  6.        
  7.     <corners android:radius="10dp" />   
  8.        
  9.     <padding android:left="3dp" android:top="3dp"    
  10.         android:right="3dp" android:bottom="3dp" />   
  11. </shape>  
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="#ffffffff" />
	
	<stroke android:width="3dp" color="#ffff8080" />
	
	<corners android:radius="10dp" />
	
	<padding android:left="3dp" android:top="3dp" 
		android:right="3dp" android:bottom="3dp" />
</shape>

 

--------rounded_corners_view.xml此为对话框内容的背景布局文件

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">   
  3.     <solid android:color="#ff606060" />   
  4.        
  5.     <stroke android:width="3dp" color="#ffff8080" />   
  6.        
  7.     <corners android:radius="10dp" />   
  8.        
  9.     <padding android:left="5dp" android:top="5dp"    
  10.         android:right="5dp" android:bottom="5dp" />   
  11. </shape>  
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="#ff606060" />
	
	<stroke android:width="3dp" color="#ffff8080" />
	
	<corners android:radius="10dp" />
	
	<padding android:left="5dp" android:top="5dp" 
		android:right="5dp" android:bottom="5dp" />
</shape>

 

 2，圆角文字编辑框的三个布局XML文件

---------rounded_edittext_states.xml

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">    
  3.     <item     
  4.         android:state_pressed="true"     
  5.         android:state_enabled="true"    
  6.         android:drawable="@drawable/rounded_focused" />    
  7.     <item     
  8.         android:state_focused="true"     
  9.         android:state_enabled="true"    
  10.         android:drawable="@drawable/rounded_focused" />    
  11.     <item     
  12.         android:state_enabled="true"    
  13.         android:drawable="@drawable/rounded_edittext" />    
  14. </selector>   
<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item  
     	android:state_pressed="true"  
     	android:state_enabled="true" 
        android:drawable="@drawable/rounded_focused" /> 
    <item  
     	android:state_focused="true"  
     	android:state_enabled="true" 
        android:drawable="@drawable/rounded_focused" /> 
    <item  
     	android:state_enabled="true" 
        android:drawable="@drawable/rounded_edittext" /> 
</selector>

 

----------rounded_edittext.xml

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:shape="rectangle"    
  4.     android:padding="8dip">    
  5.     <solid android:color="#FFFFFF"/>    
  6.     <corners    
  7.         android:bottomRightRadius="10dip"    
  8.         android:bottomLeftRadius="10dip"    
  9.         android:topLeftRadius="10dip"    
  10.         android:topRightRadius="10dip"/>    
  11. </shape>  
<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
	android:shape="rectangle" 
	android:padding="8dip"> 
 	<solid android:color="#FFFFFF"/> 
    <corners 
     	android:bottomRightRadius="10dip" 
     	android:bottomLeftRadius="10dip" 
  		android:topLeftRadius="10dip" 
  		android:topRightRadius="10dip"/> 
</shape>

 

-----------rounded_edittext_focused.xml

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:shape="rectangle"    
  4.     android:padding="8dip">    
  5.     <solid android:color="#FFFFFF"/>    
  6.     <stroke android:width="2dip" android:color="#FF0000" />    
  7.     <corners    
  8.         android:bottomRightRadius="10dip"    
  9.         android:bottomLeftRadius="10dip"    
  10.         android:topLeftRadius="10dip"    
  11.         android:topRightRadius="10dip"/>    
  12. </shape>   
<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
	android:shape="rectangle" 
	android:padding="8dip"> 
 	<solid android:color="#FFFFFF"/> 
 	<stroke android:width="2dip" android:color="#FF0000" /> 
    <corners 
     	android:bottomRightRadius="10dip" 
     	android:bottomLeftRadius="10dip" 
  		android:topLeftRadius="10dip" 
  		android:topRightRadius="10dip"/> 
</shape>

 

 

3，对话框的布局文件popupwindow.xml

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2.   
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
  5.     android:orientation="vertical">   
  6.   
  7.     <TextView android:id="@+id/username_view"  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_marginLeft="10dip"  
  11.         android:layout_marginRight="10dip"    
  12.         android:text="用户名"  
  13.         android:textAppearance="?android:attr/textAppearanceMedium"/>   
  14.   
  15.     <EditText android:id="@+id/username_edit"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_width="fill_parent"    
  18.         android:layout_marginLeft="10dip"  
  19.         android:layout_marginRight="10dip"    
  20.         android:capitalize="none"  
  21.         android:textAppearance="?android:attr/textAppearanceMedium" />   
  22.   
  23.     <TextView android:id="@+id/password_view"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_width="fill_parent"  
  26.         android:layout_marginLeft="10dip"  
  27.         android:layout_marginRight="10dip"    
  28.         android:text="密码"  
  29.         android:textAppearance="?android:attr/textAppearanceMedium"/>   
  30.   
  31.     <EditText android:id="@+id/password_edit"  
  32.         android:layout_height="wrap_content"  
  33.         android:layout_width="fill_parent"    
  34.         android:layout_marginLeft="10dip"  
  35.         android:layout_marginRight="10dip"    
  36.         android:capitalize="none"  
  37.         android:password="true"  
  38.         android:textAppearance="?android:attr/textAppearanceMedium" />   
  39.   
  40.     <LinearLayout android:id="@+id/LinearLayout01"  
  41.         android:layout_height="wrap_content"    
  42.         android:layout_width="fill_parent"  
  43.         android:gravity="center"  
  44.         android:paddingLeft="10dip"  
  45.         android:paddingRight="10dip">   
  46.            
  47.         <Button android:id="@+id/BtnOK"  
  48.             android:layout_width="wrap_content"  
  49.             android:layout_height="wrap_content"    
  50.             android:layout_weight="1"    
  51.             android:text="确定"/>   
  52.                
  53.         <Button android:id="@+id/BtnCancel"  
  54.             android:layout_width="wrap_content"  
  55.             android:layout_height="wrap_content"    
  56.             android:layout_weight="1"  
  57.             android:text="取消"/>   
  58.     </LinearLayout>   
  59.   
  60. </LinearLayout>  
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="wrap_content"
	android:orientation="vertical">

	<TextView android:id="@+id/username_view"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent"
		android:layout_marginLeft="10dip"
		android:layout_marginRight="10dip" 
		android:text="用户名"
		android:textAppearance="?android:attr/textAppearanceMedium"/>

	<EditText android:id="@+id/username_edit"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent" 
		android:layout_marginLeft="10dip"
		android:layout_marginRight="10dip" 
		android:capitalize="none"
		android:textAppearance="?android:attr/textAppearanceMedium" />

	<TextView android:id="@+id/password_view"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent"
		android:layout_marginLeft="10dip"
		android:layout_marginRight="10dip" 
		android:text="密码"
		android:textAppearance="?android:attr/textAppearanceMedium"/>

	<EditText android:id="@+id/password_edit"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent" 
		android:layout_marginLeft="10dip"
		android:layout_marginRight="10dip" 
		android:capitalize="none"
		android:password="true"
		android:textAppearance="?android:attr/textAppearanceMedium" />

	<LinearLayout android:id="@+id/LinearLayout01"
		android:layout_height="wrap_content" 
		android:layout_width="fill_parent"
		android:gravity="center"
		android:paddingLeft="10dip"
		android:paddingRight="10dip">
		
		<Button android:id="@+id/BtnOK"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" 
			android:layout_weight="1" 
			android:text="确定"/>
			
		<Button android:id="@+id/BtnCancel"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" 
			android:layout_weight="1"
			android:text="取消"/>
	</LinearLayout>

</LinearLayout>

 

 

4，主布局文件 main.xml

Java代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical" android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:paddingTop="10dip">   
  6.        
  7.     <EditText android:id="@+id/roundedtext1"     
  8.         android:layout_width="fill_parent"     
  9.         android:layout_height="wrap_content"     
  10.         android:text="圆角编辑框实例"    
  11.         android:padding="5dip"    
  12.         android:background="@drawable/rounded_edittext" />    
  13.            
  14.     <!-- 此View为布局使用 -->   
  15.     <View android:layout_height="5dip" android:layout_width="fill_parent"/>   
  16.            
  17.     <EditText android:id="@+id/roundedtext2"      
  18.         android:layout_width="fill_parent"     
  19.         android:layout_height="wrap_content"     
  20.         android:text="聚焦可变边框颜色"    
  21.         android:padding="5dip"  
  22.         android:paddingTop="30dip"  
  23.         android:background="@drawable/rounded_edittext_states"/>    
  24.   
  25.     <!-- 此View为布局使用 -->   
  26.     <View android:layout_height="5dip" android:layout_width="fill_parent"/>   
  27.   
  28.     <Button android:id="@+id/Button01"    
  29.         android:layout_height="wrap_content"  
  30.         android:layout_width="fill_parent"    
  31.         android:text="弹出圆角对话框"/>   
  32.            
  33. </LinearLayout>  
分享到：
| ImageView的属性android:scaleType
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics