UIButton 的設計讓 Now Playing 文字與背景圖完美組合呈現

Playing Button

音樂類型的 App 功能上幾乎都可以聽歌曲或是電台，而有一種操作上體驗是當進入播放 Player 聽歌時候，可以讓使用者回上一頁，到 App 裡面任何操作同時，依然可以正常聽著音樂。但是在不同頁面操作時候，又需要可以回到剛剛 Player，那麼進入點就是那顆 Now Playing 正在播放的 UIButton。

Now Playing 的按鈕在設計上不一樣地方在於它的形狀會跟一般的按鈕不同，一般的按鈕是方形的，所以我們只要使用一般按鈕加上文字標題組合上去即可，但是講到 Now Playing 最大特色是它是右邊箭頭的按鈕，也就是明確跟使用者說按下去會往右邊進去進入 Player。

所以我們準備素材就變成需要，一個 Now Playing 的背景圖、UIButton 和 Text 來呈現。如果單純以這三個來組合會發現，圖片沒有錯，文字也是在整個 Button 的正中間，但是畫面看上去就會變成文字太靠近右邊問題了，該怎麼辦？

如何讓文字正常的呈現在左邊那塊黑色區塊正中間呢？有很多種方法，有一種最恰當做法是用一個留白的技巧，因為原先問題是文字太靠近右邊了，因此我們需要重新設計我們的背景圖，將圖片左邊再多一點寬度空間，最後組成一張讓文字置中，再加上後面背景圖置中，又可以讓使用者視覺看上去恰當的呈現在左邊的黑色區塊內了。

依照圖片三個區塊來說明即是：

1. 區塊ㄧ、原來背景圖、加上 button text 來呈現，發現視覺上文字靠右問題。
2. 區塊二、利用背景設定為白色，讓我們知道這張背景圖實際的長相。
3. 區塊三、經過些技巧，讓文字在視覺上可以正常的出現在方塊裡面。

程式上只要照著原來寫法即可

	if (controller && self.isDisplayingNowPlaying) {
	UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
	button.frame = CGRectMake(0, 0, 69, 30);
	[button addTarget:self action:@selector(currentPlayingButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
	[button setBackgroundImage:[UIImage imageNamed:@"rightBTN.png"] forState:UIControlStateNormal];
	[button setBackgroundImage:[UIImage imageNamed:@"rightBTNPressed.png"] forState:UIControlStateSelected];
	[button setTitle:@"正在播放" forState:UIControlStateNormal];
	button.titleLabel.font = [UIFont boldSystemFontOfSize:12];
	self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
	}

view raw gistfile1.m hosted with ❤ by GitHub

這一個小小細節，卻是影響使用者操作上的觀感，為了達到視覺上平衡目的，修改程式或是圖檔過程很難調整出來，所以記得在過程適當的讓 background color 調整為白色，如此一來再調整就知道微調的下一步方向了。

* 更新 2012/05/11 追加不換圖情況下，用程式碼來讓標題往左邊移動方式。

	UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
	UIEdgeInsets titleInsets = UIEdgeInsetsMake(0.0, -8.0, 0.0, 0.0);
	button.titleEdgeInsets = titleInsets;
	button.frame = CGRectMake(0, 0, 69, 30);
	......

view raw gistfile1.m hosted with ❤ by GitHub