美文网首页
Android layer-list 使用,并设置item的si

Android layer-list 使用,并设置item的si

作者: 想看烟花么 | 来源:发表于2022-06-30 16:36 被阅读0次

    现在我们正在做一个简单的聊天功能,那必然我们会对每一句的聊天内容设计一个聊天气泡作为背景,设计稿如下:


    design-bubble.png

    基于设计稿,很自然的我们会想到直接问UX要.9图,但是我们公司由UX部门不再同一个办公楼,本想让UX提供,沟通下来换来的是UX说已经提供了可以下载。但找来找去只发现设计稿提供了气泡的Tail。本来.9应该拿过来就可以用,但目前只提供Tail,不过也可以通过自己画的方式实现,接下来就是想到用android的layer-list机制,对资源tail和shape进行叠加绘制,一样能达到效果:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:right="6dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/primary" />
                <corners android:radius="@dimen/shape_chat_radius" />
            </shape>
        </item>
        <item
            android:drawable="@drawable/ic_bubble_right_tail"
            android:left="@dimen/shape_chat_radius"
            android:top="@dimen/shape_chat_radius" />
    </layer-list>
    

    一运行,效果图如下:


    bubble_error.png

    从上图中明显可以发现,Tail非常短,而且随着文字越多,Tail 越短,长文字几乎Tail直接不可见了,好家伙!
    看起来像是Tail随着文字的长度被拉伸没了,于是又想到,资源Tail.svg应该保持原有宽高大小,然后给<item 标签设置了android:width 和android:height属性,但android studio编译器提示了,width和height只在API 23 之后才支持,这......难道这个小小东西我要通过java代码的方式自定义view来实现?我不想这么干,于是google搜索框里敲了关键字 “android layer-list item size”,
    虽然没有找到能直接解决的方案,但有一片文章
    https://stackoverflow.com/questions/10706853/android-how-to-change-item-width-and-height 第3个回答这段话给我了一点启示:
    The above solution takes advantage of having a sized <item> (with a transparent <shape>) and an unsized one (with a <bitmap>) that has android:gravity set to left|top|right|bottom for matching both parent's dimensions. So, the real size of the <bitmap> will be determined by that of the unique sized <item> in the same parent.
    依旧是上面的代码,我给<item加上了android:gravity="end|right|bottom"完美,效果如下:

    bubble_well.png

    -----------------------------End-----------------------------

    我也是有底线的,感谢您的耐心阅读,欢迎支持与点赞。

    相关文章

      网友评论

          本文标题:Android layer-list 使用,并设置item的si

          本文链接:https://www.haomeiwen.com/subject/kpifbrtx.html