웹앱 또는 UIWebView를 기반으로 개발을 하다보면 WebKit의 특성 아래 통곡할 일이 벌어진다. 바로 버전 별 버그라든지 기능 차이 때문이다. 그렇기에 개발하기 앞서 WebKit 버전을 숙지하고 해당 버전에 관련된 이슈를 알게 된다면 좀 더 유연하게 개발이 가능할 것이다.


 Android Ver

 API Level

 SDK Name

 WebKit Ver

2.0

Eclair

 530.17

2.0.1

Eclair

 530.17

2.1

Eclair

 530.17

2.2

8

Froyo

 533.1

2.2.1

8

Froyo

 533.1

2.2.2

8

Froyo

 533.1

2.2.3

8

Froyo

 533.1

2.3.1

9

Gingerbread

 533.1  533.16

2.3.2

9

Gingerbread

 533.1  533.16

2.3.3

10

Gingerbread

 533.1  533.16

2.3.4

10

Gingerbread

 533.1  533.16

2.3.5

10

Gingerbread

 533.1  533.16

2.3.6

10

Gingerbread

 533.1  533.16

2.3.7

10

Gingerbread

 533.1  533.16

3.0

11

Honeycomb

 534.13  533.1

3.0.1

11

Honeycomb

 534.13  533.1

3.1

12

Honeycomb

 534.13  533.1

3.2

13

Honeycomb

 534.13  533.1

3.2.1

13 

Honeycomb

 534.13  533.1

3.2.2

13

Honeycomb

 534.13  533.1

4.0.1

14

Ice Cream Sandwich

 534.30  535.19  533.1

4.0.2

14

Ice Cream Sandwich

 534.30  535.19  533.1

4.0.3

15

Ice Cream Sandwich

 534.30  535.19  533.1

4.0.4

15

Ice Cream Sandwich

 534.30  535.19  533.1

4.1

16

Jelly Bean

 534.30  535.19  537.22  533.1

4.1.1

16

Jelly Bean

 534.30  535.19  537.22  533.1

4.1.2

16

Jelly Bean

 534.30  535.19  537.22  533.1

4.2

17

Jelly Bean

 534.30  535.19  537.22  537.31  537.36  533.1

4.2.1

17

Jelly Bean

 534.30  535.19  537.22  537.31  537.36  533.1

4.2.2

17

Jelly Bean

 534.30  535.19  537.22  537.31  537.36  533.1

4.3

18

Jelly Bean

 534.30  535.19  537.22  537.31  537.36  533.1

4.4

19

KitKat

 534.30  537.36

4.4.1

19

KitKat

 534.30  537.36

4.4.2

19

KitKat

 534.30  537.36


 역시나 Android 답다랄까 WebKit 버전마저 파편화되는 것을 확인할 수 있었다. 주로 파편화가 확인된 기준은 OS 차원에서 기본으로 잡은 버전이 있으나 제조사에 따라 버전이 달라지는 것을 볼 수 있었다.

  볼드 처리로 강조된 버전은 OS 기본 또는 레퍼런스 폰이 사용하는 버전을 의미한다.

  마지막으로 이 리스트는 User-agent를 수집하는 사이트에 방문하여 수 많은 로그를 취합한 결과물이다.

(나름 취합하긴 했지만 저렇게 파편되는 것을 봐서는 리스트에 있는게 끝이 아니라고 생각한다)


'개발 > Android' 카테고리의 다른 글

[Android] 버전별 WebKit 버전.  (0) 2014.03.29
by 패드곰 2014.03.29 12:45

   웹앱 또는 UIWebView를 기반으로 개발을 하다보면 WebKit의 특성 아래 통곡할 일이 벌어진다. 바로 버전 별 버그라든지 기능 차이 때문이다. 그렇기에 개발하기 앞서 WebKit 버전을 숙지하고 해당 버전에 관련된 이슈를 알게 된다면 좀 더 유연하게 개발이 가능할 것이다.


 iOS Ver

 WebKit Ver

 4.0

532.9

 4.0.1

532.9

 4.0.2

532.9

 4.1

532.9

 4.2

533.17.9

 4.2.1

533.17.9

 4.3

533.17.9

 4.3.1

533.17.9

 4.3.2

533.17.9

 4.3.3

533.17.9

 4.3.4

533.17.9

 4.3.5

533.17.9

 5.0

534.46

 5.0.1

534.46

 5.1

534.46

 5.1.1

534.46

 6.0

536.26

 6.0.1

536.26

 6.1

536.26

 6.1.1

536.26

 6.1.2

536.26

 6.1.3

536.26

 6.1.4

536.26

 7.0

537.51.1

 7.0.1

537.51.1 

 7.0.2

537.51.1

 7.0.3

537.51.1

 7.0.4

537.51.1

 7.0.5

537.51.1

 7.0.6

537.51.1

 7.1

537.51.2



  이 리스트는 User-agent를 수집하는 사이트에 방문하여 수 많은 로그를 취합한 결과물이다.

  차후 후속 버전이 나온다면, 사이트를 방문해도 되겠지만 ifconfig.me/all에 접속하면 현재 브라우저의 WebKit 버전을 확인할 수 있다.


by 패드곰 2014.03.28 22:43

  본 포스트는 UILabel을 다루는 방법에 대해 기술 되어있으며, 샘플 코드나 실행 결과는 Xcode 5, iOS 7.0.3 기준으로 이뤄진 것이다.


  UILabel은 사용자에게 정적인 정보를 알리기 위해 UIKit에서 제공하는 읽기 전용 텍스트 뷰이다.

  글씨 색, 서체 종류, 그림자, 텍스트 정렬 등 간단한 스타일링을 적용할 수 있으며, 한 줄 이상을 출력할 수 있다. 아래는 별도의 스타일 설정 없이 간단한 라벨을 만든 예이다.


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 200, 25)];

[label setText:@"Padgom's Tistory!"];


  별도의 스타일이 없을때 라벨의 각 프로퍼티들은 아래와 같은 기본값을 가진다.


  font : nil (System Font 17p Normal)

  textColor : nil (Black)

  shadowColor : nil (No Shadow)

  shadowOffset : 0, -1

  textAlignment : NSTextAlignmentLeft (iOS6 이전 버전에서는 NS 접두사가 아니라 UI 접두사가 붙는다)

  lineBreakMode : NSLineBreakByTruncatingTail (iOS6 이전 버전에서는 NS 접두사가 아니라 UI 접두사가 붙는다)

  highlightedTextColor : nil (No Highlight)


  위에서 언급된 프로퍼티는 텍스트 전체에 영향을 주는 스타일 설정 프로퍼티이다. 하나하나 살펴보자.


+ font (UIFont)

 : 텍스트의 서체와 서체 크기를 정한다.


[label setFont:[UIFont fontWithName:@"Georgia-Bold" size:12.0f]];



+ textColor (UIColor)

 : 텍스트의 글씨 색을 정한다.


[label setTextColor:[UIColor colorWithRed:178.0f/255.0f green:24.0f/255.0f blue:137.0f/255.0f alpha:1.0f]];



shadowColor (UIColor)

 : 텍스트의 그림자 색을 정한다.


[label setShadowColor:[UIColor colorWithRed:120.0f/255.0f green:109.0f/255.0f blue:196.0f/255.0f alpha:1.0f]];



shadowOffset (CGSize)

 : 그림자 방향과 크기를 설정한다. 텍스트의 위치가 0, 0일 때 그림자의 위치는 텍스트의 위치와 합한 값에 위치하게 된다.

  ex 1) offset이 0, -1일 때 => 텍스트의 y 값 보다 1 픽셀 작은 곳에 위치한다. (정윗 방향)

  ex 2) offset이 1, 1일 때 => 텍스트의 x 값 보다 1 픽셀 큰 곳, y 값 보다 1 큰 곳에 위치한다. (대각선 방향)


[label setShadowOffset:CGSizeMake(1, 1)];



textAlignment (NSTextAlignment)

 : 텍스트의 정렬 기준을 설정한다. (Left, Center, Right, Justified, Natural 등 다섯 가지를 사용할 수 있다. 단, Justified, Natural은 iOS6 이상 부터 사용할 수 있으며, 일반 Plain Text[각주:1]에서는 동작하지 않고 Attribute Text[각주:2]에서만 동작한다)


UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 25)];

[label1 setText:@"How do I love thee?"];

[label1 setTextAlignment:NSTextAlignmentLeft];


UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(10, 55, 300, 25)];

[label2 setText:@"Let me count the ways."];

[label2 setTextAlignment:NSTextAlignmentCenter];


UILabel *label3 = [[UILabel alloc] initWithFrame:CGRectMake(10, 80, 300, 25)];

[label3 setText:@"I love thee to the depth and,"];

[label3 setTextAlignment:NSTextAlignmentRight];



lineBreakMode (NSLineBreakMode)

 : 텍스트의 길이가 라벨의 프레임보다 클 경우 어떤 기준으로 텍스트를 나눌지를 설정한다.

(Truncating head/middle/tail, Word wrapping, Character wrapping, Clipping 등 여섯 가지를 사용할 수 있다)


UILabel *label1 = [[UILabel allocinitWithFrame:CGRectMake(103030025)];

[label1 setText:@"I love thee purely, as they turn from parise."];

[label1 setLineBreakMode:NSLineBreakByTruncatingHead];


UILabel *label2 = [[UILabel allocinitWithFrame:CGRectMake(105530025)];

[label2 setText:@"I love thee purely, as they turn from parise."];

[label2 setLineBreakMode:NSLineBreakByTruncatingMiddle];


UILabel *label3 = [[UILabel allocinitWithFrame:CGRectMake(108030025)];

[label3 setText:@"I love thee purely, as they turn from parise."];

[label3 setLineBreakMode:NSLineBreakByTruncatingTail];



highlightedTextColor (UIColor)

 : 텍스트가 하이라이트될 때의 글씨 색을 설정한다.


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 200, 25)];

[label setText:@"Padgom's Tistory!"];

[label setHighlightedTextColor:[UIColor redColor]];

[label setHighlighted:YES];



  여기까지 단순한 스타일을 설정할 수 있는 프로퍼티를 살펴보았다. 이번에는 텍스트 전체가 아닌 글자 하나하나 스타일을 적용할 수 있는 attributedText 프로퍼티에 대해 살펴보자.


+ attributedText (NSAttributedString)

 : iOS6 부터 UILabel에서도 전체 텍스트가 아닌 부분 별로 스타일을 입힐 수 있도록 attributedText 프로퍼티를 사용할 수 있다.

  NSAttributedString은 자신이 가진 string에 대해 디테일한 스타일 정보를 나타낼 수 있도록 설계된 클래스로 iOS3.2 버전부터 지원을 했지만, iOS6 부터 이 클래스의 인스턴스를 받을 수 있는 UI들이 생겨 개발자로 하여금 iOS5 이전 버전에서 이와 비슷한 기능을 구현하기 위해 CoreText까지 내려가는 노고를 줄여 줄 수 있었다.


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 30)];


NSShadow *shadow = [[NSShadow alloc] init];

[shadow setShadowOffset:CGSizeMake(1, 1)];

[shadow setShadowColor:[UIColor yellowColor]];

[shadow setShadowBlurRadius:3.0f];


NSMutableAttributedString *text =

[[NSMutableAttributedString alloc] initWithString:@"Padgom's Tistory! => Link"];

[text addAttributes:@{NSFontAttributeName : [UIFont fontWithName:@"Georgia" size:19.0f],

                      NSForegroundColorAttributeName : [UIColor whiteColor],

                      NSBackgroundColorAttributeName : [UIColor blackColor],

                      NSShadowAttributeName : shadow,

                      NSStrokeWidthAttributeName : @5,

                      NSKernAttributeName : @2}

              range:NSMakeRange(0, 8)];

[text addAttributes:@{NSFontAttributeName : [UIFont fontWithName:@"SnellRoundhand" size:17.0f],

                      NSTextEffectAttributeName : NSTextEffectLetterpressStyle}

              range:NSMakeRange(9, 7)];

[text addAttributes:@{NSStrikethroughStyleAttributeName : @1,

                      NSStrikethroughColorAttributeName : [UIColor redColor],

                      NSUnderlineStyleAttributeName : @1,

                      NSUnderlineColorAttributeName : [UIColor greenColor],

                      NSBaselineOffsetAttributeName : @3.5f,

                      NSObliquenessAttributeName : @1.0f,

                      NSExpansionAttributeName : @0.5f}

              range:NSMakeRange(18, 2)];

[text addAttributes:@{NSLinkAttributeName : [NSURL URLWithString:@"http://padgom.tistory.com"]}

              range:NSMakeRange(21, 4)];


[label setAttributedText:text];



 속성

자료형

기본값

버전[각주:3]

설명 

 NSFontAttributeName

 UIFont

 Helvetica 12p

6.0

 서체 종류와 크기

 NSParagraphStyleAttributeName

 NSParagraphStyle 

 defaultParagraphStyle

6.0

 문장 스타일

 (줄간[각주:4], 문단간[각주:5], 정렬, 들여쓰기, 쓰기 방향 등에 대한 정보)

 NSLigatureAttributeName

 NSNumber (integer)

 1 (ligature)

6.0 

 합자[각주:6] 여부

 NSKernAttributeName

 NSNumber (float)

 Depending on the font

6.0

 자간[각주:7]

 NSForegroundColorAttributeName

 UIColor

 Black Color

6.0

 글씨 색

 NSBackgroundColorAttributeName

 UIColor

 nil (no background)

6.0

 글씨 배경색

 NSUnderlineStyleAttributeName

 NSNumber (integer)

 0 (no underline)

6.0

 밑줄 스타일

 (None, Single, Thick, Double, Word 등의 스타일과 Solid, Dot, Dash, Dash Dot, Dash Dot Dot 등의 채우기 스타일이 있다)

 NSUnderlineColorAttributeName

 UIColor

 nil (same foreground)

7.0

 밑줄 색

 NSStrokeWidthAttributeName

 NSNumber (float)

 0 (no stroke)

6.0

 글자 테두리 두께

 NSStrokeColorAttributeName

 UIColor

 nil (same foreground)

6.0

 글자 테두리 색

 NSStrikethroughStyleAttributeName

 NSNumber (integer)

 0 (no strikethrough)

6.0

 취소선 스타일

 NSStrikethroughColorAttributeName

 UIColor

 nil (same foreground)

7.0

 취소선 색

 NSShadowAttributeName

 NSShadow

 nil (no shadow)

6.0

 글자 그림자 스타일

 (그림자 위치, 색, 블러효과 등 스타일)

 NSTextEffectAttributeName

 NSString

 nil (no text effect)

7.0

 글자 이펙트

 (미리 알림 앱에서 사용되는 글자 효과. 현재는 Letterpress 스타일 밖에 없다)

 NSBaselineOffsetAttributeName

 NSNumber (float)

 0

7.0

 글자 기준선[각주:8]

 NSObliquenessAttributeName

 NSNumber (float)

 0 (no skew)

7.0

 글자 기울기 방향(이텔릭체와 흡사)

 NSExpansionAttributeName

 NSNumber (float)

 0 (no expansion)

7.0

 글자 늘리기(균등 정렬과 흡사)

 NSLinkAttributeName

 NSURL or NSString

 nil

7.0

 링크



  여기까지 텍스트에 전체적 또는 부분적으로 스타일을 설정할 수 있는 방법에 대해 살펴보았다. 이번에는 한 줄짜리 단문이 아닌 여러 줄을 가지는 장문 텍스트 뷰에 대한 예를 보며 관련 프로퍼티와 메소드를 살펴보자.


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 200)];

[label setText:@"I love thee purely, as they turn from parise. I love with a passion put to use. In my old griefs, and with my childhood's faith."];

[label setNumberOfLines:0];

[label setTextColor:[UIColor whiteColor]];

[label setBackgroundColor:[UIColor blackColor]];



  라벨은 자신의 프레임 안에 라벨이 꽉차지 않는 상태일 때 라벨의 윗 부분부터가 아닌 가운데 부터 텍스트를 채워간다. 이때 라벨의 윗 부분부터 채워가려면 sizeToFit 메소드를 사용한다. 이 메소드는 numberOfLines에 설정된 줄 수에 맞춰 라벨의 프레임을 조정하여 텍스트가 윗 부분부터 차도록 해준다. numberOfLines 프로퍼티는 라벨이 출력할 수 있는 줄 수를 제한할 때 사용하는데 기본으로 1을 가지고, 0을 입력하면 무제한을 의미한다. 또한, 무제한으로 설정했을 때는 sizeToFit 메소드가 의미가 없으니 주의해야 한다.

  아래는 sizeToFit 메소드를 사용한 결과이다.


[label setNumberOfLines:2];

[label sizeToFit];



  스타일 정하는 방법, 줄 수를 정하는 방법에 알아봣지만 사용에 있어 뭔가 아쉬운 점이 있다. 예를 들자면 두 줄 안에 짤리는 문자없이 모든 텍스트가 다 보이길 원할 때 말이다. 서체 크기를 일일이 변경해가며 맞춰줄 수는 있겠지만 매번 값을 맞추기도 힘들거니와 가변적인 문자열이 들어가는 경우 답이 없다. 하지만 걱정말자 이를 위해 프로퍼티가 있으니 바로 adjustsFontSizeToFitWidth이다. 이 프로퍼티는 라벨의 너비에 맞춰 텍스트가 모두 보일 수 있도록 서체 크기를 조절해준다. 기본값은 NO이다.


[label setAdjustsFontSizeToFitWidth:YES];



  sizeToFit 메소드 예제에서 adjustsFontSizeToFitWidth 프로퍼티만 수정한 결과이다. 서체 크기가 줄어들었다. 하지만, 또 아쉬움이 남는다. 서체 크기가 너무 줄어든 것이다. 이를 위해 또 다른 프로퍼티가 있으니 minimumScaleFactor다. 이 프로퍼티는 글자 크기를 줄일 때 하한선(최소 비)을 설정하는 것이다. 기본값은 0.0f이다.

  (iOS6 이전 버전에서는 minmumFontSize 프로퍼티를 사용한다)


[label setMinimumScaleFactor:0.6f]; // 축소 비를 40% 이하로 제한한다



  방금 전보다는 글씨 크기가 조금 커진 것을 확인할 수 있다.

  

  이벙네는 조금 특이한 baselineAdjustment 프로퍼티를 살펴보자. 이 프로퍼티가 왜 특이하냐면, 다음과 같은 조건에서만 유효한 프로퍼티이기 때문이다.


adjustsFontSizeToFitWidth = YES

numberOfLines = 1


  그럼 이 프로퍼티는 어떤 일을하는지 예제를 통해 살펴보자.


UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 40)];

[label1 setText:@"I love thee purely, as they turn from parise. I love with a passion put to use. In my old griefs, and with my childhood's faith."];

[label1 setAdjustsFontSizeToFitWidth:YES];

[label1 setMinimumScaleFactor:0.6f];

[label1 setBaselineAdjustment:UIBaselineAdjustmentAlignBaselines]; // 기본값

[label1 setTextColor:[UIColor whiteColor]];

[label1 setBackgroundColor:[UIColor blackColor]];


UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 40)];

[label2 setText:@"I love thee purely, as they turn from parise. I love with a passion put to use. In my old griefs, and with my childhood's faith."];

[label2 setAdjustsFontSizeToFitWidth:YES];

[label2 setMinimumScaleFactor:0.6f];

[label2 setBaselineAdjustment:UIBaselineAdjustmentAlignCenters];

[label2 setTextColor:[UIColor yellowColor]];

[label2 setBackgroundColor:[UIColor clearColor]];


UILabel *label3 = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 40)];

[label3 setText:@"I love thee purely, as they turn from parise. I love with a passion put to use. In my old griefs, and with my childhood's faith."];

[label3 setAdjustsFontSizeToFitWidth:YES];

[label3 setMinimumScaleFactor:0.6f];

[label3 setBaselineAdjustment:UIBaselineAdjustmentNone];

[label3 setTextColor:[UIColor redColor]];

[label3 setBackgroundColor:[UIColor clearColor]];



  순서데로 빨간색은 None, 노란색은 Centers, 흰 색은 기본값이다. 

  우리가 라벨을 만들 때 보통은 안에 들어가는 텍스트가 중앙에 위치하도록 프레임을 조절한다. 하지만, adjustsFontSizeToFitWidth 프로퍼티를 사용할 경우 우리가 원하던 중앙 위치는 무너진다. 또는, 같은 값을 가지는 라벨들의 텍스트 위치가 다르게 보인다. 이를 위해 서체 크기가 조절될 때 텍스트가 어느 위치에 들어갈지 보정해주는 것이 baselineAdjustment 프로퍼티다.


  여기까지 UILabel 다루기었다. 끗.



  1. text 프로퍼티를 사용해 텍스트를 설정했을 때를 의미한다. [본문으로]
  2. attributedText 프로퍼티를 이용해 텍스트를 설정했을 때를 의미한다. [본문으로]
  3. 지원하는 버전(ex 6.0은 6.0 이후 버전을 의미). [본문으로]
  4. 하나의 문단 안에서 줄과 줄의 간격. [본문으로]
  5. 문단과 문단의 간격 [본문으로]
  6. 필기체에서 글자와 글자를 이어서 쓰는 글자를 의미. [본문으로]
  7. 글자와 글자의 간격. [본문으로]
  8. 글자를 디자인하거나 판짜기를 할 때 그 형태적 배열의 기준이 되는 가상선. 자세한 내용은 http://terms.naver.com/entry.nhn?docId=784003&cid=544&categoryId=544 여기를 참조. [본문으로]
by 패드곰 2014.02.06 19:36
| 1 2 3 4 ··· 7 |