前面小編介紹了已經介紹了UIView與UIButton (前篇: 如何製作按鈕UIButton)
有沒有讀者發現其實兩者很相似,除了按鈕可以點擊之外,兩者幾乎一模一樣
今天小編就要教大家自己製作屬於自己的UIView做出類似UIButton的效果
有沒有讀者發現其實兩者很相似,除了按鈕可以點擊之外,兩者幾乎一模一樣
今天小編就要教大家自己製作屬於自己的UIView做出類似UIButton的效果
首先我們在要新增一個屬於我們自己的UIView
從左上角的工具列找出 File -> New -> File….
從左上角的工具列找出 File -> New -> File….
接著選擇 iOS 中 Cocoa Touch 裡面的 Objective- C class 檔案
然後我們就可以幫自己的UIView命名了
這裡Tako幫自己的UIView取名為“TakoView”
繼承(Subclass)的部分我們選擇UIView
表示我們的TakoView尚未編輯時跟UIView一模一樣,只有名字不同而已
建立成功後我們得到一個TakoView.h及一個TakoView.m檔
TakoView暫且先不要動
現在我們回到熟悉的ViewController.m裡面
在圖中藍色框框我們引用剛剛建立的TakoView
#import “TakoView.h”
這樣我們才可以在本視圖控制器(ViewController)中建立TakoView
現在我們回到熟悉的ViewController.m裡面
在圖中藍色框框我們引用剛剛建立的TakoView
#import “TakoView.h”
這樣我們才可以在本視圖控制器(ViewController)中建立TakoView
在viewDidLoad中寫下建立UIView的程式碼
TakoView *takoview = [[TakoView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
takoview.backgroundColor = [UIColor redColor];
[self.view addSubview:takoview];
只是這次我們將UIView換成了TakoView
Command + R 執行後
如意料之中的,我們在指定的區域得到一個紅色的方塊
TakoView *takoview = [[TakoView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
takoview.backgroundColor = [UIColor redColor];
[self.view addSubview:takoview];
只是這次我們將UIView換成了TakoView
Command + R 執行後
如意料之中的,我們在指定的區域得到一個紅色的方塊
讀者看到這會不會覺得小編吃飽太閒了
有UIView不用,偏偏要弄個這麼麻煩的TakoView
別急,現在我們開始要來客製化我們的TakoView了
首先打開我們的TakoView.h檔
我們在裡面宣告一個等會拿來計數的全域整數變數 int count
有UIView不用,偏偏要弄個這麼麻煩的TakoView
別急,現在我們開始要來客製化我們的TakoView了
首先打開我們的TakoView.h檔
我們在裡面宣告一個等會拿來計數的全域整數變數 int count
接著跟著小編在TakoView.m中寫入這些程式碼
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) { //self就是TakoView本身,條件爲TakoView存在時為真,即可執行if內容
//與viewDidLoad相同,只要TakoView一建立首先就會執行這塊程式碼
count = 0; //幫等下的計數起始為0
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
//這裡的坐標是已TakoView本身為坐標軸計算
label.text = [NSString stringWithFormat:@"%d",count];
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentCenter;
label.tag = 101;
[self addSubview:label];
}
return self;
}
接著我們在下面加上一個UIView本身就有的實例方法
當TakoView本身被觸碰到時會執行
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
count++;
UILabel *label = (UILabel *)[self viewWithTag:101];
label.text = [NSString stringWithFormat:@"%d",count];
}
Command+R 試一下結果吧!
{
self = [super initWithFrame:frame];
if (self) { //self就是TakoView本身,條件爲TakoView存在時為真,即可執行if內容
//與viewDidLoad相同,只要TakoView一建立首先就會執行這塊程式碼
count = 0; //幫等下的計數起始為0
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
//這裡的坐標是已TakoView本身為坐標軸計算
label.text = [NSString stringWithFormat:@"%d",count];
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentCenter;
label.tag = 101;
[self addSubview:label];
}
return self;
}
接著我們在下面加上一個UIView本身就有的實例方法
當TakoView本身被觸碰到時會執行
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
count++;
UILabel *label = (UILabel *)[self viewWithTag:101];
label.text = [NSString stringWithFormat:@"%d",count];
}
Command+R 試一下結果吧!
連續觸碰的情況下,數字也跟著增加
是不是跟我們之前建立的UIButton效果一樣呢! (參考: XCode UIButton製作)
PS:綠色坐標軸為TakoView中建立元件參考的坐標軸
接下來我們要做的內容更簡單
卻是真正要開始介紹Protocol與Delegate的觀念!!!!!
協定與委派代理的觀念是xcode的精華,但對新手而言卻是難以理解
市面上的書用寫的也很難交代清楚
小編以下將直接用實作介紹Protocol與Delegate的數種常見用法
現在我們先來訂立目標
我們將要在ViewController內輸入參數去控制TakoView的Frame與backgroundColor屬性
咦?!
我們之前不是用initWithFrame 跟 TakoView.backgroundColor 就可以了嗎?
沒錯,小編要藉由這次的機會教大家蘋果本身是如何設計這些方法的
首先在TakoView.h內加入如下程式碼:
@class TakoView; //本TakoView就是一個類別
@protocol TakoViewDelegate <NSObject>
//protocol就是協定,名稱為“TakoViewDelegate” 可以自己取名
//蘋果本身都是命名為Delegate與DataSource
- (UIColor *)setTakoViewColor:(TakoView *)TakoView;
(CGRect)setTakoViewFrame:(TakoView *)TakoView;
//協定內的方法在委派的類別(我們的ViewController)內必須具備,某種程度算是防呆裝置
@end
@interface TakoView : UIView //我們當初創建時TakoView就是選擇繼承自UIView
@property(nonatomic) id<TakoViewDelegate> DataSource;
//ViewController可藉由TakoViewDelegate將自身傳值至DataSource然後給TakoView
-(void)setTakoViewDataSource;
//TakoView內用到的實例方法,宣告後可在ViewController內呼叫
@end
是不是跟我們之前建立的UIButton效果一樣呢! (參考: XCode UIButton製作)
PS:綠色坐標軸為TakoView中建立元件參考的坐標軸
接下來我們要做的內容更簡單
卻是真正要開始介紹Protocol與Delegate的觀念!!!!!
協定與委派代理的觀念是xcode的精華,但對新手而言卻是難以理解
市面上的書用寫的也很難交代清楚
小編以下將直接用實作介紹Protocol與Delegate的數種常見用法
現在我們先來訂立目標
我們將要在ViewController內輸入參數去控制TakoView的Frame與backgroundColor屬性
咦?!
我們之前不是用initWithFrame 跟 TakoView.backgroundColor 就可以了嗎?
沒錯,小編要藉由這次的機會教大家蘋果本身是如何設計這些方法的
首先在TakoView.h內加入如下程式碼:
@class TakoView; //本TakoView就是一個類別
@protocol TakoViewDelegate <NSObject>
//protocol就是協定,名稱為“TakoViewDelegate” 可以自己取名
//蘋果本身都是命名為Delegate與DataSource
- (UIColor *)setTakoViewColor:(TakoView *)TakoView;
(CGRect)setTakoViewFrame:(TakoView *)TakoView;
//協定內的方法在委派的類別(我們的ViewController)內必須具備,某種程度算是防呆裝置
@end
@interface TakoView : UIView //我們當初創建時TakoView就是選擇繼承自UIView
@property(nonatomic) id<TakoViewDelegate> DataSource;
//ViewController可藉由TakoViewDelegate將自身傳值至DataSource然後給TakoView
-(void)setTakoViewDataSource;
//TakoView內用到的實例方法,宣告後可在ViewController內呼叫
@end
接著我們看TakoView.m
initWithFrame的部分為初始化執行的內容,在此我們不執行任何動作
在下面加入如下程式碼:
-(void)setTakoViewDataSource
{
self.backgroundColor = [_DataSource setTakoViewColor:self];
self.frame = [_DataSource setTakoViewFrame:self];
}
self是自己的意思,就是TakoView的意思
_DateSource 就是ViewController 這等下在更詳細介紹
setTakoViewColor 及 Frame 就是剛剛協定ViewController必須實作的方法
- (UIColor *)setTakoViewColor:(TakoView *)TakoView;
- (CGRect)setTakoViewFrame:(TakoView *)TakoView;
所以這裡就是呼叫ViewController 中的兩個方法,並給值TakoView
在我們的範例給的TakoView值不會使用到,但有些時候還滿好用的,小編之後再介紹
這兩個方法分別會回傳UIColor 及CGRect兩個屬性給TakoView使用
於是我們就得到
self.backgroundColor
self.frame
用以來設定我們TakoView的顏色及大小位置
最後該是設定我們的ViewController.m檔囉
記得一定要#import “TakoView.h” 要用它就要引用它!!
然後在 @interface ViewController () 後要加上 <TakoViewDelegate>
表示我們本類別(ViewController)遵守TakoViewDelegate這個protocol協定
所以我們就必須在下面加上兩個規定的實例方法了
- (UIColor *)setTakoViewColor:(TakoView *)TakoView
{
return [UIColor redColor]; //回傳一個UIColor
}
- (CGRect)setTakoViewFrame:(TakoView *)TakoView;
{
return CGRectMake(100, 100, 100, 100); //回傳一個CGRect
}
兩方法被TakoView呼叫到的話就會回傳屬性
題外話,-(void)表示回傳空值,換而言之就是不需回傳
然後在ViewDidLoad內加入如下程式碼:
TakoView *takoview = [[TakoView alloc]init];
//建立一個takoview 並不給予任何屬性
takoview.DataSource = self;
//將本身(ViewContoller)傳給DataSource,讓TakoView使用
//但在TakoView中會以_DataSource使用
//這是因為synthesize 的關係,現在的xcode會幫我們處理好,小編就不再多談
[takoview setTakoViewDataSource];
//呼叫takoview內的實例方法,因此takoview才會設定本身的顏色及範圍大小
[self.view addSubview:takoview];
//最後不要忘記將takoview加到畫面上囉
這邊的邏輯如下:
1.ViewController 建立了一個毫無屬性的TakoView 名字為takoview
2.把ViewController的值傳給takoview內的DataSource
3.呼叫takoview裡面的setTakoViewDataSource方法
4.該方法呼叫ViewController內的setTakoViewColor及setTakoViewFrame方法
並藉由兩方法回傳的數值設定takoview本身的屬性
5.將takoview加到畫面上
到這裡讀者們不知道有沒有對Protocol及Delegate有一點點感覺了呢?
其實這就是openSource的概念,別人做好的程式碼,我們可以藉由Delegate去設定數值或執行protocol規定的方法來使用
最常使用到委派與協定的設計不外乎這兩點
1. 傳值
2. 做成可以re-use的library
當然我們的TakoView也可以重複使用
在ViewController.m中
宣告全域變數
@interface ViewController ()<TakoViewDelegate>
{
TakoView *takoviewRed;
TakoView *takoviewYellow;
//宣告兩個TakoView
}
@end
ViewDidLoad 中建立兩個TakoView
記得兩個是獨立的,皆需給予DataSource
- (void)viewDidLoad
{
[super viewDidLoad];
takoviewRed = [[TakoView alloc]init];
takoviewRed.DataSource = self;
[takoviewRed setTakoViewDataSource];
[self.view addSubview:takoviewRed];
takoviewYellow = [[TakoView alloc]init];
takoviewYellow.DataSource = self;
[takoviewYellow setTakoViewDataSource];
[self.view addSubview:takoviewYellow];
}
當初建立的(TakoView *)TakoView有用武之地的
藉由if判斷式我們可以知道哪個takoview要回傳哪個數值
雖然我們只要兩個if就可以成立,但是程式碼並不知道
所以if之外記得也要設立一個值回傳,compile才能成功
- (UIColor *)setTakoViewColor:(TakoView *)TakoView
{
if (TakoView == takoviewRed) {
return [UIColor redColor];
}
else if (TakoView == takoviewYellow) {
return [UIColor yellowColor];
}
return nil;
}
- (CGRect)setTakoViewFrame:(TakoView *)TakoView;
{
if (TakoView == takoviewRed) {
return CGRectMake(100, 100, 100, 100);
}
return nil;
}
大功告成!!我們得到一上一下,一紅一黃的TakoView了!!
這是個簡單的範例,小編也介紹不需要Delegate的簡單傳值方法
TakoView.h檔內改寫為
@interface TakoView : UIView
-(void)setTakoView:(TakoView*)TakoView BackgroundColor:(UIColor*)color;
-(void)setTakoView:(TakoView *)TakoView Frame:(CGRect)rect;
@end
其他都不需要,包含protocol也拿掉
TakoView.m內 initWithFrame我們一樣不寫任何東西
下面兩個方法改寫為
-(void)setTakoView:(TakoView*)TakoView BackgroundColor:(UIColor*)color
{
self.backgroundColor = color;
}
-(void)setTakoView:(TakoView *)TakoView Frame:(CGRect)rect
{
self.frame = rect;
}
{
self.backgroundColor = color;
}
-(void)setTakoView:(TakoView *)TakoView Frame:(CGRect)rect
{
self.frame = rect;
}
ViewController內依然要#import “TakoView” 但不需要Delegate
ViewDidLoad內程式碼:
TakoView* takoview = [[TakoView alloc]init];
[takoview setTakoView:takoview BackgroundColor:[UIColor yellowColor]];
[takoview setTakoView:takoview Frame:CGRectMake(100, 100, 100, 100)];
[self.view addSubview:takoview];
是不是又更了解xcode內的程式碼是如何運作的了呢!
[入門系列]
1. Xcode 5 - 你的第一支Hello World iOS程式
2. Xcode 5 - UIView 與 UILabel
3. Xcode 5 - 第一顆互動按鈕 UIButton
[中級系列]
1. OpenSource - 可拖曳的UICollectionView (DraggableCollectionView)
[進階系列]
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
4. iOS 製作長曝光相機
5. iOS CoreblueTooth FrameWork
喜歡這篇文章嗎? 加入Takobear粉絲團吧!
1. Xcode 5 - 你的第一支Hello World iOS程式
2. Xcode 5 - UIView 與 UILabel
3. Xcode 5 - 第一顆互動按鈕 UIButton
[中級系列]
1. OpenSource - 可拖曳的UICollectionView (DraggableCollectionView)
[進階系列]
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
4. iOS 製作長曝光相機
5. iOS CoreblueTooth FrameWork
喜歡這篇文章嗎? 加入Takobear粉絲團吧!