Android布局中实现圆角边框

浏览数：16 / 时间：2015年06月11日

设置corners_bg.xml

设置边框圆角可以在drawable-mdpi目录里定义一个xml: 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">      
  3.     <solid android:color="#FFFFFF" />      
  4.     <corners android:topLeftRadius="10dp"     
  5.              android:topRightRadius="10dp"      
  6.              android:bottomRightRadius="10dp"     
  7.              android:bottomLeftRadius="10dp"/>      
  8. </shape>   

解释：

 

solid的表示填充颜色,为了简单，这里用的是白色。 

而corners则是表示圆角，注意的是这里bottomRightRadius是左下角而不是右下角，bottomLeftRadius右下角。 

 

上面的效果也可以像下面一样设置,如下：

 

[html] view plaincopy
 
  1. <corners android:radius="5dp" />    

 

引用corners_bg.xml

 

如果想引用这个xml，只需要@drawable/corners_bg.xml即可: 

[html] view plaincopy
 
  1. android:background="@drawable/corners_bg"   

 

应用范例

 

 

[html] view plaincopy
 
  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:background="#E1E0DE"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <TextView  
  9.         android:id="@+id/textView1"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="50dp"  
  12.         android:background="#2B3439"  
  13.         android:gravity="center"  
  14.         android:text="发现"  
  15.         android:textColor="#FFFFFF"  
  16.         android:textSize="20sp" />  
  17.   
  18.     <LinearLayout  
  19.         android:id="@+id/login_div"  
  20.         android:layout_width="fill_parent"  
  21.         android:layout_height="50dp"  
  22.         android:layout_margin="10dp"  
  23.         android:background="@drawable/corners_bg"  
  24.         android:gravity="center_vertical"  
  25.         android:padding="10dp" >  
  26.   
  27.         <ImageView  
  28.             android:id="@+id/imageView1"  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:src="@drawable/find_more_friend_photograph_icon" />  
  32.   
  33.         <TextView  
  34.             android:id="@+id/textView2"  
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:layout_marginLeft="14dp"  
  38.             android:text="朋友圈"  
  39.             android:textColor="#000"  
  40.             android:textSize="18sp" />  
  41.     </LinearLayout>  
  42.   
  43.     <LinearLayout  
  44.         android:layout_width="fill_parent"  
  45.         android:layout_height="101dp"  
  46.         android:layout_margin="10dp"  
  47.         android:background="@drawable/corners_bg"  
  48.         android:orientation="vertical"  
  49.         android:padding="10dp" >  
  50.   
  51.         <LinearLayout  
  52.             android:layout_width="wrap_content"  
  53.             android:layout_height="50dp" >  
  54.   
  55.             <ImageView  
  56.                 android:layout_width="wrap_content"  
  57.                 android:layout_height="wrap_content"  
  58.                 android:src="@drawable/find_more_friend_scan" />  
  59.   
  60.             <TextView  
  61.                 android:layout_width="wrap_content"  
  62.                 android:layout_height="wrap_content"  
  63.                 android:layout_marginLeft="14dp"  
  64.                 android:text="扫一扫"  
  65.                 android:textColor="#000"  
  66.                 android:textSize="18sp" />  
  67.         </LinearLayout>  
  68.   
  69.         <LinearLayout  
  70.             android:layout_width="wrap_content"  
  71.             android:layout_height="50dp"  
  72.             android:layout_centerVertical="true" >  
  73.   
  74.             <ImageView  
  75.                 android:layout_width="wrap_content"  
  76.                 android:layout_height="wrap_content"  
  77.                 android:src="@drawable/come_from_shake" />  
  78.   
  79.             <TextView  
  80.                 android:layout_width="wrap_content"  
  81.                 android:layout_height="wrap_content"  
  82.                 android:layout_marginLeft="14dp"  
  83.                 android:text="摇一摇"  
  84.                 android:textColor="#000"  
  85.                 android:textSize="18sp" />  
  86.         </LinearLayout>  
  87.     </LinearLayout>  
  88.   
  89.     <LinearLayout  
  90.         android:layout_width="fill_parent"  
  91.         android:layout_height="101dp"  
  92.         android:layout_margin="10dp"  
  93.         android:background="@drawable/corners_bg"  
  94.         android:orientation="vertical"  
  95.         android:padding="10dp" >  
  96.   
  97.         <LinearLayout  
  98.             android:layout_width="wrap_content"  
  99.             android:layout_height="50dp" >  
  100.   
  101.             <ImageView  
  102.                 android:layout_width="wrap_content"  
  103.                 android:layout_height="wrap_content"  
  104.                 android:src="@drawable/find_more_friend_near_icon" />  
  105.   
  106.             <TextView  
  107.                 android:layout_width="wrap_content"  
  108.                 android:layout_height="wrap_content"  
  109.                 android:layout_marginLeft="14dp"  
  110.                 android:text="附近的人"  
  111.                 android:textColor="#000"  
  112.                 android:textSize="18sp" />  
  113.         </LinearLayout>  
  114.   
  115.         <LinearLayout  
  116.             android:layout_width="wrap_content"  
  117.             android:layout_height="50dp"  
  118.             android:layout_centerVertical="true" >  
  119.   
  120.             <ImageView  
  121.                 android:layout_width="wrap_content"  
  122.                 android:layout_height="wrap_content"  
  123.                 android:src="@drawable/come_from_bottle" />  
  124.   
  125.             <TextView  
  126.                 android:layout_width="wrap_content"  
  127.                 android:layout_height="wrap_content"  
  128.                 android:layout_marginLeft="14dp"  
  129.                 android:text="漂流瓶"  
  130.                 android:textColor="#000"  
  131.                 android:textSize="18sp" />  
  132.         </LinearLayout>  
  133.     </LinearLayout>  
  134.   
  135.     <LinearLayout  
  136.         android:id="@+id/login_div"  
  137.         android:layout_width="fill_parent"  
  138.         android:layout_height="50dp"  
  139.         android:layout_margin="10dp"  
  140.         android:background="@drawable/corners_bg"  
  141.         android:gravity="center_vertical"  
  142.         android:padding="10dp" >  
  143.   
  144.         <ImageView  
  145.             android:id="@+id/imageView1"  
  146.             android:layout_width="wrap_content"  
  147.             android:layout_height="wrap_content"  
  148.             android:src="@drawable/more_game" />  
  149.   
  150.         <TextView  
  151.             android:id="@+id/textView2"  
  152.             android:layout_width="wrap_content"  
  153.             android:layout_height="wrap_content"  
  154.             android:layout_marginLeft="14dp"  
  155.             android:text="游戏中心"  
  156.             android:textColor="#000"  
  157.             android:textSize="18sp" />  
  158.     </LinearLayout>  
  159.   
  160. </LinearLayout>  

 

效果图

 

技术分享

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢