Android 拾遗

安卓中设置(shape)圆角背景和边框(stroke)相关的问题

2018-12-01  本文已影响93人  谁把我的昵称都占用了

最近开发的项目中使用的圆角背景和边框比较多,基本都是使用shape文件和.9图片实现的。但在实现的过程中也是会出现一些小问题,这篇随笔会总结下来其中遇到的问题。

一,圆角大小不一致

1,四周圆角都为10dp 的shape设置

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_ffffff" />
    <corners
        android:bottomLeftRadius="@dimen/s_10dp"
        android:bottomRightRadius="@dimen/s_10dp"
        android:topLeftRadius="@dimen/s_10dp"
        android:topRightRadius="@dimen/s_10dp" />
</shape>
四周圆角一样的效果.png

2,四周圆角左右下方为10dp,左上方为30dp,右上方为20dp 的shape设置

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_ffffff" />
    <corners
        android:bottomLeftRadius="@dimen/s_10dp"
        android:bottomRightRadius="@dimen/s_10dp"
        android:topLeftRadius="@dimen/s_30dp"
        android:topRightRadius="@dimen/s_20dp" />
</shape>
四周圆角不一样的效果.png

二,外层父布局和内层子布局同时设置圆角

1,比如最外层布局设置四周圆角都为10dp ,而右下角的(TextView是)设置为30dp ,填充颜色为#4db8ff
外层和内层shape分别如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_ffffff" />
    <corners
        android:bottomLeftRadius="@dimen/s_10dp"
        android:bottomRightRadius="@dimen/s_10dp"
        android:topLeftRadius="@dimen/s_10dp"
        android:topRightRadius="@dimen/s_10dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/color_4db8ff" />
    <corners
        android:bottomRightRadius="@dimen/s_30dp" />
</shape>
外层和内层同时设置圆角但背景颜色不同.png

切记如果外层已经设置了圆角,内层match_parent后,如果背景仅仅设置一个背景颜色的话,会把外层的圆角覆盖掉,效果如下

外层设置圆角后,内层单独设置背景颜色.png
这时候需要给右下角的TexeView单独设置一个bottomRightRadius和外层的圆角保持一致

三,圆角和边框同时存在

项目中如果有多个有相同边框的view拼接在一块,会有重复的边框,造成中间边框变粗,从而影响效果。
可以通过以下代码处理,给右边view的左边框设置为-1dp(绝对值和边框一致),则右边view的左边框不再显示。或者给左边view的右边框设置为-1dp(绝对值和边框一致)亦可。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- item 的top left right bottom 相当于margin 设置不需要的边为负值 -->
    <item
        android:left="-1dp">
        <shape>
            <!-- 背景颜色 -->
            <solid android:color="#ffffff" />
            <!-- 边框颜色 -->
            <stroke
                android:width="1dp"
                android:color="#ff0000" />
            <corners
                android:topRightRadius="10dp"
                android:bottomRightRadius="10dp" />
        </shape>
    </item>
</layer-list>
两个有边框的view拼接到一块的中间边框未处理,变粗.png 两个有边框的view拼接到一块的中间边框.png
上一篇下一篇

猜你喜欢

热点阅读