作者hrdrq (惜福)
看板MacDev
标题[请益] 请问这支app的这种button是怎麽做到的
时间Tue Oct 2 21:46:13 2012
最近在app strore上下载了一个app，
我发现它的UI有个地方另我百思不解
如下图：
http://imageshack.us/a/img209/8070/img0840p.png
在Navigation Bar下面有三个按钮，「5KM」、「所有频道」、「综合…」
当我按下「所有频道」（按住不放），会变如下图：
http://imageshack.us/a/img651/804/img0841.png
可以发现按钮的渐层色彩会变相反，上面的字也会变色。
我能想到的做法是使用一个custom的UIButton，
并准备两种图片，一种是按钮未按下时的样子，一种是按下、highlighted的样子
因为三个按钮的尺寸可能不同，因此要准备六张图片，
因为我看IB没有提供设定UIButton被highlighted时的text的颜色，
只能设定text单一的颜色，所以我想应该要写code让UIButton按下时改变text的颜色
可是现在问题来了！！
我使用iFunbox翻遍了这个app的所有图片png档，完全找不到用在这三个按钮的图，
甚至按钮右侧那个圆型的箭头的图都没有！！
这让我非常困惑，到底是怎麽实作的！请教大家，谢谢！
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.250.47.78
1F：推 kiii210:这种渐层有可能是用画的喔..记得是CAGradientLayer? 10/02 22:01
喔喔！原来是用画的！没有想到
2F：推 keanos:iFunbox看不到包在里面的图吧？最简单是把字放在图里一起换 10/02 22:21
可以喔！不过我忘记是不是要JB才看得到
3F：→ kiii210:iFunbox可以喔! 常常在用 XD 10/02 22:24
4F：推 dryman:CAGradientLayer不好用，用CGGradient比较简单 10/02 22:28
5F：→ dryman:箭头可以用字型取代 10/02 22:29
请问用字型取代是什麽意思呢？谢谢
另外又想到一个问题，是不是为了实现这样的效果（button不会因为卷动table而不见），
我原本写好的UITableViewController的子类，
是不是要改写成UIViewController的子类呢
然後再放上那些按钮跟一个UITableView。
感觉只是多个按钮，就要大费周章改继承的class？
※ 编辑: hrdrq 来自: 111.250.47.78 (10/02 22:51)
6F：→ hrdrq:是不是有修到推文>"< 10/02 22:51
7F：→ kiii210:我怎麽觉得他只是一个UIView而已,下面放UITableview 10/02 22:53
我打错字！
※ 编辑: hrdrq 来自: 111.250.47.78 (10/02 22:55)
8F：→ appleway:UIButton 可以设定highlighted时text的颜色。 10/03 00:34
请问IB可以设定吗，在哪边我都找不到，谢谢！
9F：→ RiddleApple:把Button加到self.navigationController.view上， 10/03 14:13
10F：→ RiddleApple:这样Button就不会跟着Table卷动了 10/03 14:13
我想要的效果是像图片中那样，UINavigationBar和UITableView中间有个独立空间来
放button，照着作把Button加到self.navigationController.view上，无法作出效果耶
※ 编辑: hrdrq 来自: 61.56.128.14 (10/03 19:23)
11F：→ RiddleApple:你是想做类似这样的效果吗?： 10/04 01:58
没错没错！！您就是用把Button加到self.navigationController.view上的方法吗
好厉害，可以请教写法吗？谢谢！
※ 编辑: hrdrq 来自: 211.72.67.226 (10/04 13:35)
谢谢您！！！我终於懂这个作法了，真酷。
不过有美中不足的地方：
1.最上面往下拉，第一个cell上面没有格线，因为它的上面是header
2.卷轴的顶端比button的位置还高，看得出来放button的view是在table view上方重叠的
3.若有多个section，第一个section要另外设定，多留一些空位给放button的view
不过这个做法还是满赞的，再次谢谢您！受教了
※ 编辑: hrdrq 来自: 61.56.128.14 (10/04 20:23)
14F：推 ljhgc:IB里,button的属性设定里有一项是State Config,那边选你要的 10/05 12:29
15F：→ ljhgc:状态, 下面的image, text color 那些也会跟着改变对应 10/05 12:30
16F：→ level39:也可以用ViewController加上TableView的方式 10/05 15:01