網頁

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;


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

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

沒有留言:

張貼留言