Filter4Cam 實作: 9. 濾鏡表單之二

since: 2012/03/21
update: 2012/03/21
reference: I touchs: Filter4Cam 學習之 Scroll Horizontally Tables: Part 1

載入濾鏡清單屬性檔之一

A. 新增濾鏡清單的 plist 檔案
      1. Xcode > File > New > File...
          > iOS > Resource > Property List > Next

        Save As: FilterList.plist
        > Create

      2. 開啓 FilterList.plist 檔案, 新增一些資料如下:

    說明: a. 在最上層(root) 新增 Key 為: 1MyFilter, 將 Type 設為 Array.
                   (1 作為排序機制使用, MyFilter 將做為此處唯一一個分類的標題)
              b. 接著, 新增四個 Type 為 Dictionary 的項目.
              c. 在每個 Dictionary 項目中, 分別新增: ImageName, FilterID 與 Title Key
                  與對應的(String)Value.

    原始內容如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>1MyFilter</key>
    <array>
        <dict>
            <key>FilterID</key>
            <string>filter0</string>
            <key>ImageName</key>
            <string>filter0.png</string>
            <key>Title</key>
            <string>Filter0: Think different</string>
        </dict>
        <dict>
            <key>FilterID</key>
            <string>filter1</string>
            <key>ImageName</key>
            <string>filter1.png</string>
            <key>Title</key>
            <string>Filter1: Never believe truth</string>
        </dict>
        <dict>
            <key>FilterID</key>
            <string>filter2</string>
            <key>ImageName</key>
            <string>filter2.png</string>
            <key>Title</key>
            <string>Filter2: Great cool filter</string>
        </dict>
        <dict>
            <key>FilterID</key>
            <string>filter3</string>
            <key>ImageName</key>
            <string>filter3.png</string>
            <key>Title</key>
            <string>Filter3: See what you never seen</string>
        </dict>
    </array>
</dict>
</plist>

      3. 準備 4 張 200 x 200 pixel 的 png 檔案, 取名為 filter0.png ~ filter3.png
          加到專案裡.

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

B. 開啓 ViewController.h 檔案, 修改如下:
....
@interface ViewController : GLKViewController <AVCaptureVideoDataOutputSampleBufferDelegate, UITableViewDelegate, UITableViewDataSource>
{
....
    //@add for Camera Overlay UI
    UIImageView *filterLensImageView;   
    UITableView *filterListTableView;
   
    //@add for filter Dictionary
    NSDictionary *filterDictionary;
....
}
....
//@add for Camera Overlay UI
@property (nonatomic, strong) UIImageView *filterLensImageView;
@property (nonatomic, strong) UITableView *filterListTableView;

//@add for filter Dictionary
@property (nonatomic, strong) NSDictionary *filterDictionary;
....

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

C. 開啓 ViewController.m 檔案, 修改如下:
....
//@add for Camera Overlay UI
@synthesize filterLensImageView = _filterLensImageView;
@synthesize filterListTableView = _filterListTableView;

//@add for filter Dictionary
@synthesize filterDictionary = _filterDictionary;
....
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //@add: load up our dictionary with the contents of the property list
    self.filterDictionary = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"FilterList" ofType:@"plist"]];
....
}
....
- (void)viewDidUnload
{   
    [super viewDidUnload];
   
    //@add
    if ([EAGLContext currentContext] == self.glContext) {
        [EAGLContext setCurrentContext:nil];
    }
    self.glContext = nil;
    self.filterDictionary = nil;
}
....
//@add
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    //@update
    return [self.filterDictionary.allKeys count]; // 1
}

//@add
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section    
{
    // Return the number of rows in the section.
    //@update: creating a sort descriptor which will sort the objects
    //                   in ascending order(升冪)
    NSSortDescriptor *sortDescriptor = [NSSortDescriptor sortDescriptorWithKey:nil ascending:YES selector:@selector(localizedCompare:)];

    NSArray *sortedCategories = [self.filterDictionary.allKeys sortedArrayUsingDescriptors:[NSArray arrayWithObject:sortDescriptor]];

    NSString *categoryName = [sortedCategories objectAtIndex:section];
    NSArray *currentCategory = [self.filterDictionary objectForKey:categoryName];
   
    return [currentCategory count];
}

//@add: get the titles for our sections
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    NSSortDescriptor *sortDescriptor = [NSSortDescriptor sortDescriptorWithKey:nil ascending:YES selector:@selector(localizedCompare:)];
   
    NSArray *sortedCategories = [self.filterDictionary.allKeys sortedArrayUsingDescriptors:[NSArray arrayWithObject:sortDescriptor]];
   
    NSString *categoryName = [sortedCategories objectAtIndex:section];
   
    return [categoryName substringFromIndex:1]; // 移除 1MyFilter 開頭的 1
}
....

    編譯並執行:

     說明: 出現唯一 section 的標題: MyFilter, 資料列(row)也有 4 列.