一、继续我们上一个例子
1.下面我们要实现的功能,是通过点按4个方向键,修改最上面那个图片按钮的位置
2.首先,我们把4个方向按钮实现一下
我先拽1个按钮上去,注意,我们不是1上来就拽6个按钮,
而是先拽1个按钮上去
我设置这1个按钮,大家看一下,这个按钮上有文字吗,没有吧,是不是只有这两张图片啊,黑色的向上箭头和绿色的向上箭头
所以说,我就把这个按钮上的文字,给它删掉
然后呢,这个按钮它显示背景图,我们看一下,这个背景图是哪个
打开左边的Images.xcassets,打开里面的Arrow文件夹,箭头,是不是Arrow这个东西吧
看一下背景图,我们找到向上的箭头背景图,top_normal,我们选中这个背景图,看一下右边的属性,Image项下,Image Size :96*96 pixels
那么,我就把这个按钮的背景图,选为top_normal,左边,先选中Main.storyboard,选中列表中的按钮“Button”,这个按钮虽然看不见,但是可以在列表中选中,
看右边的属性,先把按钮的Style属性改成Default,然后看State Config属性,选为Default,
再看Background属性,这里写上背景图的文件名,默认状态下,背景图是top_normal,这张图,
然后,点属性上面的小尺子图标,进入按钮的大小调整页面,把按钮的大小调整为96*96,也就是Width改为96,Height改为96
一看,太大了,那就调整为除以2的,Width改为48,Height改为48
回头再给大家解释这个除以2的问题
好了,这是1个,这是它默认的图片,然后给它高亮状态下设置背景图片
进入按钮的属性页面,把State Config改为HighLighted,
按钮高亮状态下的Background参数,改为top_highlighted
然后,还有按钮的禁用状态下的图片,把State Config改为Disabled,把Background参数,改为top_disable
这个图片,等它禁用的时候,就会看到效果,我们这儿没有禁用啊,后面会说这个问题
3.当你把这1个按钮搞定以后,这个时候,你选中这个按钮,按住option键,注意,option键一直按住,然后拖这个按钮,option键别松手,先松鼠标,再松option键
这样就复制出来另一个按钮,
再按住option键,复制第三个,第四个按钮
再按住option键,复制第五个,第六个按钮
等6个按钮都复制出来之后,再松开option键
这样的话,这几个按钮就1下都搞定了吧
你可以微调一下它们的位置
4.但是这几个按钮中的图片是不是都是一样的,你下面需要改一下每一个按钮的两个图片,一个是Default状态下的图片,另一个是HighLighted状态下的图片
比如,向右的这个按钮,Default状态下的图片是right_normal
向右的这个按钮,HighLighted状态下的图片是right_highlighted,
然后,把其他的按钮的两种状态下的图片,都改一下
如果有时间,可以把这些按钮Disable状态下的图片也改一下
精彩文章
发表评论