零基础美化篇之QQ系列-004-搜索编辑框

易团雪 · 发表于 2024-3-11 16:41:03

本帖最后由易团雪于 2024-3-15 08:56 编辑

QQ头像其他部分这里就不讲了，那些都比较简单。自己动手弄一下，这样也可以加强自己的动手能力
1.编辑框设置
布局-项：布局宽度=填充父，布局高度=32，边框=23,0,26//是为后面设置编辑框前面的图标和输入文字的位置不会和图标重叠
开关：背景透明=真
常规：提示内容=搜索，提示内容颜色=#FFFFFFFF
2.背景编辑器
分别添加无焦点和焦点两个状态效果(其实就是离开和按下)
QQ图片20240311171843.png

工具条添加形状矩形-设置为渐变效果
渐变颜色分别为：#FF6EA3FE和#FF4CDAFE
如图：
QQ图片20240311171020.png

接下我们画搜索图标设置如下
圆形：去掉填充，设置描边效果。颜色=白色，宽度高度=13，左边=5，顶边=8
矩形：宽度=5，高度=1，左边=14，顶边=20，旋转=45
QQ图片20240311171208.png

是不是很简单，这样就完成了图标的设计。
接下来，选择焦点状态。同样按照上面操作设计按下效果
这里只是修改矩形的背景颜色：白色，搜索图标颜色：#FFC8C8C8

		自动登录	找回密码
密码			加入我们

[图文教程] 零基础美化篇之QQ系列-004-搜索编辑框