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

```

說(shuō)明: 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 簡(jiǎn)單的設(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 通過(guò)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 無(wú)傳入圓角度數(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 對(duì)圖像進(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;

? ? ? ? // 邊長(zhǎng)取長(zhǎng)寬最小值

? ? ? ? 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 對(duì)圖像進(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代碼方式動(dòng)態(tài)處理

通過(guò)獲取相應(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對(duì)象

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

//抗鋸齒

roundImg.setAntiAlias(true);

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

roundImg.setCornerRadius(30);

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

imageView.setImageDrawable(roundImg);

```

圓形:


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

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

? Bitmap bitmap = null;

? //將長(zhǎng)方形圖片裁剪成正方形圖片

? 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);

? //圓角半徑為正方形邊長(zhǎng)的一半

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

? //抗鋸齒

? roundedBitmapDrawable.setAntiAlias(true);

? imageView.setImageDrawable(roundedBitmapDrawable);

```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評(píng)論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,634評(píng)論 3 419
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評(píng)論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評(píng)論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,835評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,235評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評(píng)論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,459評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,000評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,819評(píng)論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,004評(píng)論 1 370
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,257評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評(píng)論 1 288
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,717評(píng)論 3 393
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,003評(píng)論 2 374

推薦閱讀更多精彩內(nèi)容