Oblique自定义属性全解析10个XML属性玩转斜切图片显示【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/ObliqueOblique 是一款专为 Android 打造的斜切图片显示开源控件库核心组件ObliqueView继承自ImageView无需编写任何复杂的 Canvas 代码仅靠10 个 XML 自定义属性就能把普通图片裁剪成平行四边形、梯形等炫酷造型。本文将逐条拆解 Oblique 的全部 XML 属性帮助新手快速掌握这套斜切图片控件的配置方法让 App 的图片展示立刻与众不同。一、Oblique 是什么一个属性搞定斜切图片在介绍属性之前先认识一下核心类ObliqueView它直接继承自 Android 的ImageView见 ObliqueView.java所以所有 ImageView 的常规用法它都支持。你只需在布局中把它当作普通图片控件使用再配上几个自定义属性就能得到一张被斜切的图片——上下两条边不再平行形成动感十足的倾斜造型。项目内置了完整的示例工程见 layout_one.xml、layout_two.xml 等布局文件克隆仓库后可直接运行体验git clone https://gitcode.com/gh_mirrors/ob/Oblique二、10个XML属性速查表所有自定义属性都定义在 attrs.xml 中使用前需在根布局声明命名空间xmlns:apphttp://schemas.android.com/apk/res-auto。先看一张速查表属性作用默认值android:src图片来源无app:type填充类型solid_colorapp:angle渐变方向LEFT_TO_RIGHTapp:starting_slant_angle起始边倾斜角90app:ending_slant_angle结束边倾斜角90app:basecolor基础填充色透明app:startcolor渐变起始色透明app:endcolor渐变结束色透明app:radius圆角半径0app:shadow_height阴影高度0三、核心玩法4个决定斜切效果的属性1. starting_slant_angle 与 ending_slant_angle左右两条边的倾斜角度这是 Oblique 的灵魂属性。starting_slant_angle控制图片**起始边左侧的倾斜角ending_slant_angle控制结束边右侧**的倾斜角取值范围 0~180 度默认都是 90 度即垂直不斜切。两边角度不同形成平行四边形比如起始 10、结束 0左侧明显倾斜一边为 0形成梯形视觉效果类似掀开一页纸两边都小于 90图片整体向一侧倾倒产生透视感。示例工程 activity_sample_one.xml 展示了从 0/10 到 170/180 的多种角度组合强烈建议动手调一调斜切图片的视觉效果一目了然。2. android:src设置图片来源android:src与普通 ImageView 用法完全一致可以指向 drawable 资源、网络加载后的 Bitmap 等。需要提醒的是ObliqueView 只支持centerCrop和fitXY两种缩放模式设置其他模式会直接抛出异常见 ObliqueView.java使用时请务必注意。3. radius给斜切图片加上圆角radius属性为斜切后的图片添加圆角取值范围 0~60默认 0直角。配合斜切造型圆角能让图片边缘更柔和这在卡片式 UI 中非常讨喜。4. shadow_height添加阴影层次感shadow_height控制图片的阴影高度默认 0 表示无阴影。注意阴影基于 Android 的 elevation 机制实现需要 API 21Android 5.0及以上系统才能看到效果参考 Config.java 中的逻辑。四、进阶玩法type 与 4 种填充风格app:type决定斜切区域内部如何填充共 4 种取值对应枚举定义见 Type.javaimage用图片填充即斜切图片最常用的模式solid_color纯色填充配合basecolor使用linear_gradient线性渐变填充配合startcolor、endcolor使用radial_gradient径向渐变填充同样配合起止色使用。五、渐变配色三件套basecolor、startcolor、endcolor当type为纯色或渐变时这三个颜色属性就派上用场了basecolor纯色填充的基础颜色startcolor渐变的起始颜色endcolor渐变的结束颜色。颜色值使用十六进制格式如#2E3192、#D4145A。想要双色渐变海报、渐变按钮、渐变分割线组合 type 起止色即可一键实现无需再写 GradientDrawable。angle8 个渐变方向随心选渐变的方向由app:angle控制共 8 个枚举值定义见 GradientAngle.java枚举值渐变方向枚举值渐变方向LEFT_TO_RIGHT左→右TOP_TO_BOTTOM上→下RIGHT_TO_LEFT右→左BOTTOM_TO_TOP下→上LEFT_TOP_TO_RIGHT_BOTTOM左上→右下RIGHT_TOP_TO_LEFT_BOTTOM右上→左下RIGHT_BOTTOM_TO_LEFT_TOP右下→左上LEFT_BOTTOM_TO_RIGHT_TOP左下→右上小技巧配合斜切角度使用斜向渐变如LEFT_BOTTOM_TO_RIGHT_TOP往往能获得比水平渐变更协调的视觉效果这也是 README 示例中的默认搭配。六、完整示例一个布局玩转全部属性把上面 10 个属性组合起来一个典型的斜切图片布局长这样ak.sh.ay.oblique.ObliqueView android:layout_widthmatch_parent android:layout_height200dp android:scaleTypecenterCrop android:srcdrawable/img app:typelinear_gradient app:angleLEFT_BOTTOM_TO_RIGHT_TOP app:starting_slant_angle10 app:ending_slant_angle0 app:startcolor#D4145A app:endcolor#FBB03B app:radius18 app:shadow_height10 /七、新手避坑指南缩放模式限制只支持centerCrop与fitXY别在 XML 里写fitCenteradjustViewBounds 不支持设置了会直接报错请使用固定宽高或权重布局参考 layout_two.xml 的写法角度取值范围起止角限定 0~180圆角限定 0~60超出部分源码会自动截断动态修改除了 XML也可以通过setStartAngle()、setCornerRadius()、setType()等方法在 Java 代码中实时切换效果属性与方法一一对应。八、总结Oblique 用 10 个简洁的 XML 属性把斜切图片显示这件事做到了开箱即用两个倾斜角决定造型、type 决定填充风格、颜色三件套决定配色、圆角和阴影负责质感。无论你是想做出倾斜海报、透视卡片还是几何分割的图片墙它都能成为你布局工具箱里一个轻量又有趣的选项。快去克隆仓库运行示例亲手调一调这 10 个属性感受斜切图片的独特魅力吧【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/Oblique创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Oblique自定义属性全解析：10个XML属性玩转斜切图片显示
Oblique自定义属性全解析10个XML属性玩转斜切图片显示【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/ObliqueOblique 是一款专为 Android 打造的斜切图片显示开源控件库核心组件ObliqueView继承自ImageView无需编写任何复杂的 Canvas 代码仅靠10 个 XML 自定义属性就能把普通图片裁剪成平行四边形、梯形等炫酷造型。本文将逐条拆解 Oblique 的全部 XML 属性帮助新手快速掌握这套斜切图片控件的配置方法让 App 的图片展示立刻与众不同。一、Oblique 是什么一个属性搞定斜切图片在介绍属性之前先认识一下核心类ObliqueView它直接继承自 Android 的ImageView见 ObliqueView.java所以所有 ImageView 的常规用法它都支持。你只需在布局中把它当作普通图片控件使用再配上几个自定义属性就能得到一张被斜切的图片——上下两条边不再平行形成动感十足的倾斜造型。项目内置了完整的示例工程见 layout_one.xml、layout_two.xml 等布局文件克隆仓库后可直接运行体验git clone https://gitcode.com/gh_mirrors/ob/Oblique二、10个XML属性速查表所有自定义属性都定义在 attrs.xml 中使用前需在根布局声明命名空间xmlns:apphttp://schemas.android.com/apk/res-auto。先看一张速查表属性作用默认值android:src图片来源无app:type填充类型solid_colorapp:angle渐变方向LEFT_TO_RIGHTapp:starting_slant_angle起始边倾斜角90app:ending_slant_angle结束边倾斜角90app:basecolor基础填充色透明app:startcolor渐变起始色透明app:endcolor渐变结束色透明app:radius圆角半径0app:shadow_height阴影高度0三、核心玩法4个决定斜切效果的属性1. starting_slant_angle 与 ending_slant_angle左右两条边的倾斜角度这是 Oblique 的灵魂属性。starting_slant_angle控制图片**起始边左侧的倾斜角ending_slant_angle控制结束边右侧**的倾斜角取值范围 0~180 度默认都是 90 度即垂直不斜切。两边角度不同形成平行四边形比如起始 10、结束 0左侧明显倾斜一边为 0形成梯形视觉效果类似掀开一页纸两边都小于 90图片整体向一侧倾倒产生透视感。示例工程 activity_sample_one.xml 展示了从 0/10 到 170/180 的多种角度组合强烈建议动手调一调斜切图片的视觉效果一目了然。2. android:src设置图片来源android:src与普通 ImageView 用法完全一致可以指向 drawable 资源、网络加载后的 Bitmap 等。需要提醒的是ObliqueView 只支持centerCrop和fitXY两种缩放模式设置其他模式会直接抛出异常见 ObliqueView.java使用时请务必注意。3. radius给斜切图片加上圆角radius属性为斜切后的图片添加圆角取值范围 0~60默认 0直角。配合斜切造型圆角能让图片边缘更柔和这在卡片式 UI 中非常讨喜。4. shadow_height添加阴影层次感shadow_height控制图片的阴影高度默认 0 表示无阴影。注意阴影基于 Android 的 elevation 机制实现需要 API 21Android 5.0及以上系统才能看到效果参考 Config.java 中的逻辑。四、进阶玩法type 与 4 种填充风格app:type决定斜切区域内部如何填充共 4 种取值对应枚举定义见 Type.javaimage用图片填充即斜切图片最常用的模式solid_color纯色填充配合basecolor使用linear_gradient线性渐变填充配合startcolor、endcolor使用radial_gradient径向渐变填充同样配合起止色使用。五、渐变配色三件套basecolor、startcolor、endcolor当type为纯色或渐变时这三个颜色属性就派上用场了basecolor纯色填充的基础颜色startcolor渐变的起始颜色endcolor渐变的结束颜色。颜色值使用十六进制格式如#2E3192、#D4145A。想要双色渐变海报、渐变按钮、渐变分割线组合 type 起止色即可一键实现无需再写 GradientDrawable。angle8 个渐变方向随心选渐变的方向由app:angle控制共 8 个枚举值定义见 GradientAngle.java枚举值渐变方向枚举值渐变方向LEFT_TO_RIGHT左→右TOP_TO_BOTTOM上→下RIGHT_TO_LEFT右→左BOTTOM_TO_TOP下→上LEFT_TOP_TO_RIGHT_BOTTOM左上→右下RIGHT_TOP_TO_LEFT_BOTTOM右上→左下RIGHT_BOTTOM_TO_LEFT_TOP右下→左上LEFT_BOTTOM_TO_RIGHT_TOP左下→右上小技巧配合斜切角度使用斜向渐变如LEFT_BOTTOM_TO_RIGHT_TOP往往能获得比水平渐变更协调的视觉效果这也是 README 示例中的默认搭配。六、完整示例一个布局玩转全部属性把上面 10 个属性组合起来一个典型的斜切图片布局长这样ak.sh.ay.oblique.ObliqueView android:layout_widthmatch_parent android:layout_height200dp android:scaleTypecenterCrop android:srcdrawable/img app:typelinear_gradient app:angleLEFT_BOTTOM_TO_RIGHT_TOP app:starting_slant_angle10 app:ending_slant_angle0 app:startcolor#D4145A app:endcolor#FBB03B app:radius18 app:shadow_height10 /七、新手避坑指南缩放模式限制只支持centerCrop与fitXY别在 XML 里写fitCenteradjustViewBounds 不支持设置了会直接报错请使用固定宽高或权重布局参考 layout_two.xml 的写法角度取值范围起止角限定 0~180圆角限定 0~60超出部分源码会自动截断动态修改除了 XML也可以通过setStartAngle()、setCornerRadius()、setType()等方法在 Java 代码中实时切换效果属性与方法一一对应。八、总结Oblique 用 10 个简洁的 XML 属性把斜切图片显示这件事做到了开箱即用两个倾斜角决定造型、type 决定填充风格、颜色三件套决定配色、圆角和阴影负责质感。无论你是想做出倾斜海报、透视卡片还是几何分割的图片墙它都能成为你布局工具箱里一个轻量又有趣的选项。快去克隆仓库运行示例亲手调一调这 10 个属性感受斜切图片的独特魅力吧【免费下载链接】ObliqueWith Oblique explore new styles of displaying images项目地址: https://gitcode.com/gh_mirrors/ob/Oblique创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考