使用ScGPEdit制作一个圆角搜索框全过程

学习大师原创作品,请勿转载。


设计稿如下,要制作一个圆角输入框,并带一个删除按钮



这个效果大家能做出来吗?


实现过程:


1、放入一个ScGPEdit


2、根据设计稿,设置编辑框的高度为45 宽度397



3、选中控件,使用CnPack的工具对控件进行容器上下居中,左右居中对齐排列:



4.设置编辑器为圆角矩形,圆角弧度为20:



如图:




5.设置文字的字体,字号:


    



6.优化UI选项,设置背景色、边框颜色、字体颜色


      


需要说明的是,颜色的最终效果受颜色值和颜色透明值两个共同决定,请大家慢慢体会。


7、调整文字的位置,通过内容四周间隙属性来调整:


    



8、设置提示语


     



9、准备实现右侧清除按钮,准备好两张按钮图片:


10、设置关联按钮使用的图片列表:



11、设置右侧按钮属性,使按钮可见,并配置按钮的图片


    




12、 右侧清除按钮的事件代码:


    



  




至此,一个漂亮的搜索输入框完美实现,如下图:




是不是感觉很有成就感,么么哒,各位学员们,加油咯!





































联系电话:
020-00000000
联系电话:
020-00000000
联系电话:
020-12345678