Andriod开发————圆角边框与圆角背景的实现方式

本文主要分享圆角边框与圆角背景的实现方式。该方式的实现,需要了解shape的使用,该部分的详细介绍,请阅读博客http://blog.csdn.net/mahoking/article/details/23672271。文中有较详细的介绍。

【转载使用,请注明出处:http://blog.csdn.net/mahoking
 如下是演示的shape_layout.xml模板。

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <!-- 填充色 -->  
  4.     <solid android:color="#CCFF99"/>  
  5.     <!-- 圆角 -->  
  6.     <corners android:radius="10dp"/>  
  7. </shape>  

       为了显示的好看与协调,本案创建了多个shape_*.xml文件,各个shape_*.xml文件只是solid填充色的配置不同,读者可以根据自己的设计与喜好自行搭配。在本文的而最后,会展示相应Demo截图。

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <!-- 填充色 -->  
  4.     <solid android:color="#FF9999"/>  
  5.     <!-- 圆角 -->  
  6. <!-- android:radius 设置角的弧度,值越大角越圆-->  
  7.     <corners android:radius="10dp"/>  
  8. </shape>  

        创建Activity(RoundCornerActivity),对应的布局文件为activity_01_round_corner.xml。
RoundCornerActivity

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  *@describe  圆角边框、圆角背景的实现演示 
  3.  *@date 2014-8-24 22:35:49 
  4.  */  
  5. public class RoundCornerActivity extends Activity{  
  6.   
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_01_round_corner);  
  11.           
  12.     }  
  13. }  

activity_01_round_corner.xml

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="20dp"  
  10.         android:layout_marginLeft="15dp"  
  11.         android:layout_marginRight="15dp"  
  12.         android:layout_marginTop="5dp"  
  13.         android:background="@drawable/shape_01_round_corner_textview"  
  14.         android:gravity="center"  
  15.         android:text="圆角背景与边框演示" />  
  16.   
  17.     <LinearLayout  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="60dp"  
  20.         android:layout_marginLeft="15dp"  
  21.         android:layout_marginRight="15dp"  
  22.         android:layout_marginTop="10dp"  
  23.         android:background="@drawable/shape_01_round_corner_layout" >  
  24.     </LinearLayout>  
  25.   
  26.     <TextView  
  27.         android:layout_width="match_parent"  
  28.         android:layout_height="20dp"  
  29.         android:layout_marginLeft="15dp"  
  30.         android:layout_marginRight="15dp"  
  31.         android:layout_marginTop="5dp"  
  32.         android:background="@drawable/shape_01_round_corner_textview"  
  33.         android:gravity="center"  
  34.         android:text="以下是特效演示" />  
  35.   
  36.     <LinearLayout  
  37.         android:layout_width="match_parent"  
  38.         android:layout_height="wrap_content"  
  39.         android:layout_marginTop="10dp"  
  40.         android:orientation="horizontal" >  
  41.   
  42.         <LinearLayout  
  43.             android:layout_width="match_parent"  
  44.             android:layout_height="wrap_content"  
  45.             android:layout_marginLeft="5dp"  
  46.             android:layout_marginRight="5dp"  
  47.             android:layout_weight="1"  
  48.             android:orientation="vertical" >  
  49.   
  50.             <TextView  
  51.                 android:layout_width="match_parent"  
  52.                 android:layout_height="120dp"  
  53.                 android:background="@drawable/shape_01_round_corner_textview_ma"  
  54.                 android:gravity="center"  
  55.                 android:text="马"  
  56.                 android:textSize="60dp" />  
  57.         </LinearLayout>  
  58.   
  59.         <LinearLayout  
  60.             android:layout_width="match_parent"  
  61.             android:layout_height="wrap_content"  
  62.             android:layout_marginLeft="5dp"  
  63.             android:layout_marginRight="5dp"  
  64.             android:layout_weight="1"  
  65.             android:orientation="vertical" >  
  66.   
  67.             <TextView  
  68.                 android:layout_width="match_parent"  
  69.                 android:layout_height="55dp"  
  70.                 android:background="@drawable/shape_01_round_corner_textview_yi"  
  71.                 android:gravity="center"  
  72.                 android:text="意"  
  73.                 android:textSize="30dp" />  
  74.   
  75.             <TextView  
  76.                 android:layout_width="match_parent"  
  77.                 android:layout_height="55dp"  
  78.                 android:layout_marginTop="10dp"  
  79.                 android:background="@drawable/shape_01_round_corner_textview_ran"  
  80.                 android:gravity="center"  
  81.                 android:text="然"  
  82.                 android:textSize="30dp" />  
  83.         </LinearLayout>  
  84.     </LinearLayout>  
  85.   
  86. </LinearLayout>  

          切忌不要忘记在AndroidManifest.xml中注册该Activity。

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <application  
  2.         android:allowBackup="true"  
  3.         android:icon="@drawable/uisharing_ico"  
  4.         android:label="@string/app_name"  
  5.         android:theme="@style/AppTheme" >  
  6.         <activity  
  7.             android:name="com.mahaochen.app.uisharing.example01.RoundCornerActivity"  
  8.             android:screenOrientation="portrait"   
  9.             android:label="@string/app_name">  
  10.             <intent-filter>  
  11.                 <action android:name="android.intent.action.MAIN" />  
  12.                 <category android:name="android.intent.category.LAUNCHER" />  
  13.             </intent-filter>  
  14.         </activity>  
  15.     </application>  


运行该项目,效果如下:

 


Android Studio中设置圆角的方法有两种:使用xml文件设置和使用Java代码动态设置。 1. 使用xml文件设置圆角 在drawable文件夹下新建一个shape.xml文件,然后在文件中添加如下代码: ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:radius="10dp"> <solid android:color="#ffffff" /> <corners android:radius="10dp" /> </shape> ``` 其中,android:radius属性表示整个矩形的圆角半径,corners标签中的android:radius属性表示四个角的圆角半径。如果需要单独控制某一个角的显示样式,可单独设置四个角的值,例如: ```xml <corners android:radius="10dp" android:topLeftRadius="0dp" android:topRightRadius="10dp" android:bottomRightRadius="0dp" android:bottomLeftRadius="10dp" /> ``` 2. 使用Java代码动态设置圆角 ```java // 加载图片 Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); // 创建一个空的Bitmap Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); // 创建一个画布 Canvas canvas = new Canvas(output); // 创建一个画笔 Paint paint = new Paint(); // 创建一个矩形 Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); // 创建一个圆角矩形 RectF rectF = new RectF(rect); // 设置圆角半径 float roundPx = 20; // 绘制圆角矩形 paint.setAntiAlias(true); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); // 设置图像的叠加模式 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); // 绘制图像 canvas.drawBitmap(bitmap, rect, rect, paint); // 显示图像 ImageView imageView = (ImageView) findViewById(R.id.image_view); imageView.setImageBitmap(output); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值