android设置控件样式(边框颜色,圆角)和图片样式(圆角)
16lz
2022-06-24
android设置控件样式(边框颜色,圆角)和图片样式(圆角)
设置布局的背景为 圆角边框:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/colorAccent" /> <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/> <stroke android:width="1dp" android:color="#000000" />shape>
说明: solid为填充色 即内部的背景填充色 ,stroke 为边框 可以设置颜色和宽度
设置边框颜色:
在drawable中 新建一个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> <item android:right="1dp"android:left="1dp"android:top="1dp"android:bottom="1dp"> <shape> <solid android:color="#ffffff" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> shape> item> layer-list>
使用:
android:background="@drawable/button_edge"
圆角按钮:(其实按钮还是方形的,只是将外围部分隐藏了而已)
在drawable中: 新建一个 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" /> <corners android:radius="5dip" /> **设置文字padding** <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />shape>
使用:
android:background="@drawable/shape"
设置圆角图片
1 简单的设置:(不能添加自定义图片 只能设置颜色和字体)
在drawable中 创建一个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加载图片的时候进行转换
使用Glide的transform函数
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; // 构造方法1 无传入圆角度数 设置默认值为5 public GlideRectRound(Context context) { this(context, 5); } // 构造方法2 传入圆角度数 public GlideRectRound(Context context, int dp) { super(context); // 设置圆角度数 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 对图像进行渲染 // 子类之一 BitmapShader设置Bitmap的变换 TileMode 有CLAMP (取bitmap边缘的最后一个像素进行扩展),REPEAT(水平地重复整张bitmap) //MIRROR(和REPEAT类似,但是每次重复的时候,将bitmap进行翻转) 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 对图像进行渲染 // 子类之一 BitmapShader设置Bitmap的变换 TileMode 有CLAMP (取bitmap边缘的最后一个像素进行扩展),REPEAT(水平地重复整张bitmap) //MIRROR(和REPEAT类似,但是每次重复的时候,将bitmap进行翻转) 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代码方式动态处理
通过获取相应的bitmap资源 可以 drawable 可以 uril 资源
URI 的话要转为bitmap资源
URL url = new URL(String类型的字符串); //将String类型的字符串转换为URL格式 holder.UserImage.setImageBitmap(BitmapFactory.decodeStream(url.openStream()));
然后在原图上设置新的图片
矩形圆角
//得到资源文件的BitMapBitmap image= BitmapFactory.decodeResource(getResources(),R.drawable.dog);//创建RoundedBitmapDrawable对象RoundedBitmapDrawable roundImg =RoundedBitmapDrawableFactory.create(getResources(),image);//抗锯齿roundImg.setAntiAlias(true);//设置圆角半径roundImg.setCornerRadius(30);//设置显示图片imageView.setImageDrawable(roundImg);
圆形:
//如果是圆的时候,我们应该把bitmap图片进行剪切成正方形, 然后再设置圆角半径为正方形边长的一半即可 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);
4 利用Google给出的PorterDuffXfermode,如下图 利用两层源图像Src和目标图像Dst(当然,其实这两层都是源图像,拼接得到的才叫目标图像 所以有些人把src叫做顶层,dst叫做底层)的叠加效果,实现不同图片样式的显示
两个图片的叠加模式有16种,如下 对照上面的图更形象的感受:
PorterDuff.Mode.CLEAR所绘制不会提交到画布上PorterDuff.Mode.SRC只显示SRC的图PorterDuff.Mode.DST只显示Dst的图PorterDuff.Mode.SRC_OVER都显示 只是若有叠加部分 显示SRC的内容PorterDuff.Mode.DST_OVER 都显示 只是若有叠加部分 显示DST的内容PorterDuff.Mode.SRC_IN只显示两层绘制的交集部分,并且显示SRC顶层部分PorterDuff.Mode.DST_IN只显示两层绘制的交集部分,并且显示DST底层部分PorterDuff.Mode.SRC_OUT取两层的并集减去SRC的部分PorterDuff.Mode.DST_OUT取两层的并集减去DST的部分PorterDuff.Mode.SRC_ATOP显示DST底层并且把SRC层和DST层的交集部分显示为SRC层PorterDuff.Mode.DST_ATOP显示SRC顶层并且把SRC层和DST层的交集部分显示为DST层PorterDuff.Mode.XOR取两个层的非交集部分PorterDuff.Mode.DARKEN显示两层,并且把交集部分的进行对应像素的比较,取较暗值,如果色值相同则进行混合PorterDuff.Mode.LIGHTEN显示两层,并且把交集部分的进行对应像素的比较,取较亮值,如果色值相同则进行混合PorterDuff.Mode.MULTIPLY 查看每个通道中的颜色信息,并将基色与混合色复合。结果色总是较暗的颜色,任何颜色与黑色复合产生黑色,任何颜色与白色复合保持不变,当用黑色或白色以外的颜色绘画时,绘画工具绘制的连续描边产生逐渐变暗的颜色PorterDuff.Mode.SCREEN保留两个图层中较白的部分,较暗的部分被遮盖;当一层使用了滤色(屏幕)模式时,图层中纯黑的部分变成完全透明,纯白部分完全不透明,其他的颜色根据颜色级别产生半透明的效果
更多相关文章
- Android(安卓)下的视频播放器faplayer 编译
- Android系列教程之六:TextView小组件的使用--附带超链接和跑马灯
- Android开发之旅: Intents和Intent Filters(理论部分)
- Android(安卓)ListView 滑动背景为黑色的解决办法
- Android输入法弹出时覆盖输入框问题
- Android的WiFi子系统架构
- AndroidUI设计之 布局管理器 - 详细解析布局实现
- 从零开始学Android之XML
- 拖动ListView时背景出现黑色的解决办法!