android設(shè)置控件樣式(邊框顏色,圓角)和圖片樣式(圓角)

本文鏈接:https://blog.csdn.net/weixin_37577039/article/details/79090433

android設(shè)置控件樣式(邊框顏色,圓角)和圖片樣式(圓角)


設(shè)置布局的背景為 圓角邊框:

```

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

? ? <solid android:color="@color/colorAccent" />

? ? <!-- 這里是設(shè)置為四周 也可以單獨(dú)設(shè)置某個(gè)位置為圓角-->

? ? <corners android:topLeftRadius="5dp"

? ? ? ? android:topRightRadius="5dp"

? ? ? ? android:bottomRightRadius="5dp"

? ? ? ? android:bottomLeftRadius="5dp"/>

? ? <stroke android:width="1dp" android:color="#000000" />

</shape

```

說明: solid為填充色 即內(nèi)部的背景填充色 ,stroke 為邊框 可以設(shè)置顏色和寬度


設(shè)置邊框顏色:

在drawable中 新建一個(gè)button_edge.xml文件


```
<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">? ?

<!-- 邊框顏色值 -->

<item>? ?

? ? ? <shape>? ?

? ? ? ? ? ? <solid android:color="#3bbaff" />? ?

? ? ? </shape>? ?

</item>? ?

<!--這個(gè)是按鈕邊框設(shè)置為四周 并且寬度為1-->

<item

android:right="1dp"

android:left="1dp"

android:top="1dp"

android:bottom="1dp">

? ? <shape>? ?

<!--這個(gè)是背景顏色-->

? ? ? ? ? <solid android:color="#ffffff" />? ? ? ?

<!--這個(gè)是按鈕中的字體與按鈕內(nèi)的四周邊距-->

? ? ? ? ? <padding android:bottom="10dp"? ?

? ? ? ? ? ? ? ? android:left="10dp"? ?

? ? ? ? ? ? ? ? android:right="10dp"? ?

? ? ? ? ? ? ? ? android:top="10dp" />? ?

? ? </shape>? ? ? ?

</item>? ?

</layer-list>

```

使用:

```android:background="@drawable/button_edge"```

圓角按鈕:(其實(shí)按鈕還是方形的,只是將外圍部分隱藏了而已)

在drawable中: 新建一個(gè) button_circle_shape.xml文件

```
<?xml version="1.0" encoding="UTF-8"?>

<shape

? ? xmlns:android="http://schemas.android.com/apk/res/android"

? ? android:shape="rectangle">

? ? <!-- 填充的顏色 -->

? ? <solid android:color="#FFFFFF" />

? ? <!-- android:radius 弧形的半徑 -->

? ? <!-- 設(shè)置按鈕的四個(gè)角為弧形 -->

? ? <corners

? ? android:radius="5dip" />?

? ? <!--也可單獨(dú)設(shè)置-->

? ? <!-- <corners -->

? <!-- android:topLeftRadius="10dp"-->

? <!-- android:topRightRadius="10dp"-->

? <!-- android:bottomRightRadius="10dp"-->

? <!--? android:bottomLeftRadius="10dp"-->

<!--? />? -->

? ? ? ? **設(shè)置文字padding**

? ? <!-- padding:Button里面的文字與Button邊界的間隔 -->

? ? <padding

? ? ? ? android:left="10dp"

? ? ? ? android:top="10dp"

? ? ? ? android:right="10dp"

? ? ? ? android:bottom="10dp"

? ? ? ? />

</shape>

```

設(shè)置圓角圖片

1 簡單的設(shè)置:(不能添加自定義圖片 只能設(shè)置顏色和字體)

在drawable中 創(chuàng)建一個(gè)image_circle.xml圖片


```
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

? ? <solid android:color="#FFFFFF" />

? ? <corners android:topLeftRadius="10dp"

? ? ? ? android:topRightRadius="10dp"

? ? ? ? android:bottomRightRadius="10dp"

? ? ? ? android:bottomLeftRadius="10dp"/>

</shape>

```

使用:

```

android:background="@drawable/image_circle"

```

2 通過Glide加載圖片的時(shí)候進(jìn)行轉(zhuǎn)換

使用Glide的transform函數(shù)

```
Glide.with(MainActivity.this).load(croppedUri)

.transform(new GlideRectRound(MainActivity.this,6)).into(headIcon);

```

矩形圓角

GlideRectRound.java文件


```

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Bitmap;

import android.graphics.BitmapShader;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.Log;

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;

import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;

/**

* Created by SiHao on 2018/3/3.

* Glide 的 圓角 圖片 工具類

*/

public class GlideRectRound extends BitmapTransformation {

? ? private static float radius = 0f;

? ? // 構(gòu)造方法1 無傳入圓角度數(shù) 設(shè)置默認(rèn)值為5

? ? public GlideRectRound(Context context) {

? ? ? ? this(context, 5);

? ? }

? ? // 構(gòu)造方法2 傳入圓角度數(shù)

? ? public GlideRectRound(Context context, int dp) {

? ? ? ? super(context);

? ? ? ? // 設(shè)置圓角度數(shù)

? ? ? ? radius = Resources.getSystem().getDisplayMetrics().density * dp;

? ? }

? ? // 重寫該方法 返回修改后的Bitmap

? ? @Override

? ? protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {

? ? ? ? return rectRoundCrop(pool,toTransform);

? ? }

? ? @Override

? ? public String getId() {

? ? ? ? Log.e("getID",getClass().getName() + Math.round(radius));

? ? ? ? return getClass().getName() + Math.round(radius);? // 四舍五入

? ? }

? ? private Bitmap rectRoundCrop(BitmapPool pool, Bitmap source){

? ? ? ? if (source == null) return null;

? ? ? ? Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888); // ARGB_4444——代表4x4位ARGB位圖,ARGB_8888——代表4x8位ARGB位圖

? ? ? ? if (result == null) {

? ? ? ? ? ? result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);

? ? ? ? }

? ? ? ? Canvas canvas = new Canvas(result);

? ? ? ? Paint paint = new Paint();

? ? ? ? // setShader 對圖像進(jìn)行渲染

? ? ? ? // 子類之一 BitmapShader設(shè)置Bitmap的變換? TileMode 有CLAMP (取bitmap邊緣的最后一個(gè)像素進(jìn)行擴(kuò)展),REPEAT(水平地重復(fù)整張bitmap)

? ? ? ? //MIRROR(和REPEAT類似,但是每次重復(fù)的時(shí)候,將bitmap進(jìn)行翻轉(zhuǎn))

? ? ? ? paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));

? ? ? ? paint.setAntiAlias(true);? // 抗鋸齒

? ? ? ? RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());

? ? ? ? canvas.drawRoundRect(rectF, radius, radius, paint);

? ? ? ? return result;

? ? }

}

```

圓角:

```

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapShader;

import android.graphics.Canvas;

import android.graphics.Paint;

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;

import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;

/**

* Created by SiHao on 2018/3/3.

* Glide圓形圖片工具類

*/

public class GlideCircleBitmap extends BitmapTransformation{

? ? public GlideCircleBitmap(Context context) {

? ? ? ? super(context);

? ? }

? ? // 重寫該方法 返回修改后的Bitmap

? ? @Override

? ? protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {

? ? ? ? return circleCrop(pool, toTransform);

? ? }

? ? @Override

? ? public String getId() {

? ? ? ? return getClass().getName();

? ? }

? ? private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {

? ? ? ? if (source == null) return null;

? ? ? ? // 邊長取長寬最小值

? ? ? ? int size = Math.min(source.getWidth(), source.getHeight());

? ? ? ? int x = (source.getWidth() - size) / 2;

? ? ? ? int y = (source.getHeight() - size) / 2;

? ? ? ? // TODO this could be acquired from the pool too

? ? ? ? Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

? ? ? ? Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);// ARGB_4444——代表4x4位ARGB位圖,ARGB_8888——代表4x8位ARGB位圖

? ? ? ? if (result == null) {

? ? ? ? ? ? result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);

? ? ? ? }

? ? ? ? Canvas canvas = new Canvas(result);

? ? ? ? Paint paint = new Paint();

? ? ? ? // setShader 對圖像進(jìn)行渲染

? ? ? ? // 子類之一 BitmapShader設(shè)置Bitmap的變換? TileMode 有CLAMP (取bitmap邊緣的最后一個(gè)像素進(jìn)行擴(kuò)展),REPEAT(水平地重復(fù)整張bitmap)

? ? ? ? //MIRROR(和REPEAT類似,但是每次重復(fù)的時(shí)候,將bitmap進(jìn)行翻轉(zhuǎn))

? ? ? ? paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));

? ? ? ? paint.setAntiAlias(true);// 抗鋸齒

? ? ? ? // 半徑取 size的一半

? ? ? ? float r = size / 2f;

? ? ? ? canvas.drawCircle(r, r, r, paint);

? ? ? ? return result;

? ? }

}

```

3 java代碼方式動態(tài)處理

通過獲取相應(yīng)的bitmap資源 可以 drawable 可以 uril 資源

URI 的話要轉(zhuǎn)為bitmap資源


```

URL url = new URL(String類型的字符串); //將String類型的字符串轉(zhuǎn)換為URL格式

holder.UserImage.setImageBitmap(BitmapFactory.decodeStream(url.openStream()));

```

然后在原圖上設(shè)置新的圖片

矩形圓角

```

//得到資源文件的BitMap

Bitmap image= BitmapFactory.decodeResource(getResources(),R.drawable.dog);

//創(chuàng)建RoundedBitmapDrawable對象

RoundedBitmapDrawable roundImg =RoundedBitmapDrawableFactory.create(getResources(),image);

//抗鋸齒

roundImg.setAntiAlias(true);

//設(shè)置圓角半徑

roundImg.setCornerRadius(30);

//設(shè)置顯示圖片

imageView.setImageDrawable(roundImg);

```

圓形:


```
//如果是圓的時(shí)候,我們應(yīng)該把bitmap圖片進(jìn)行剪切成正方形, 然后再設(shè)置圓角半徑為正方形邊長的一半即可

? Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.dog);

? Bitmap bitmap = null;

? //將長方形圖片裁剪成正方形圖片

? if (image.getWidth() == image.getHeight()) {

? ? ? bitmap = Bitmap.createBitmap(image, image.getWidth() / 2 - image.getHeight() / 2, 0, image.getHeight(), image.getHeight());

? } else {

? ? ? bitmap = Bitmap.createBitmap(image, 0, image.getHeight() / 2 - image.getWidth() / 2, image.getWidth(), image.getWidth());

? }

? RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);

? //圓角半徑為正方形邊長的一半

? roundedBitmapDrawable.setCornerRadius(bitmap.getWidth() / 2);

? //抗鋸齒

? roundedBitmapDrawable.setAntiAlias(true);

? imageView.setImageDrawable(roundedBitmapDrawable);

```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容