[iOS] 利用Smart App Banners在網頁上推廣Native App

起初先在Flickr網頁注意到這個:

按下open就會直接帶你到App store下載Flickr App, 這就是iOS6開始有的Smart App Banners, 覺得頗有趣的, 就去看了原始碼查了一下作法:

以上這是Flickr的HTML裡面的, 作法很簡單, 就只是在HTML內放個"apple-itunes-app"的meta tag, 指定app-id和參數(非必須)

Android應該也要加個這東西才對呀.....

[筆記][Three20] 設定launcherView item的字型

有關Style sheet的用法參考前篇

Three20的document跟Android比起來不遑多讓, 實在也少的可憐, 當然啦, 這樣也有另一種樂趣, 就是上網找跟追code囉!

剛嫌我的code在Launcher View上面的字型實在太醜, 很想把它改掉, 第一個想到的當然是Style sheet, 但遍尋TTStyleSheet, TTDefaultStyleSheet的document, 找不到類似的東西

後來在TTLauncherButton.m發現這一行:

[self setStylesWithSelector:@"launcherButton:"];

難不成就是"launcherButton"?

所以就試著在style sheet的class中加入:

- (TTStyle*)launcherButton:(UIControlState)state { 

UIColor *color = RGBCOLOR(30, 30, 30);

return [TTTextStyle styleWithFont:[UIFont systemFontOfSize:12] 

color: color

minimumFontSize:12 shadowColor:nil 

shadowOffset:CGSizeZero next:nil];

} 

 

直覺想說是字型, 所以用了TTTextStyle, 不過這樣的code下場是....圖不見了!!

由於剛剛是在TTLauncherButton發現的, TTLauncherButton繼承自TTButton, 所以看了一下TTButton, label的字型是TTTextStyle沒錯, 而圖是TTPartStyle, 所以兩者都要給, 缺一不可, 而以TTButton.m的這行code來看:

TTPartStyle* imageStyle = [style styleForPart:@"image"];

圖的名字是"image"

(TTPartStyle *)

+ styleWithName:style:next:

TTPartStyle的constructor除了name以外還需要style和next, TTStyle是個linked list, 所以沒有下一個style, next就指定成nil就好, 但style這參數卻不可, 試過給nil, 圖還是不見, 所以還是得繼續找怎回事

這時侯只好到Three20Style裡把TTDefaultStyleSheet.m的source挖出來看囉....(一挖出來發現, 我一開始就看這隻就好了嘛... = =")

看了一下TTDefaultStyleSheet的launcherButton是這樣寫的:

- (TTStyle*)launcherButton:(UIControlState)state {

  return

    [TTPartStyle styleWithName:@"image" style:TTSTYLESTATE(launcherButtonImage:, state) next:

    [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:11] color:RGBCOLOR(180, 180, 180)

                 minimumFontSize:11 shadowColor:nil

                 shadowOffset:CGSizeZero next:nil]];

}

Ok, 看來整段只要照抄再改就好, 所以上面那段就改成這樣:

return [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:12] 

color: color

  minimumFontSize:12 shadowColor:nil 

shadowOffset:CGSizeZero next:[TTPartStyle styleWithName:@"image" 

  style:TTSTYLESTATE(launcherButtonImage:, state) next:nil]];

 

 

(跟TTDefaultStyleSheet.m裡面那段有點小不同是, 一來是我是直接接在剛剛那段Text style後面, 二來只是驗證一下順序有沒差, 不過當然是沒關係的)

 

Splashtop Remote

這是可以從你的iPad上控制你的PC或Mac的軟體

雖然覺得不見得很實用, 但只要1.99, 還是買下去了, 一個便當的價位, 其他很多類似的軟體其實是很高價的, 甚至上百元, 當然也有很多lite版, 但看起來lite版多是缺東缺西的,這邊有Demo影片

在iPad上, 長得是這樣:

居然是繁體中文的, 真感動, 這家公司還真有心呀~~

似乎不是跟一般VNC一樣, 所以在Mac/PC上, 還需要裝一個Host, 像這樣:

可能是iPad解析度的關係, 當一turn on時, 我Macbook pro的桌面解析度自動被調低, 不過反正在iPad上使用, 其實也還好啦

整體上速度感覺還好, 不過畢竟是touch based的操作對應到滑鼠, 其實不是很好操作, 鍵盤則是使用iPad上的

如果不想帶自己的電腦到處跑, 這或許是不錯的選擇

[筆記] 設定Navigation bar的背景色 (with Three20)

在iOS上的application通常會有一條Navigation bar用來放置如"上一頁"或"Refresh"這類按鈕的, 像是下圖

不過老是藍藍的, 不是那麼好看, 想了半天, 決定把它改成黑的

試了兩種方法:

1. 直接改TTBaseViewController的Navigation bar的tint color:

 

self.navigationBarTintColor = [UIColor blackColor];

 

這個property並不存在UIViewController裡面, 而是只有Three20裡的TTBaseViewController才有提供, 不過這方法並不優, 理由是, 每個screen都得自己這樣做

2. 用TTDefaultStyleSheet

這算是Three20蠻強大的一個功能之一, 透過指定Global的Stylesheet就可以替換顏色跟字型, 如果多準備幾個Stylesheet, 還可以做到換Theme的功能

首先要準備一個class繼承自TTDefaultStyleSheet

 

@interface DefaultStyleSheetA : TTDefaultStyleSheet {

 

由於是要改掉Navigation bar的顏色所以要自行Override掉navigationBarTintColor:

-(UIColor *) navigationBarTintColor {

return RGBCOLOR(20, 20, 30);

}

最後, 就把global stylesheet設成這個, 就大功告成了

[TTDefaultStyleSheet setGlobalStyleSheet:[[DefaultStyleSheetA alloc] init]];

把Three20 + JSON加到你的project內 (v1.0a2)

基本上, 你可以參考這邊, 已經有教你怎做了, 我這篇只是寫一篇中文的說明, 並多加一些我實際做的時候加進去的東西

首先, 你必須要有three20的source, 你可以從github抓到:

git clone https://github.com/facebook/three20.git three20dev

cd three20dev

git checkout v1.0a2

或者是從這下載..

以往Three20有提供project template讓大家create新的three20 project, 不過後來這方式改了, 改用ttmodule.py這隻script, 不過用法還是很"簡單"(使用上很簡單啦, 但不保證沒問題)

這是一支python script, 它的內容也很單純, 就是幫你的project建立跟three20的相依性(dependency)

使用方法:

1. 加入Three20相關的build property

python src/scripts/ttmodule.py -p your_project_path/yourproject.xcodeproj -c Debug -c Release

(兩個build config都要加)

2. 加上Three20相關的library

python src/scripts/ttmodule.py -p your_project_path/yourproject.xcodeproj Three20

3. 加入JSON module

python src/scripts/ttmodule.py -p your_project_path/yourproject.xcodeproj extThree20JSON:extThree20JSON+SBJSON

(這邊以SBJSON為例)

好了, 基本上依官網的說明, 這樣就OK了, 你可以試著去build一整個project了

但如果你加入Three相關的code, 你會發現可能不像以前用project template那樣順利, 很多reference找不到, 甚至像是用到[UIView width]這類的也會build不過, 其實這是漏import了, 以往project template有偷偷幫你加好讓你不用太煩惱, 現在這script卻不會幫你做這樣的事

解決的方法, 就是找到你的 .pch 檔案, 在裡面加入:

#import "Three20/Three20+Additions.h"

這樣就差不多完工了!