Android自定义控件及按下效果

在应用程序开发中，经常要对android控件进行自定义来实现界面的风格统一，对网上的资源进行搜索整理如下：

  自定义EditText

  一， 通过改变背景图片来实现EditText的自定义

 (1) 在drawable里添加my_edittext.xml 代码如下：

[xhtml] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.       <item android:state_focused="true" android:drawable="@drawable/edit1" />  
4.       <item android:drawable="@drawable/edit" />  
5. </selector>   
6.   
7. 注：正常状态时背景图片为edit，而edit1为EditText为编辑状态  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/edit1" />
<item android:drawable="@drawable/edit" />
</selector>

注：正常状态时背景图片为edit，而edit1为EditText为编辑状态

 

(2) 在value文件下添加 my_edittext_style.xml代码如下：

[xhtml] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>     
3.     <style name="suretouch_edittext_style" parent="@android:style/Widget.EditText">  
4.          //引入drawable下的my_edittext.xml文件   
5.          <item name="android:background">@drawable/my_edittext</item>   
6.     </style>   
7. </resources>  

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="suretouch_edittext_style" parent="@android:style/Widget.EditText">
//引入drawable下的my_edittext.xml文件
<item name="android:background">@drawable/my_edittext</item>
</style>
</resources>

 

(3)在自己的布局文件中加入自定义样式就完成了。

[xhtml] view plaincopyprint?

1. <EditText  
2.    android:id="@+id/admin_email"  
3.    android:layout_width="461dip"          
4.    android:layout_height="48dip"  
5.    style="@style/my_edittext_style"  
6. />  

<EditText
android:id="@+id/admin_email"
android:layout_width="461dip"
android:layout_height="48dip"
style="@style/my_edittext_style"
/>

 

使用上面方式实现的搜索框，布局文件如下：

[xhtml] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="260dip">  
5.     <EditText  
6.         android:id="@+id/findEditText"  
7.         android:layout_alignParentTop="true"  
8.         android:singleLine="true"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:hint="请输入查询的类容"/>  
12.     <ImageView  
13.         android:id="@+id/findButton"  
14.         android:src="@drawable/findbutton"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:layout_marginBottom="4dip"  
18.         android:layout_marginRight="2dip"  
19.         android:adjustViewBounds="true"  
20.         android:layout_alignTop="@id/findEditText"  
21.         android:layout_alignRight="@id/findEditText"  
22.         android:layout_alignBottom="@id/findEditText"/>  
23. </RelativeLayout>  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="260dip">
<EditText
android:id="@+id/findEditText"
android:layout_alignParentTop="true"
android:singleLine="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="请输入查询的类容"/>
<ImageView
android:id="@+id/findButton"
android:src="@drawable/findbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dip"
android:layout_marginRight="2dip"
android:adjustViewBounds="true"
android:layout_alignTop="@id/findEditText"
android:layout_alignRight="@id/findEditText"
android:layout_alignBottom="@id/findEditText"/>
</RelativeLayout>

 

drawable中的xml文件

[c-sharp] view plaincopyprint?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_pressed="true" android:drawable="@drawable/find0" />  
4.     <item android:state_focused="true" android:drawable="@drawable/find1" />  
5.     <item android:state_enabled="true" android:drawable="@drawable/find1" />  
6. </selector>  

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/find0" />
<item android:state_focused="true" android:drawable="@drawable/find1" />
<item android:state_enabled="true" android:drawable="@drawable/find1" />
</selector>

 

图片

二，自定义EditText的边框

(1)创建自定义MyEditText类

[c-sharp] view plaincopyprint?

1. package com.util;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.util.AttributeSet;  
8. import android.widget.EditText;  
9.   
10. public class MyEditText extends EditText {  
11.   
12.     private Paint mPaint;  
13.     private Context mContext;  
14.     public MyEditText(Context context) {  
15.         super(context);  
16.   
17.   
18.     }  
19.   
20. //  public MyEditText(Context context, AttributeSet attrs, int defStyle) {
      
21. //      super(context, attrs, defStyle);
      
22. //      // TODO Auto-generated constructor stub
      
23. //  }   
24. //   
25.     public MyEditText(Context context, AttributeSet attrs) {  
26.         super(context, attrs);  
27.         mContext=context;  
28.         // TODO Auto-generated constructor stub
      
29.         //定义画笔   
30.         mPaint = getPaint();  
31.             //定义笔画粗细样式   
32.         mPaint.setStyle(Paint.Style.FILL_AND_STROKE);  
33.             //定义笔画颜色   
34.         mPaint.setColor(Color.GRAY);  
35.     }  
36.   
37.     public void onDraw(Canvas canvas){  
38.         super.onDraw(canvas);  
39.         int w = getWidth();  
40.             int h = getHeight();  
41.       
42.         //下划线   
43.     //      canvas.drawLine(0,h-1,  w-1, h-1, mPaint);   
      
44.   
45.         //下边框   
46.         canvas.drawLine(0, h, w, h, mPaint);  
47.         //右边框   
48.         canvas.drawLine(w, 0, w, h, mPaint);  
49.         //左边框   
50.         canvas.drawLine(0, 0, 0, h, mPaint);  
51.         //上边框   
52.         canvas.drawLine(0, 0, w, 0, mPaint);  
53.   
54.     }  
55. }  

package com.util;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.EditText;

public class MyEditText extends EditText {

private Paint mPaint;
private Context mContext;
public MyEditText(Context context) {
super(context);

}

// public MyEditText(Context context, AttributeSet attrs, int defStyle) {
// super(context, attrs, defStyle);
// // TODO Auto-generated constructor stub
// }
//
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mContext=context;
// TODO Auto-generated constructor stub
//定义画笔
mPaint = getPaint();
//定义笔画粗细样式
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//定义笔画颜色
mPaint.setColor(Color.GRAY);
}

public void onDraw(Canvas canvas){
super.onDraw(canvas);
int w = getWidth();
int h = getHeight();

//下划线
// canvas.drawLine(0,h-1, w-1, h-1, mPaint);

//下边框
canvas.drawLine(0, h, w, h, mPaint);
//右边框
canvas.drawLine(w, 0, w, h, mPaint);
//左边框
canvas.drawLine(0, 0, 0, h, mPaint);
//上边框
canvas.drawLine(0, 0, w, 0, mPaint);

}
}

(2)在布局文件中直接引用自定义控件

[xhtml] view plaincopyprint?

1. //注意这里 如果不行<View class="com.util.MyEditText">  
2. <com.util.MyEditText  
3. android:id="@+id/register_password"  
4. android:layout_width="461dip"     
5. android:layout_height="48dip"  
6. android:layout_x="398dip"  
7. android:layout_y="353dip"  
8. android:password="true"  
9. style="?android:attr/textViewStyle"  
10. android:background="@null"  
11. android:textColor="@null"  
12.   
13. >  

//注意这里 如果不行<View class="com.util.MyEditText">
<com.util.MyEditText
android:id="@+id/register_password"
android:layout_width="461dip"
android:layout_height="48dip"
android:layout_x="398dip"
android:layout_y="353dip"
android:password="true"
style="?android:attr/textViewStyle"
android:background="@null"
android:textColor="@null"

/>

 

图

 三，按钮按下效果，非常简单同样是使用selector

   (1) 在drawable中的xml文件中，代码如下：

[xhtml] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">    
3.       <item android:state_pressed="false"   
4.             android:drawable="@drawable/register_up" />    
5.       <item android:state_pressed="true"   
6.             android:drawable="@drawable/register_down" />  
7.               
8.       <item android:state_focused="true"   
9.             android:drawable="@drawable/register_down" />  
10.                   
11.       <item android:drawable="@drawable/register_up" />    
12. </selector>   

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="@drawable/register_up" />
<item android:state_pressed="true"
android:drawable="@drawable/register_down" />

<item android:state_focused="true"
android:drawable="@drawable/register_down" />

<item android:drawable="@drawable/register_up" />
</selector>

   (2) ImageButton在xml布局文件中的代码：

[xhtml] view plaincopyprint?

1. <ImageButton   
2.     android:id="@+id/register_btn"  
3.     android:src="@drawable/suretouch_register_button"  
4.     android:layout_width="158dip"  
5.     android:layout_height="149dip"  
6.     android:layout_x="893dip"  
7.     android:layout_y="270dip"  
8.     android:scaleType="centerCrop"  
9.     android:background="@null"  
10. />  

<ImageButton
android:id="@+id/register_btn"
android:src="@drawable/suretouch_register_button"
android:layout_width="158dip"
android:layout_height="149dip"
android:layout_x="893dip"
android:layout_y="270dip"
android:scaleType="centerCrop"
android:background="@null"
/>

分享到：