一、專案概述

在專案中美工提供給我們的圖片通常是矩形的，我們如何把矩形的圖片做成圓角矩形、橢圓形以其圓形效果的圖形顯示效果，這就是我這篇文章要講的內容。

效果如下：

我這裡使用的是開源專案  RoundedImageView

二、搭建RoundedImageView的使用環境

下載後，我們得到RoundedImageView資料夾。

將RoundedImageView\roundedimageview\src\main\java\com\makeramen下的三個java檔案複製到自己專案中。這是會出現一些錯誤。

1、直接複製java檔案導致包引入的錯誤，這個只需要修改匯入的包名即可。

2、RoundedImageView依賴於picasso-2.3.4.jar，這個需要下載放在製劑專案的libs目錄下。下載地址為點選開啟連結

3、缺少attrs.xml檔案，將\RoundedImageView\roundedimageview\src\main\res\values\attrs.xml複製到自己專案的values目錄下。

按照要求排版後，專案結構大致如下：

注意必要檔案是 libs下面的picasso.jar  , values下面的attrs.xml  、和view包下面的三個java檔案（RoundedDrawable,RoundedImageView和RoundedTransformationBuilder）

三、使用RoundedImageView

這裡主要是要注意它的幾個自定義屬性的作用 。

<?xml version="1.0" encoding="utf-8"?>
<resources>
   
    <!-- 圓角矩形 橢圓的自定義屬性
    	corner_radius : 邊角弧度。這個值越大，圓角越明顯
    	border_width  : 邊框寬度
    	border_color  : 邊框顏色
    	mutate_background  :   背景是否變化(這裡在demo中改變不明顯)
    	oval          :   是否以橢圓形式顯示  true為以橢圓形式顯示   flase以矩形形式顯示
     -->
    <declare-styleable name="RoundedImageView">
	    <attr name="corner_radius" format="dimension" />
	    <attr name="border_width" format="dimension" />
	    <attr name="border_color" format="color" />
	    <attr name="mutate_background" format="boolean" />
	    <attr name="oval" format="boolean" />
   		<attr name="android:scaleType" />
    </declare-styleable>
    
</resources>
 

本專案的layout.xml為

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    android:orientation="vertical" >


    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/light" >

            <edu.njupt.javer.view.RoundedImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:padding="10dip"
                android:scaleType="center"
                android:src="@drawable/mm1"
                app:border_color="@color/dark"
                app:border_width="3dip"
                app:corner_radius="30dip"
                app:mutate_background="true"
                app:oval="false" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/dark" >

            <edu.njupt.javer.view.RoundedImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:padding="10dip"
                android:scaleType="center"
                android:src="@drawable/mm2"
                app:border_color="@color/light"
                app:border_width="3dip"
                app:corner_radius="30dip"
                app:mutate_background="true"
                app:oval="true" />
        </RelativeLayout>
        
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/light" >

            <edu.njupt.javer.view.RoundedImageView
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:layout_centerInParent="true"
                android:padding="10dip"
                android:scaleType="center"
                android:src="@drawable/mm3"
                app:border_color="@color/dark"
                app:border_width="3dip"
                app:corner_radius="30dip"
                app:mutate_background="true"
                app:oval="true" />
        </RelativeLayout>
    </LinearLayout>
	</ScrollView>
</LinearLayout>

五、補充

除了在xml中設定屬性外，RoundedImageView也可以在程式碼中設定屬性。

Define in xml:

<com.makeramen.RoundedImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imageView1"
        android:src="@drawable/photo1"
        android:scaleType="centerCrop"
        app:corner_radius="30dip"
        app:border_width="2dip"
        app:border_color="#333333"
        app:mutate_background="true"
        app:oval="true" />

Or in code:

RoundedImageView iv = new RoundedImageView(context);
iv.setScaleType(ScaleType.CENTER_CROP);
iv.setCornerRadius(10);
iv.setBorderWidth(2);
iv.setBorderColor(Color.DKGRAY);
iv.setMutateBackground(true);
iv.setImageDrawable(drawable);
iv.setBackground(backgroundDrawable);
iv.setOval(true);

Or make a Transformation for Picasso:

Transformation transformation = new RoundedTransformationBuilder()
          .borderColor(Color.BLACK)
          .borderWidthDp(3)
          .cornerRadiusDp(30)
          .oval(false)
          .build();

Picasso.with(context)
    .load(url)
    .fit()
    .transform(transformation)
    .into(imageView);