【Android】ImageView圓角與Layout版面佈局圓角說明及介紹

哈哈~各位Android安卓開發者大家好啊 ^^

小黑人這次要與大家分享的是"圓角"(round corners)，因為在某些特定的版面佈局裡畫面看起來太方方正正的會讓使用者覺得過於強硬或單調，所以如果要讓畫面看起來活潑可愛一點把圖片或Layout佈局轉換成圓角也會是個不錯的選擇喔，小黑人今天要介紹的圓角有兩種，一種是ImageView將方形的圖片轉換成圓角圖，一種是Layout佈局裡(如: LinearLayout、RelativeLayout、FrameLayout、ScrollView...等)進行佈景圓角，在畫面加入一些UI特效會讓整體畫面活潑很多唷，哈哈~至於要怎麼做呢？就讓我們繼續看下去吧。^^

1.首先我們在Layout佈局裡(main.xml)加入我們要放入的圖片及畫面吧。

//垂直線性佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >     // LinearLayout長寬為300，垂直排列，背景background為round.xml (佈局圓角設置xml)     <LinearLayout      android:layout_width="300dip"      android:layout_height="300dip"      android:orientation="vertical"      android:background="@drawable/round"      android:layout_gravity="center_horizontal"      android:padding="10dip"      android:layout_margin="10dip"      >         //水平線性佈局         <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:padding="10dip"         >             //圖片為pic1，未做圓角設置               <ImageView               android:layout_width="100dip"               android:layout_height="100dip"               android:layout_gravity="center"               android:layout_weight="1"               android:src="@drawable/pic1"               />                               //尚未帶入圖片，在程式內(.java)將會帶入圓角圖，id為img1               <ImageView               android:id="@+id/img1"               android:layout_width="100dip"               android:layout_height="100dip"               android:layout_gravity="center"               android:layout_weight="1"               />                     </LinearLayout>                     // TextView帶入文字         <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="歡迎來到小黑人的Android教室\n左邊圖---原始圖片！\n右邊圖---圓角圖片！\n圓角幅度可自行設定 ^^"         android:textColor="@android:color/white"         android:layout_gravity="center_horizontal"         android:padding="10dip"         android:textSize="18sp"         android:textStyle="bold"         android:lineSpacingMultiplier="1.7"         />             </LinearLayout>         //水平線性佈局     <LinearLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="horizontal"     android:padding="10dip"     android:layout_weight="1"     >         //圖片為pic2，未做圓角設置         <ImageView         android:layout_width="100dip"         android:layout_height="100dip"         android:layout_gravity="center"         android:layout_weight="1"         android:src="@drawable/pic2"         />         //尚未帶入圖片，在程式內(.java)將會帶入圓角圖，id為img2         <ImageView         android:id="@+id/img2"         android:layout_width="100dip"         android:layout_height="100dip"         android:layout_gravity="center"         android:layout_weight="1"         />             </LinearLayout>     </LinearLayout>

2.建立Layout佈局圓角的round.xml，首先在res資料夾下新建立一個資料夾，命名為drawable，接下來在drawable資料夾內建立round.xml，打開round.xml後開始進行Layout佈局圓角的設定。

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >         <!--         shape的類型含有:      1.rectangle --- 長方形、矩形     2.oval --- 橢圓形、卵形     3.line --- 線     4.ring --- 環形     -->     <!-- 圓角，Layout佈局圓角幅度設定值 -->     <corners     android:radius="15dip"     />             <!-- 框內底部顏色 -->     <solid     android:color="@android:color/black"     />             <!-- 外框，框線粗細，框線顏色 -->     <stroke     android:width="1.0dip"     android:color="#228B22"     />     <!-- 畫面顏色漸層，開始色碼與結束色碼進行漸層，角度為315度 -->     <gradient     android:startColor="#DC143C"     android:endColor="#FFD2D2"     android:angle="315"     />             <!-- padding內縮距離 -->     <padding     android:left="3dip"     android:right="3dip"     android:top="5dip"     android:bottom="5dip"     />             <!-- 尺寸大小 -->     <size     android:width="300dip"     android:height="300dip"     />         </shape>

3.最後是主程式(MainActivity.java)的畫面設置呈現。

public class MainActivity extends Activity {         @Override         protected void onCreate(Bundle savedInstanceState)         {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);                         //取得main.xml內img1,img2的ImageView         ImageView mImg1 = (ImageView) findViewById(R.id.img1);         ImageView mImg2 = (ImageView) findViewById(R.id.img2);                         //將圖片及圓角數值帶入getRoundedCornerBitmap()並放入mImg1內         mImg1.setImageBitmap(getRoundedCornerBitmap(                              BitmapFactory.decodeResource(                              getResources(), R.drawable.pic1),50.0f));                 //將圖片及圓角數值帶入getRoundedCornerBitmap()並放入mImg2內         mImg2.setImageBitmap(getRoundedCornerBitmap(                              BitmapFactory.decodeResource(                               getResources(), R.drawable.pic2),100.0f));         }         //圓角轉換函式，帶入Bitmap圖片及圓角數值則回傳圓角圖，回傳Bitmap再置入ImageView public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,float roundPx)         {                 Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),                                             bitmap.getHeight(),                                             Config.ARGB_8888);          Canvas canvas = new Canvas(output);          final int color = 0xff424242;          final Paint paint = new Paint();          final Rect rect = new Rect(0, 0, bitmap.getWidth(),                                          bitmap.getHeight());          final RectF rectF = new RectF(rect);          paint.setAntiAlias(true);          canvas.drawARGB(0, 0, 0, 0);          paint.setColor(color);          canvas.drawRoundRect(rectF, roundPx, roundPx, paint);          paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));          canvas.drawBitmap(bitmap, rect, rect, paint);          return output;          }  }

執行結果為 :

以上為ImageView圓角設置與Layout版面佈局圓角設置的程式碼。 ^^

大家可以試試看唷，如有任何問題都可以跟小黑人討論，也希望大家可以互相交流，那今天就到這裡囉，謝謝大家!!! >///<