android制作圆角button

转载：http://blog.csdn.net/u010850027/article/details/48009461

经常玩儿App的小伙伴都知道，APP上面有很多按钮都是圆角的，圆形给人感觉饱满，富有张力，不知道设计圆角按钮的小伙伴是不是和小编有着相同的想法`(*∩_∩*)′，听小编公司开发IOS的小伙伴说，他们里面直接有圆角的button，但是对于开发Android的小伙伴就不一样了，里面没有直接的圆角button可以供我们使用，在xml里面布局一个button，还不是圆角的，怎么办nie，方法总比困难多，我们成长的机会又来了，最近在小编的项目中，需要用到圆角的button，还需要用到圆角的头像，经过半天捣鼓，终于是圆角的啦，开心ing，效果图如下，但是效果图展示的用户中心是一张图片，不是用imageview。今天这篇博文，小编就来简单的介绍一下如何敲出圆角的Button以及圆角的头像，小编先来介绍如何敲出圆角的头像，效果图如下所示：

        

       今天这篇博文，小编做了一个关于如何制作圆角的一个Android小demo，希望可以帮助到有需要的小伙伴，首先，新建一个Android项目，在drawable_xhdpi这个文件下面，新建一个Android xml文件，取名为fillet，如下图所示：

         

         接着第二步，我们开始编写fillet里面的xml，代码如下所示：

  

[html]  view plain copy print ?

1. <span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>   
2. <shape   
3.     xmlns:android="http://schemas.android.com/apk/res/android"   
4.     android:shape="rectangle">   
5.     <!-- 填充的颜色 -->   
6.     <solid android:color="#4392F9" />   
7.     <!-- 设置按钮的四个角为弧形 -->   
8.     <!-- android:radius 弧形的半径 -->   
9.     <corners android:radius="5dip" />   
10.         
11. <!-- padding：Button里面的文字与Button边界的间隔 -->   
12. <padding   
13.    android:left="10dp"   
14.    android:top="10dp"   
15.    android:right="10dp"   
16.    android:bottom="10dp" />   
17. </shape> </span>  

        第三步，编写layout里面的文件activity_main.xml，代码如下所示：

[html]  view plain copy print ?

1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:orientation="vertical"   
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent"   
6.     >   
7.   <!--等一个故事的布局，写着玩儿的`(*∩_∩*)′ -->  
8.  <TextView      
9.     android:layout_width="fill_parent"     
10.     android:layout_height="wrap_content"     
11.     android:text="等一个故事"/>   
12.   <!--   圆角button的布局 -->    
13. <Button     
14.     android:id="@+id/filletButton"   
15.     android:layout_gravity="center"  
16.     android:text="圆角按钮 "   
17.     android:textColor="#FFFFFF"  
18.     android:layout_width="wrap_content"     
19.     android:layout_height="wrap_content"     
20.     android:background="@drawable/fillet"/>   
21. </LinearLayout> </span>  

        第四步，编写values文件下styles.xml的内容，具体代码如下所示：

[html]  view plain copy print ?

1. <span style="font-size:18px;"><resources>  
2.   
3.     <!--  
4.         Base application theme, dependent on API level. This theme is replaced  
5.         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.  
6.     -->  
7.     <style name="AppBaseTheme" parent="android:Theme.Light">  
8.         <!--  
9.             Theme customizations available in newer API levels can go in  
10.             res/values-vXX/styles.xml, while customizations related to  
11.             backward-compatibility can go here.  
12.         -->  
13.     </style>  
14.   
15.     <!-- Application theme. -->  
16.     <style name="AppTheme" parent="AppBaseTheme">  
17.         <!-- All customizations that are NOT specific to a particular API-level can go here. -->  
18.     </style>  
19.      <string name="action_settings">Settings</string>  
20.   
21. </resources>  
22. </span>  

        第五步，编写FillButtonActivity.java类里面的内容，代码如下所示：    

[java]  view plain copy print ?

1. <span style="font-size:18px;">package com.example.filletbutton;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;   
7. import android.widget.Button;  
8. import android.widget.Toast;  
9.   
10. public class FilletButtonActivity extends Activity {  
11.       Button FilletButton;    
12.         @Override   
13.         public void onCreate(Bundle savedInstanceState) {    
14.             super.onCreate(savedInstanceState);    
15.             setContentView(R.layout.activity_main);    
16.                 
17.             FilletButton=(Button)findViewById(R.id.filletButton);    
18.           //使用匿名类注册Button事件    
19.             FilletButton.setOnClickListener(new OnClickListener()    
20.           {         
21.                 public void onClick(View v)    
22.                 {    
23.                     Toast.makeText(FilletButtonActivity.this, "你点击了圆角按钮",Toast.LENGTH_LONG).show();    
24.                 }    
25.             });    
26.         }    
27.       
28.   
29. }  
30. </span>  

        最后我们来看一下运行的效果，如下图所示：

        
        介绍完如何敲出圆角的Button之后，小编接着像小伙伴们介绍一下，如何敲出圆角的头像，首先，第一步，我们来编写xml里面的布局代码，具体代码如下所示：

[html]  view plain copy print ?

1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical"  
7.     tools:context=".TestActivity">  
8.       
9.     <FrameLayout  
10.         android:layout_width="match_parent"  
11.         android:layout_height="135dp"  
12.         android:background="@drawable/us">  
13.   
14.         <FrameLayout  
15.             android:layout_width="match_parent"  
16.             android:layout_height="44dp">  
17.   
18.             <ImageButton  
19.                 android:id="@+id/about_us_back"  
20.                 android:layout_width="14dp"  
21.                 android:layout_height="25.5dp"  
22.                 android:layout_gravity="center_vertical"  
23.                 android:layout_marginLeft="10dp"  
24.                 android:background="@drawable/back" />  
25.              <!-- 关于我们的布局 -->  
26.              <TextView  
27.                 android:layout_width="wrap_content"  
28.                 android:layout_height="wrap_content"  
29.                 android:layout_gravity="center"  
30.                 android:text="关于我们"  
31.                 android:textColor="#fff"  
32.                 android:textSize="19sp" />   
33.   
34.         </FrameLayout>  
35.         <ImageView  
36.              android:id="@+id/imageView2"  
37.              android:layout_width="70dp"  
38.              android:layout_height="70dp"  
39.              android:layout_marginTop="8dp"  
40.              android:layout_gravity="center"  
41.              android:layout_alignParentTop="true"  
42.              android:layout_centerHorizontal="true"  
43.              android:src="@drawable/my" />  
44.    
45.         <!-- 用户昵称，无忧心情的布局 -->  
46.         <TextView  
47.             android:layout_width="wrap_content"  
48.             android:layout_height="wrap_content"  
49.             android:layout_gravity="center_horizontal|bottom"  
50.             android:layout_marginBottom="5dp"  
51.             android:textColor="#FFFFFF"  
52.             android:text="无忧心情" />  
53.     </FrameLayout>  
54.       
55.   
56. </LinearLayout>  
57. </span>  

       接着，我们来编写java类里面的代码，代码如下所示：

[java]  view plain copy print ?

1. <span style="font-size:18px;">package com.h8.imageroundcorner;  
2.   
3. import android.app.Activity;  
4. import android.graphics.Bitmap;  
5. import android.graphics.BitmapFactory;  
6. import android.graphics.Canvas;  
7. import android.graphics.Paint;  
8. import android.graphics.PorterDuffXfermode;  
9. import android.graphics.Rect;  
10. import android.graphics.RectF;  
11. import android.graphics.Bitmap.Config;  
12. import android.graphics.PorterDuff.Mode;  
13. import android.os.Bundle;  
14. import android.widget.ImageView;  
15.   
16. public class TestActivity extends Activity {  
17.     ImageView imageView;  
18.   
19.     @Override  
20.     protected void onCreate(Bundle savedInstanceState) {  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.test);  
23.         imageView = (ImageView) findViewById(R.id.imageView2);  
24.         Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.my);  
25.   
26.         imageView.setImageBitmap(toRoundCorner(b,100));  
27.     }  
28.   
29.     public static Bitmap toRoundCorner(Bitmap bitmap, int pixels) {  
30.   
31.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);  
32.   
33.         Canvas canvas = new Canvas(output);  
34.   
35.         final int color = 0xff424242;  
36.   
37.         final Paint paint = new Paint();  
38.   
39.         final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  
40.   
41.         final RectF rectF = new RectF(rect);  
42.   
43.         final float roundPx = pixels;  
44.   
45.         paint.setAntiAlias(true);  
46.   
47.         canvas.drawARGB(0, 0, 0, 0);  
48.   
49.         paint.setColor(color);  
50.   
51.         canvas.drawRoundRect(rectF, roundPx, roundPx, paint);  
52.   
53.         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
54.   
55.         canvas.drawBitmap(bitmap, rect, rect, paint);  
56.         return output;  
57.   
58.     }  
59.   
60. }  
61. </span>  

      最后，我们来看一下效果图：