วาดเส้นบน MKMapView (MapKit บน iPhone)

เนื่องจาก "ตอนนี้" เราไม่สามารถวาดอะไรลงไปใน MKMapView ได้โดยตรง ดังนั้นหากต้องการวาดอะไรลงไป จึงจำเป็นต้องใช้วิธีอ้อมๆเล็กน้อย

หลักการก็คือ วาง UIView ซ้อนลงไปเป็น subview ของ MKMapView และวาดเส้นต่างๆลงไปบน UIView ที่วางลงไปนั้นแทน และหากต้องการวาดเส้น โดยอิงกับจุด latitude, longitude จริงบนแผนที่ด้วยแล้ว เจะใช้ method ของ MKMapView ที่ชื่อ convertCoordinate:toPointToView: ซึ่งผลที่ได้ก็คือเป็นการแปลงจุด latitude และ longitude ในแผนที่ให้กลายมาเป็นจุด x, y จริงบนหน้าจอ

อีกจุดหนึ่งที่ต้องให้ความสนใจก็คือ เมื่อมีการขยับ หรือมีการเปลี่ยนแปลงการแสดงผลบน MKMapView ก็จะให้ UIView ที่วางทับอยู่วาดรูปใหม่อีกครั้ง เนื่องจาก latitude, longitude ที่แสดงบนหน้าจอ ไม่ใช่ x, y เดิมที่เคยวาดไปก่อนที่ MKMapView จะถูกขยับอีกแล้ว และแน่นอน พระเอกของเราคือ MKMapViewDelegate

และเมื่อเรารู้แล้วว่าจุดที่เราต้องการวาดคือ x, y ไหนบนหน้าจอ การวาดอะไรลงไปก็ไม่ยาก

ตัวอย่างขั้นตอนหลักๆมีดังนี้
เริ่มแรกจะมี Array ของ CLLocation ที่บรรจุ latitude และ longitude ไว้พร้อมใช้งาน (ทำจริงๆอาจเก็บไว้ในลักษณะอื่นๆก็ได้แล้วแต่สะดวก)

จุดสำคัญคือจุดที่เราจะสั่งวาดเส้นลงไปบน UIView โดยเราจะใช้วิธี override method ชื่อ drawRect: ของ UIView ให้วาดเส้นลงไปตามจุดที่ต้องการ ดังนี้

- (void)drawRect:(CGRect)rect{

/* สั่งให้วาดเส้นหากมีจุดที่ต้องวาด และวาดเมื่อ UIView นี้ไม่ได้ถูก hidden อยู่เท่านั้น */
if(!self.hidden && nil != self.points && self.points.count > 0){

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    if(nil == self.lineColor)
        self.lineColor = [UIColor blueColor];

    CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
    CGContextSetLineWidth(context, 2.0);

    //วนรอบอ่าน coordinate ทุกๆอันใน list เพื่อแปลงเป็นจุด x, y บนหน้าจอ และวาดต่อจุดกันไปเรื่อยๆ
    for(int idx = 0; idx < self.points.count; idx++){
        CLLocation* location = [self.points objectAtIndex:idx];

        //แปลง coordinate ที่เก็บไว้ใน list ให้กลายเป็นตำแหน่ง x, y บนหน้าจอ
        CGPoint point = [self.map convertCoordinate:location.coordinate toPointToView:self];

        if(idx == 0){
           CGContextMoveToPoint(context, point.x, point.y);
        }else{
           CGContextAddLineToPoint(context, point.x, point.y);
        }
    }

    CGContextStrokePath(context);

} // end if
} //end drawRect:

อีก 2 delegate method ของ MKMapViewDelegate ที่พลาดไม่ได้ก็คือ
mapView:regionWillChangeAnimated:
mapView:regionDidChangeAnimated:

หากแผนที่เปลี่ยน region ใหม่ หรือกำลังจะถูกย่อ/ขยาย เลื่อนแผนที่ ให้ซ่อน UIView ออกไปก่อน

- (void)mapView:(MKMapView *)mapView 
    regionWillChangeAnimated:(BOOL)animated{

    self.hidden = YES;
}

เมื่อหยุดการกระทำกับแผนที่ไปแล้ว ให้แสดง UIView พร้อมทั้งบอกให้วาดเส้นใหม่ตามจุดต่างๆอีกครั้ง

- (void)mapView:(MKMapView *)mapView 
    regionDidChangeAnimated:(BOOL)animated{

    self.hidden = NO;
    [self setNeedsDisplay];
}

จากตัวอย่าง พบว่ามีการสั่งให้วาดเส้นตามจุดต่างๆใหม่ทุกครั้งที่มีการเปลี่ยน region ขยับ เลื่อน หรือย่อ ขยายแผนที่ทุกครั้งไป :(

หากเราปักหมุดลงไปด้วย แล้วลากเส้นเชื่อมตามลำดับ จะได้หน้าตาออกมาลักษณะนี้

ที่มา: Drawing polyines or routes on a MKMapView (Using Map Kit on the iPhone)
ต้นฉบับ source code Created by Craig

ตัวอย่างโปรเจ็คสามารถดาวน์โหลดได้จากที่นี่

Related Link from Roti

Parse XML ด้วย NSXMLParser

มี library หลากหลายตัวที่ช่วยให้เราสามารถ parse XML ด้วย Objective-C ได้ ซึ่งคลาสในตระกูล NS* ก็เตรียม NSXMLParser ให้เราได้ใช้อยู่แล้ว

หลักการคร่าวๆของ NSXMLParser จะไม่ใช่การเขียนโปรแกรมวนรอบให้วิ่งไปตาม element ต่างๆที่เจอ แต่จะเป็นการเขียน code เข้าไปแทรกที่จังหวะต่างๆใน delegate method ที่มีให้ ในมุมมองที่ซึ่งตัว parser จะวิ่งไปตาม element ต่างๆให้เราเอง ส่วนเราก็มีหน้าที่วาง code แทรกลงไป ว่าหาก parser วิ่งมาถึงจุดนี้ จะให้มันทำอะไรบ้าง นั่นเอง

สำหรับบันทึกนี้จะเอา code เข้าไปเขียนไว้ในเหตุการณ์ต่างๆดังนี้
เมื่อ parser วิ่งไปเจอ element (เจอ tag เปิด)
เมื่อ parser วิ่งไปเจอ character ระหว่าง element
เมื่อ parser วิ่งออกจาก element (เจอ tag ปิด)
เมื่อ parser วิ่งไปจนจบ document

ทั้ง 4 เหตุการณ์ดังกล่าวจะถูกแทนด้วย delegate method ต่อไปนี้ตามลำดับ

parser:didStartElement:namespaceURI:qualifiedName:attributes:
parser:foundCharacters:
parser:didEndElement:namespaceURI:qualifiedName:
parserDidEndDocument:

ชื่อ method ยาวหน่อย ;)

ครานี้ก็มาถึง code ตัวอย่างการใช้งาน โดยจะใช้ XML ตัวอย่างจาก W3C ไฟล์นี้ โดยเริ่มจากการประกาศตัวแปรต่างเตรียมใช้งานก่อน ซึ่งจากลักษณะของ xml ตัวอย่าง จะได้ตัวแปรต่างๆดังนี้

    /* สำหรับเก็บรายชื่อของ food */

    NSMutableArray *breakfast_menu;

   

    /* เก็บชื่อของ element ที่ตัว parser วิ่งไปถึง */

    NSString *currentElement

    /* อาหารแต่ละชนิดจะมี property ของตัวเอง เราจึงเลือกใช้ dictionary */

    NSMutableDictionary *currentFood;

    /* เอาไว้เก็บค่าชั่วคราว */

    NSMutableString *currentName, *currentPrice, *currentDescription, *currentCalories;

จากนั้นเริ่มลงมือ โดยการสร้าง instance ของ NSXMLParser ก่อนด้วย xml ตัวอย่างดังกล่าว พร้อมทั้งกำหนด delegate ให้เรียบร้อย ดังนี้

    NSString *path = @"http://www.w3schools.com/XML/simple.xml";

    breakfast_menu = [[NSMutableArray alloc] init];

   

    NSURL *xmlURL = [NSURL URLWithString: path];

   

    parser = [[NSXMLParser alloc] initWithContentsOfURL: xmlURL];

    [parser setDelegate: self];

   

    NSLog(@"start parsing");

    [parser parse];

แทรก code เข้าไป เมื่อ parser วิ่งไปเจอ element ใดๆ ในที่นี้จะกำหนดว่าหาก parser วิ่งไปเจอ element ชื่อ food ให้สร้าง object ต่างๆไว้รอเก็บ property ต่างๆของ food ไว้เลย

 - (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict{

    if([elementName isEqualToString: @"food"]){

        currentFood = [[NSMutableDictionary alloc] init];

       

        currentName = [[NSMutableString alloc] init];

        currentPrice = [[NSMutableString alloc] init];

        currentDescription = [[NSMutableString alloc] init];

        currentCalories = [[NSMutableString alloc] init];

       

    }

}

และเมื่อ parser วิ่งไปเจอ character ที่อยู่ระหว่าง tag ก็ให้ตรวจสอบดูว่าตอนนี้กำลังอ่านอยู่ใน element ชื่อว่าอะไร จากนั้นให้เอาค่าที่ได้เก็บไว้ในตัวแปรให้ถูกต้อง

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string{

    if(![[string stringByTrimmingCharactersInSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]] isEqualToString: @""]){

        if([currentElement isEqualToString: @"name"]){

            [currentName appendString: string];

           

        }else if([currentElement isEqualToString: @"price"]){

            [currentPrice appendString: string];

           

        }else if([currentElement isEqualToString: @"description"]){

            [currentDescription appendString: string];

           

        }else if([currentElement isEqualToString: @"calories"]){

            [currentCalories appendString: string];

        }

    }

}

และเมื่อ parser วิ่งไปจนจบ element นั้นๆแล้ว ให้นำค่าที่อ่านได้นำไปเก็บไว้ใน food ที่เป็น dictionary object แต่หากพบว่า parser วิ่งออกจาก element ชื่อ food ให้นำตัวแปร currentFood ไปเก็บไว้ใน list ที่เตรียมไว้ตอนแรก

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName{

    if([elementName isEqualToString: @"name"]){

        [currentFood setObject: currentName forKey: @"name"];

       

    }else if([elementName isEqualToString: @"price"]){

        [currentFood setObject: currentPrice forKey: @"price"];

       

    }else if([elementName isEqualToString: @"description"]){

        [currentFood setObject: currentDescription forKey: @"description"];

       

    }else if([elementName isEqualToString: @"calories"]){

        [currentFood setObject: currentCalories forKey: @"calories"];

       

    }else if([elementName isEqualToString: @"food"]){

        [breakfast_menu addObject: currentFood];

    }

}

เมื่อ parser วิ่งไปจนจบ document แล้วให้ลอง print ออกมาดู ดังนี้

- (void)parserDidEndDocument:(NSXMLParser *)parser {

   

    NSLog(@"all done!");

    NSLog(@"food list array has %d items", [breakfast_menu count]);

    NSMutableDictionary *food;

   

    for(int i = 0; i < [breakfast_menu count]; i ++){

        food = [breakfast_menu objectAtIndex: i];

        NSLog(@"\nname: %@\nprice: %@\ndescription: %@\ncalories: %@\n\n",

              [food objectForKey: @"name"],

              [food objectForKey: @"price"],

              [food objectForKey: @"description"],

              [food objectForKey: @"calories"]);

    }

}

code ตัวอย่างดาวน์โหลดได้จากที่นี่

Related Link from Roti

Create Tab Bar Icon for iPhone Application with Gimp

หลายครั้งที่เราจำเป็นต้งอใช้ tab bar icon ใน iPhone Application ของเราเอง แต่แค่ icon ต่างๆที่ระบบจัดเตรียมมาให้อาจไม่เพียงพอต่อความต้องการ โชคดีที่ยังมีคนใจดีหลายคน แจก tab bar icon ให้เราหา download มาใช้ได้ฟรี เช่นที่นี่ ที่นี่ และ ที่นี่ แต่หลายครั้งที่หาไม่เจอที่ตรงกับที่เราต้องการ หรือไม่ก็อยากจะใช้รูปที่เรามามาทำเป็น tab bar icon เสียเอง ทำให้เราต้องออกแรงทำ tab bar icon ขึ้นมาใช้เองล่ะ

entry นี้จะใช้ Gimp ในการเปลี่ยนรูปที่เรามีอยู่แล้วให้กลายเป็นรูปที่นำมาใช้เป็น tab bar icon ได้

หลังจากมีรูปที่ต้องการนำมาทำเป็น tab bar icon และเปิดด้วย Gimp ขึ้นมาแล้ว ขั้นตอนต่อไปมีดังนี้

1. เปลี่ยนรูปให้เป็นภาพ Grayscale ก่อน ที่เมนู เลือก Image > Mode > Grayscale จากนั้นพิจารณาดูว่าพื้นที่ที่เราต้องการให้แสดงตรงตามต้องการหรือไม่ (พื้นที่สีดำ จะไม่ถูกวาด พื้นที่สีขาวที่เท่านั้นที่เราจะใช้งาน) ถ้ายังให้ลองปรับความเข้าของสีดำ/ขาว หรือไม่ก็ Invert สีดำ/ขาว ก็ได้

2. สร้าง layer ใหม่ขึ้นมาและกำหนด background เป็นสีขาว พร้อมทั้งให้ layer ใหม่ที่สร้างขึ้นอยู่ด้านล่างรูปที่เราจะใช้งาน

3. click ขวาที่ layer ที่สร้างใหม่จากข้อ 2 (layer ด้านล่าง) แล้วเลือก Add Layer Mask... จะมีหน้าต่างเล็กๆขึ้นมา ให้เลือก Black (full transparency) จากนั้นกดปุ่ม Add

4. click เลือก layer รูปของเรา (layer บนสุด) จากนั้นเลือกเครื่องมือ Clone Tool (รูปกล้องถ่ายรูป) และกดปุ่ม Ctrl ค้างไว้ พร้อมกับนำ mouse มา click ที่มุมบนซ้ายของภาพ เพื่อเริ่มต้นการ copy

5. กำหนดให้ layer บนสุด invisible (click ที่รูปตาในหน้าต่าง layer) และเลือก layer ล่าง

6. เลื่อน mouse มาไว้มุมบนขวาสุด (ขณะนี้ pointer ยังเป็น Clone Tool อยู่) ในตำแหน่งเดียวกับที่เรา click มุมบนซ้ายจากข้อ 4

7. ลาก pointer ไปให้ทั่ว จะเห็นภาพที่เราจะใช้ถูก clone ขึ้นมา

เสร็จแล้วจะได้รูปออกมาลักษณะนี้

สังเกตเห็นว่า หากรูปต้นแบบที่เราจะนำมาใช้ไม่ได้ใช้สีที่เข้มมากพอ ผลลัพธ์ที่ได้จะเป็น icon ที่สีของ icon ไม่ค่อยชัดเจน (ดูจางๆ) นั่นเอง

อ่านต่อ: iPhone HIG

Related Link from Roti

Reverse Geocoding (Address Lookup) with Objective-C, iPhone

การหาที่อยู่จาก latitude และ longitude ที่มี ปัจจุบันมี service ที่ให้เราโยน latitude, longitude เข้าไปแล้วมันจะคืนค่าสถานที่ออกมาหลายที่ ทั้งฟรี และไม่ฟรี เช่น Reverse Geocoding (Address Lookup) ของ Google เป็นต้น

สำหรับ MapKit framework ที่ถูกใช้ใน iPhone กันนั้นก็ใช้ map service จาก Google เช่นเดียวกัน และเราก็สามารถ reverse geocoding ได้จาก service ของ Google ดังกล่าวมาแล้วได้ตามปกติ

วิธีที่กล่าวมาตอนต้น เราจำเป็นต้องส่ง HTTP request ไปเอง และต้องมี API key จาก Google ด้วย สำหรับ map kit framework แล้วง่ายกว่านั้นด้วยการใช้ MKReverseGeocoder นั่นเอง

สำหรับวิธีการใช้งานก็ตรงไปตรงมาคือส่ง latitude, longitude ที่ถูก wrap ให้อยู่ในรูปของ CLLocationCoordinate2D เข้าไป จากนั้นสั่งให้หาที่อยู่ออกมา ผลลัพธ์ที่ได้จะถูกส่งไปยัง delegate method ทั้ง 2 เมื่อ reverse สำเร็จ หรือไม่สำเร็จ ดังนั้นจะได้หน้าตา code ดังนี้

1. wrap latitude, longitude ที่มีไว้ใน CLLocationCoordinate2D ก่อน

CLLocationCoordinate2D coordinate = {

    latitude,

    longitude

};

2. instantiate และส่ง coordinate เป็นพารามิเตอร์เข้าไป อย่าลืมกำหนด delegate object ด้วย และสั่งให้ทำการ reverse จากนั้นก็รอ ให้เสร็จสิ้นการ reverse

MKReverseGeocoder *reverseGeocoder = [[MKReverseGeocoder alloc] initWithCoordinate: coordinate];

reverseGeocoder.delegate = self;

[reverseGeocoder start];

3. เมื่อการ reverse เสร็จสิ้นแล้ว 1 ใน 2 delegate method นี้จะถูกเรียกให้ทำงาน

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)newPlacemark {

           NSLog(@"%@", [[newPlacemark.addressDictionary valueForKey:@"FormattedAddressLines"] componentsJoinedByString:@", "]);

 }

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFailWithError:(NSError *)error {

    NSLog(@"%@", error);

}

ค่าที่จะได้หลังจาก reverse สำเร็จและนำมาใช้งานหลักๆก็คือ instance ของ MKPlacemark นั่นเอง ซึ่งในนั้นจะบรรจุที่อยู่ของสถานที่ที่แปลงได้ ให้เราได้เลือกใช้ได้ว่าจะใช้ค่าไหน เช่น addressDictionary, countryCode, postalCode และ  subLocality เป็นต้น

อ่านต่อ: Google Maps Terms of Service

Related Link from Roti