網頁

2012年5月31日 星期四

iOS筆記_簡易的UIView美化(透明、邊框)與側邊選單滑動效果

自從類似Flex與silverlight這類高互動式的網頁大舉入侵瀏覽器以後,許多地理資訊系統的網站版面都不約而同變成:地圖佈滿整個視窗,某個Menu壓在地圖上的方式,而許多人也認為這樣的版面意味著系統比較高級,所以我們也必須做一些迎合大眾口味的改變。


//背景顏色 [[view_menu layer] setBackgroundColor:[UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:0.5].CGColor]; //圓角程度 [[view_menu layer] setCornerRadius:20.0]; //超出是否遮罩 [[view_menu layer] setMasksToBounds:YES]; //邊框粗細 [[view_menu layer] setBorderWidth:2.0]; //邊框顏色 [[view_menu layer] setBorderColor:[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:0.8].CGColor];

效果:

注意:要可以設定框線必須要 #import <QuartzCore/QuartzCore.h>

除了類似的版面改變外,更重要的是與使用者互動,比如說滑鼠移上去按鈕會抖一下之類的,但查詢最多的還是類似側邊選單的滑動效果,所以這邊也來滑一下。

CATransition *transition = [CATransition animation]; //間隔時間 transition.duration = 0.5f; //動畫執行時的效果 transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //動畫種類 transition.type = kCATransitionPush; //方向 transition.subtype = kCATransitionFromRight; //將動畫賦給view_menu這個UIView [view_menu.layer addAnimation:transition forKey:nil]; //設定要移動到的地方 CGRect rect = CGRectMake(self.view.frame.size.width -445, 5.0f, view_menu.frame.size.width, view_menu.frame.size.height); //設定位置,動畫會自動依照設定補足移動效果。 view_menu.frame = rect;


以上可以完成滑出的動作,在依照自己需要就可以變化出想要的隱藏與顯示效果。

使用者介面真的是一個很需要時間跟巧手的事情。

iOS筆記_使用ArcGIS Server SDK的QueryTask回傳日期格式為NSTimeInterval

其實要講的內容都在標題上了,昨天同事發現一個很妙的問題,在使用ArcGIS Server for iOS SDK時,使用AGSIdentifyTask與AGSQueryTask去查詢同一個圖層,若是裡面有時間格式的欄位,資料返回時AGSIdentifyTask會顯示一般的日期格式,但AGSQueryTask會顯示類似NSTimeInterval的格式。

總之,AGSQueryTask傳出的內容就是NSTimeInterval了,除了換別種查詢方式外,也只能收下來以後進行轉換。


NSString *datavalue = [feature.attributes objectForKey:@"時間欄位"];
NSDate *date = [NSDate dateWithTimeIntervalSince1970:([datavalue doubleValue]/1000)];
NSLog(@"時間:%@",[date description]);


說明:將AGSQueryTask的結果接下來,並利用利NSDate的dateWithTimeIntervalSince1970將NSTimeInterval轉為NSDate。除以1000的原因是毫秒換成秒。

當然取得NSDate後,就可以利用NSDateFormatter來轉成需要的格式


2012年5月24日 星期四

iOS小抄_關於UITableView的細微屬性調整

UITableView是開發iOS時使用非常頻繁的物件,而其中有很多細微的小設定,可以讓界面更親民一點。

1. 不要與使用者互動。(有時候UITableView只是用來顯示資料,並沒有要與使用者互動。)
tableview.userInteractionEnabled = NO;



2. 選中Cell時不要變色,但按鈕還是可以操作。(有時候我們會自訂按鈕在UITableView上面,希望使用者可以按下這些按鈕進行互動,但卻不希望使用者點選cell時會變色。)
cell.selectionStyle = UITableViewCellSelectionStyleNone;

因為是以cell為單元進行設定,所以是在UITableView的delegate:cellForRowAtIndexPath進行設定,也就是可以設定某些條件下的Cell不進行變色,某些會變。


3. UITableView模式為Plain時,底色為透明。
tableview.backgroundColor = [UIColor clearColor]; tableview.backgroundView = nil; tableview.opaque = NO;

3-1. UITableView模式為Grouped時,底色為透明。
[tableSearch setBackgroundView:nil];

4. 利用程式碼選取某一個Cell。(比如左邊為Table右邊為統計圖,點擊統計圖時TableView要移至特定的Cell)
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:row inSection:section]; [tableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionMiddle];
設定scrollPosition:UITableViewScrollPositionMiddle會讓設定後,UITableView會以該Cell為中心滾動到該位置,若是不希望滾動則設定為:UITableViewScrollPositionNone。



5. UITableView設定為不可滾動。
tableSearch.scrollEnabled = NO;


6. 設定Style為Plai時的外框線。
tableView.layer.borderWidth = 1.0f; tableView.layer.borderColor = [UIColor lightGrayColor].CGColor;


7. UITableView設定隔線顏色。
tableview.separatorColor = [UIColor brownColor];

注意:要可以設定框線必須要 #import <QuartzCore/QuartzCore.h>

2012年5月15日 星期二

Diablo3_既痛苦又快樂的開箱

昨晚賣力在河濱公園努力騎腳踏車,心裡想著再過5小時暗黑破壞神就要降臨了,回家時問了問附近的7-11,都表示進貨要等到凌晨,就帶著'明天下班再來買吧'的想法回家了。

不料今早6點突然驚醒,帶著肚子痛、頭痛、四肢關節痛來回廁所兩三回,最終不敵只好丟出假單。

躺在床上突然念頭一閃,昨天的明天不就是今天嗎?

就在一邊肚子痛、頭不時陣痛、手腳無力的情況下還是跑了三家7-11、三家全家,7-11表示全部售完,全家表示貨車全部遲到;這是上天的禮物嗎?掏出1500下訂,立馬回家與馬桶約會。

10點25分,暗黑破壞神也降臨我家了。

地球就由我跟阿蠻來守護吧。
我揪境該忍痛玩,還是該去睡覺休息勒?


2012年5月10日 星期四

Windows 8_參加微軟活動:初探Windows 8應用程式開發

本來計畫好的腳踏車環北市一圈,因為磅礡大雨取消了,只好來認真寫筆記。
------------------------------------------

真沒想到用了微軟開發工具不算短的時間,第一次貼上這張貼紙竟然是在這麼新鮮的主題「初探Windows 8應用程式開發」,Microsoft讓Apple與Google風光了這麼久,也終於在今年推出'可能'一拼高下的Windows 8。

今天的活動總結算是三個主題:
1. Windows 8 概念
2. Metro Style 設計概念
3. 程式開發架構與簡單示範

所謂的筆記,就是一堆記的很混亂的文字,所謂的整理筆記,就是把混亂的文字用的更混亂。

-------------------------------------------------

1. Win XP程式版本是5.x版,Win vista版本是6.0,Win 7版本是6.1,而Win 8 版本為6.2,程式版本小幅度提升意味著升級到Win 8時,曾經可以跑在Win 7 的軟體應該都可以跑。

2. Win 8 與 Win 7 最大的不同在於重新撰寫'Touch'的部份,所以在Win7有用到觸碰的程式,可能需要大幅度的修改,其他程式則甚至不用修改就可以執行。

3. 上述所說的'程式'指的是桌面程式,而非Win 8 主推的Metro Style程式。

4. Win 8在使用時可以有兩種模式:a. 桌面模式(Desktop)、b. 磚模式(Tile),對程式開發來說,桌面模式就是Win Form的程式開發,磚模式就是Metro Style模式;使用者在操作的時候,而可以一值在這兩個模式中切換。

5. 如果你要安裝Win8,那麼找一台已經可以安裝Win7的電腦,'應該'都可以正常執行Win8,因為經過測試Win 8執行起來的效能優於Win 7,記憶體使用量甚至僅僅Win 7 的一半。

6. 未來安裝Win 8的機器有兩種,一種就是一般使用x86 cpu的電腦(桌上型電腦、筆記型電腦等),另一種ARM架構,就是由某家廠商製造的平板電腦(比如NVIDIA),而x86電腦就跟以前安裝Windows的經驗相同,可以買軟體進行安裝,而ARM架構下的Win 8則會隨機器一同出貨。最大的不同點在於每一台平板都有獨一無二Win 8,且不能安裝第三方軟體。什麼叫做第三方軟體?就是一般大家使用VS開發的各項程式,但可以由Windows store下載Metro Style程式,也就是說Metro Style可以橫跨兩種機器的模式。

7. Windows 8的登入帳號,改為使用Windows ID,也就是Live ID,也就是MSN ID,即使是用Local的帳號登入,也可以將該帳號與Windows ID連接;該方式可讓使用者在不同的裝置開啟相同的程式時,微軟可以將程式狀態帶回來(例:在家用桌機玩遊戲到2-1關,到了外面使用平板也可以從2-1關開始。)

8. 桌面模式有一個IE程式,但磚模式也有一個Metro的IE程式,最大的不同點是Metro的IE不支援任何Plug-in,也就是Silverlightnet、Flash、Active X等都不支援,所以Android成為唯一個擁有支援Flash瀏覽器的平台。(Flash Bye~),所以建議使用HTML5+JavaScript開發網頁。

9. Windows 8 的IE版本是10。

10. Win 8為了使每一個App使用體驗更趨一致,並讓自己的App可以與其他App進行互動,除了在Metro Style的設計規範外,程式面提供了Charms Bar,包含:Search、Share、Settings、Play To、App To App Picking。以Share來說,許多程式會提供Share的功能,將App裡面產出的內容分享到facebook或Plurk等社群網站,在Win 8內,若是facebook寫了一個程式並且依照Win 8的規定提供相對應的接口,每一個程式都可以去呼叫facebook所提供的分享程式,將facebook允許分享的東西貼到塗鴉牆;而對使用者來說會讓每一個程式在分享時的操作都更趨一致。

11. 上述的Play To提供設備上更多的想像空間,比如印表機廠商依照Win 8的規定做出相對應的接口,App廠商將可呼叫該引表機,直接將畫面的上內容印出。

12. Win 8的開發基本上與Win Phone7是走不同的模式,但在介面設計上相似,但也不同。

13. Metro是一種設計語言。(微軟已經註冊)

14. Metro Style app上Windows Store必須要審核,且從樣式、外觀的設定就相當多規定,上架的程式必須符合這些規定才能通過第一階段審核,內容如:字型(英文:segoe、中文建議:微軟正黑體)、字體大小(有規定的配對)、iocn的形式(不可有陰影、漸層,外面應該加一個圈)、文字的對齊(置左),照片必須滿版、磚的大小為150px,磚與磚的間隔為10px,所以佔據兩格磚大小的內容必須為310px。

15. 設計App bar的按鈕應由右邊放起,若太多則應放置在左右兩側,中間不移放置按鈕(因應使用者操作習慣)

16. Motion Design:要求不能有聲音。

17. Metro Style app使用者介面設計必須在三層之內。

18. Tile上可以放置動態的訊息(Live Tile),但該內容不可以是廣告,廣告只能放在App內。

19. 官方希望App的設計是:精準細膩、流暢敏捷、真實的數位體驗、極簡專注、統合整體(上述Charms Bar的概念)

20. Windows 8是可以讓所有硬體使用的,包含桌機、筆電與平板(似乎沒有機手?)。

--------------------------------------------------------

關於程式的內容:

1. 若是有1/10的Win使用者升級到Win 8,則程式開發者立刻擁有跟iOS相同數量的客群。

2. Win 8使用新的底層(Windows RunTime:WinRT)

3. Win 8的Metro Style Apps開發方式分三種:a. C++ + XAML、b. C#或VB + XAML、c. HTML+CSS+JavaScript,微軟利用Language projections的技術將程式碼mapping到Native Code;三種方式理論上都可以開發出相同的程式,因為底層呼叫的WinRT APIs都是相同的。

4. 開發App時與Android相同,必須在Manifest內宣告該程式所需要用到的權限,而這些訊息會在使用者安裝程式時告知使用者。

5. 每一個程式執行時都是獨立的,但可以藉由微軟提供的模式互相溝通(上述Share的概念)

6. App的生命週期:Running App→Suspended App→Terminated App,在進入Suspended狀態時程式開發者有5秒鐘的時間執行希望執行的程式碼(有Event可以使用),當系統需要更多記憶體、系統關機、App Crash時,會進入Terminated,而這時App不會被通知。

7. 若是需要進行背景執行時,可以使用a. Play to、b. 使用特定的Background API、c. 使用Live Tile。

8. 建議使用Windows.Storage.ApplicationData.Current時都用RoamingSetting,這樣即會進行雲端的同步,而預設Local都會儲存一份。

9. 上架賺錢模式:一次性的App購買、可以使用既有的金流系統(例如既有的網路購物網站)、廣告、In-App Purchase(於App中販賣自家商品)

10. 需要等待50 millisecond的操作,WinRT API都直接被製作成非同步模式,以C#來說就是使用await關鍵字,宣告時加上Async的修飾字,回傳void或Task

11. 就目前架構.NET Framework 4.5為主體,裡面分為三個子項:Windows Phone 7.1、Silverlight 5與.NET for Metro style apps,三個子項中有一小塊交疊的部份就是:Portable Class Library,可以編譯成dll與.winmd檔案形式,供其他地方使用。

12. 於Blend設計工具上修改後,XAML或是HTML+CSS將會自動修改,並且可於模擬器上快速切換各種螢幕大小所顯示出來的結果。(Android必須要開多個模擬器,且執行速度較慢)

13. debug時可以利用:a. 直接跑在開發機上(要開發Win8 Metro程式必須安裝Win 8 + VS 11)、b. 跑模擬器 c.以網路線對接平板電腦。

14. 若是以HTML+JavaScript開發,可以將以往開發網頁的習慣與技術帶入,但使用第三方函式庫時(例如jQuery)有可能會發生衝突的情況,這只能在開發時測試才知道。

15. Metro style apps 在操作上可與其他桌面程式或App交互放置(類似Win Form並排排列的感覺),但要螢幕解析度在1366*768以上才支援。
-----------------------------------------------------
官方參考資源


2. Windows 8 app developer blog(http://blogs.msdn.com/b/windowsappdev/)

-------------------------------------------------------
小小心得:

1. 這個活動很讚,講師也很讚,自以為有聽懂的情況下,覺得獲益良多。

2. 原本以為Windows Phone與未來Windows 平板一定會是同一套開發模式,但結果不是。

3. Win 8 結合了許多Android與iOS的優點,並且想的更多,最後才出來市場便宜占不到,但是架構卻更趨完善。

4. Windows不管到哪一版,看起來都很常發生突然的錯誤。(攤手)

5. Windows 8的App上架要審核,且似乎審的比iOS更嚴格,有感受到要保持程式品質的決心。

------------------------------------------------------

該Windows 8了嗎? 

2012年5月9日 星期三

iOS小抄_NSDate與NSString的轉換

UIDatePicker是一個很常會使用到的物件,若是需要設定日期時間,或是取得使用者滾動後的日期時間,都可以藉由date的屬性取得或設定。

NSDate *selectDate = datepicker.date;

但我們取得的格式是NSDate,若是要顯示在UILabel之類的物件上,就必須要轉換為NSString,也可以在轉換的過程中,改為自己需要的格式。

若是你與我相同,為了讓使用者可以選年,使用了兩個UIDatePicker,一個顯示年月日,一個顯示時間,那麼可以利用以下方式取得日期與時間的NSString。

NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init]; [dateFormat setDateFormat:@"yyyy/MM/dd"]; NSString *strDate = [dateFormat stringFromDate:datepicker.date]; [dateFormat setDateFormat:@"HH:mm:ss"]; NSString *strTime = [dateFormat stringFromDate:timepicker.date]; NSString *selectDateTime = [NSString stringWithFormat:@"%@ %@",strDate,strTime]; NSLog(@"%@", selectDateTime); [dateFormat release];

datepicker與timepicker為使用的UIDatePicker名稱,最後selectDateTime輸出結果為:1981/12/20 12:15:00。

某些時候我們會希望UIDatePicker可以有初始值,也可以藉由類似的方法來設定。

-(void)setDateTime:(NSString *)setDateTime { NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init]; [dateFormat setDateFormat:@"yyyy/MM/dd HH:mm:ss"]; NSDate *date = [dateFormat dateFromString:setDateTime]; [dateFormat release]; datepicker.date = date; timepicker.date = date; }

iOS小抄_NSMutableArray與NSMutableDictionary的基本操作

在程式撰寫時時常常會有一個需求:將一個數字或是字串加到陣列裡面。這時我們會採用NSArray來儲存需要的內容。

NSArray *numArray = [NSArray arrayWithObjects:[NSNumber numberWithInt:2],[NSNumber numberWithInt:5], nil];

但往往要擺放的內容並不是一開始就知道個數,可能會藉由某一個迴圈一個一個的把資料擺進去,這時候就會需要使用NSMutableArray。

NSMutableArray *numArray = [[NSMutableArray alloc] init]; for (int i =0; i < someCount ; i++) { [numArray addObject:Object]; }

而不管我們使用NSArray或是NSMutableArray都可以藉由objectAtIndex來取得儲存進去的數值。

[numArray objectAtIndex:i];

但更多時候,我們想要儲存的資料可能不是一維的,可能類似一個表格或是想存進很多個物件,例如儲存一個公司物件,一個公司物件又有名稱、員工數與產業別等屬性,這時候就可以利用NSMutableDictionary來進行處理,再將NSMutableDictionary存進NSMutableArray當中。

NSMutableDictionary *att = [NSMutableDictionary dictionaryWithObjectsAndKeys: @"GOOD",@"type", Object.NAME, @"NAME", Object.DATE, @"DATE", Object.INFO, @"INFO", nil]; [NameArray addObject:att];

存進去OK,那要怎麼提出來?

NSMutableDictionary *temp = [WaterArray objectAtIndex:x]; NSString *NAME = [temp objectForKey:@"NAME"]; NSString *DATE = [temp objectForKey:@"DATE"]; NSString *INFO = [temp objectForKey:@"INFO"];

當然,你也可以直接將ValueObject概念的自訂物件存進去。

iOS小抄_取絕對值

整數絕對值:abs(value);

浮點絕對值:fabs(value);

2012年5月4日 星期五

iOS學習_UILabel顯示兩種以上的顏色

最近遇到一個需求:希望在顯示機組是否運轉時,利用顏色來進行區別,可能是紅色是停止、綠色是正常、黃色是警告之類的,就像是

這樣的需求對於Web來說非常的簡單,只需要利用HTML語法就可以解決,但是在iOS當中,UILabel預設只能顯示一種顏色,不能透過類似CSS的方式在一個UILabel中顯示不同的顏色。

若要做出這樣的效果,網路上大致可以分成三種解決方案:
1. 要幾種顏色就用幾個UILabel組起來。
2. 利用WebView來顯示,也就是用HTML來作。
3. 繼承UILabel,寫出一個有這個功能的Label。

而這種廣泛的需求,當然已經有人寫好了,最後我採用的是:TTTAttributedLabel?𠽤幾ㄍㄨ。

使用步驟:
1. 下載程式碼

2. 將TTTAttributedLabel.h 與 TTTAttributedLabel.m加到你的專案中。

3. 在你需要兩種以上顏色的UILabel換成TTTAttributedLabel

4. 使用他(假設我的TTTAttributedLabel叫做textinfo)
NSMutableAttributedString *tttString = [[NSMutableAttributedString alloc] initWithString:@"●●●●"];
[tttString addAttribute:(NSString*)kCTForegroundColorAttributeName value:(id)[[UIColor greenColor] CGColor] range:NSMakeRange(0,2)];
[tttString addAttribute:(NSString*)kCTForegroundColorAttributeName value:(id)[[UIColor redColor] CGColor] range:NSMakeRange(2,2)];
[textinfo setText:tttString];


上述程式碼就可產生●●●●這個效果。

註:NSMakeRange(0,2)意思是第0個開始,後面兩個。

效果圖: