2013년 1월 31일 목요일

[Android] Spannable 객체 사용

Span 새로 맞춘 문자서식, 문단서식, 이미지 정보등 문자열 표현하는 용어나 어떤 동작이나 행위로 인해 추가로 전달하는 정보를 말한다.

안드로이드에서는 스타일 문자를 처리하는 기능을 갖고 있는 클래스들은 공통적으로 Span이라하는 영문명이 접두어 또는 접미어로 들어간다.

◆String.xml
<?xml version=”1.0” encoding=”utf-8”?>
<resources>
<string name=”style_text_1”>This is bold! and This is highlighted!</string>
</resources>

◆Java Code
 private void spannable() {
  TextView tv = (TextView) findViewById(R.id.tv);
  Spannable sp = tv.getEditableText();
  sp.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 0, 12, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  sp.setSpan(new BackgroundColorSpan(Color.GREEN), 18, 37, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 }
  • Spannable  sp는 Editable 로 받을 수 있기때문에 tv.setText() method 대신tv.getEditableText() method를 사용 하였다.
  • StyleSpan Class 는 문자열의 속성을 변경 할 수 있으며 위 소스는 android.graphics.Typerface.BOLD 처리 한것이다.
  • BackgroundColorSpan Class는 문자열의 백그라운드를 설정 할수 있다.

◆Span 객체들
 private void spannable(){
   TextView tv = (TextView) findViewById(R.id.tv);
   
   SpannableString ss = new SpannableString("When in Rome do as the Romans do.");
   ss.setSpan(new RelativeSizeSpan(0.5f), 0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
   ss.setSpan(new ForegroundColorSpan(Color.RED), 0, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
   ss.setSpan(new AbsoluteSizeSpan(30), 6, 11, 0);
   ss.setSpan(new StrikethroughSpan(), 13, 18, 0);
   tv.setText(ss, BufferType.SPANNABLE);
  }
  • RelativeSizeSpan(0.5f) : 폰트 사이즈를 변경하는 Class 이다.
  • ForegroundColorSpan(Color.RED) : 폰트의 색상을 변경하는 Class 이다. 
  • AbsoluteSizeSpan(30) : 폰트의 크기를 물리적인 크기로 변경하는 Class 이다.
  • StrikethroughSpan() : 해당 문자를 삭제한 형태로 표기한다.
  • 이 외에 URLSpan 이라는 클래스도 있다. 기능은 링크 연결을 한다.(인터넷, 전환연결 등)

관련글

[Android] CharSequence 와 String 비교

JAVA 와 XML 에서의 문자열 관리하는 방법에는 근본적인 차이가 존재한다.

String Calss 란?
JAVA에서 String 객체내 보관하는 문자열은 유니코드로 변형하여 보관하므로 HTML과 같이 마크업 문자를 입력하고 출력할 때 문제가 발생한다. 따라서 String 객체에 입력되는 문자열은 마크업 문자를 입력하여 사용할 수 없는 문자열인란 의미로 변경금지 문자라 부른다.

CharSequence 란?
반면에 CharSequence 객체내 보관하는 문자열은 같은 String 클래스와 같은 유니코드라 하더라도 마크업 문자를 사용하여 변형과 가공이 가능한 문자열이란 의미로 스타일 문자 또는 연속되는 문자라고 한다.

◆ CharSequence 객체의 제공 Method
  • char charAt(int index) : 인덱스가 가리키는 문자를 반환한다.
  • int length() : CharSequence 객체의 문자수를 반환한다.
  • CharSequence subsequence(int start, int end) : start부터 end까지의 문자를 반환한다.
  • String toString() : CharSequence 객체를 문자열로 반환한다.

◆ XML 문서와 JAVA 프로그램간의 출력하거나 읽을 때 사용 할 수 있도록 XML 버퍼타입을 제공한다.버퍼타입은 Enum 타입으로 지원한다.
  • NORMAL : 디폴트 CharSequence 객체로 반환된다. XML 문서내 문자열은 입력시 소스 문자가 스타일 문자면 스타일 문자로 반환되고 아닌 경우는 일반 String 객체의 문자열로 반환된다.
  • SPANNABLE : 마크업문자를 넣을 수 있는 스타일 문자이다. 항상 스타일 문자로 반환된다.
  • EDITABLE : 편집가능한 스타일 문자이다. EditText는 EDITABLE 속성으로 반환된다.

◆ TextView 클래스에서 제공하는 메서드
  • CharSequence getText()
  • void setText (CharSequence text)
  • void setText (int resid, TextView.BufferType type)
  • void setText (CharSequence text, TextView.BufferType type)

◉String.xml에서 마크업 문자로 작성.
<?xml version=”1.0” encoding=”utf-8”?>
<resources>
    <string name=”styled_text”>기본(Plain), <b>강조 bold</b> <i>이텔리체 italic</i> 
              <b><i>bold-italic</i></b></string>>
</resources>

◉CharSequence 객체로 받아서 처리 할 때.
private void charSequence() {
 CharSequence cs = getText(R.string.styled_text);
 tv.setText(cs);
}

이와 같이 getText() method로 읽어 CharSequence 객체 필드로 보관하면 스타일이 유지된다. 강조나 이탤리체가 적용 안되보이는것은 폰트가 지원을 안하기 때문이다. 지원하는 폰트를 사용하면 적용이 잘된다.

◉String 객체로 받아서 처리 할 때.
private void string() {
 String str = getString(R.string.styled_text);
 tv.setText(str);
}

이와 같이 getString() method로 읽어  String 객체 필드로 보관하면 스타일이 유지되지 않는다. 위에 설명 했다시피 String은 변경금지 문자이기 때문이다.


관련글


2013년 1월 30일 수요일

[Android] XML 특수문자 처리(String.xml)


  • String.xml 에서 특수문자를 처리할때 아래 표와 같이 사용하면 된다.


  • String.xml 에서 마크업 문자를 사용하여 스타일 문자를 만들때는 아래와 같이 사용한면된다.


관련글




[Android] 사용자 모형 Java Code로 만들기


Java Code로 모형 만드는 방법은 크게 4가지가 있다.
  • 직사각형은 RectShape Class로 생성한다.
  • 타원은 OvalShape Class로 생성한다.
  • 모서리가 둥근 사각형은 RoundRectShape 클래스로 생성한다.
  • 다각형은 Path Class 로 생성하여 점과 점사이를 연결하는 방식으로 만든다.

사각형
private void rectShape() {
 ShapeDrawable drawable = new ShapeDrawable(new RectShape());
 drawable.setIntrinsicWidth(200);
 drawable.setIntrinsicHeight(100);
 drawable.getPaint().setColor(Color.BLUE);
 ImageView ivRect = (ImageView) findViewById(R.id.imageView1);
 ivRect.setImageDrawable(drawable);
}
  • setIntrinsicHeight(int height), setIntrinsicWidth (int width) method는 모형의 높이와 너비를 나타낸다.
  • getPaint() method는 색상이나 문자, 비트맵의 이미지를 넣을 수 있는 Paint객체를 반환한다.

타원
private void ovalShape() {
 ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
 drawable.setIntrinsicWidth(200);
 drawable.setIntrinsicHeight(100);
 drawable.getPaint().setColor(Color.RED);
 ImageView ivOval = (ImageView) findViewById(R.id.imageView2);
 ivOval.setImageDrawable(drawable);
}

라운드 모서리 사각형
private void roundRectShape() {
 float[] outerR = new float[] { 12, 12, 12, 12, 0, 0, 0, 0 };
 RectF inset = new RectF(6, 6, 6, 6);
 float[] innerR = new float[] { 12, 12, 0, 0, 12, 12, 0, 0 };
 ShapeDrawable drawable = new ShapeDrawable(new RoundRectShape(outerR,inset, innerR));
 drawable.setIntrinsicWidth(200);
 drawable.setIntrinsicHeight(100);
 drawable.getPaint().setShader(new LinearGradient(0, 0, 50, 50, new int[] {0xFFFF0000, 0XFF00FF00, 0XFF0000FF }, null,Shader.TileMode.REPEAT));
 ImageView ivRoundRect = (ImageView) findViewById(R.id.imageView3);
 ivRoundRect.setImageDrawable(drawable);
}
  • public RoundRectShape(float[] outerRadii, RectF inset, float[] innerRadii) 생성자는 라운드된 사각형을 그린다. 
    • outerRadii는 두 개의 실수 배열을 쌍으로 외부 사각형의 모서리 라운드 형태를 구성한다. 처음 왼쪽 위으 모서를 시작하여 시계방향으로 모서리의 각을 정의한다.
    • inset는 외부와 내부 라운드된 사각형간의 거리이다.
    • innerRadii는 두개를 쌍으로 내부 사각형의 모서리 라운드를 구성한다.
  • public Shader setShader(Shader shader)는 색상을 입히는 기능을 한다. 하위 클래스는 BitmapShader, ComposeShader, LinearGradient, RadialGradient, SweepGradient와 같은 클래스들이 있다.
  • public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile )
    • 선형 색상 바르기 객체를 생성한다.
    • x0, y0 는 x축과 y축의 색상 바르기 시작점을 나타낸다.
    • x1, y1 는 색상 바르기 종착점을 나타낸다.
    • tile은 이미지의 타일 모드를 나타낸다.
  • public RadialGradient(float x, float y, float radius, int[] colors, float[]positions, Shader.TileMode tile)
    • 방사형 색상 바르기 객체를 생성한다.
    • x,y는 방사형 중심으로 색상 바르기를 나타낸다.
    • radius는 반지름을 나타낸다.
    • tile은 이미지의 타일 모드를 나타낸다.
  • public SweepGradient (float cx, float cy, int[] colors, float[] positions)
    • 쓸어내기 효과를 나타낸다.
    • cx와 cy는 쓸어내기의 중심을 나타낸다.

마름모 모형
private void pathShape() {
 Path path = new Path();
 path.moveTo(50, 0);
 path.lineTo(0, 50);
 path.lineTo(50, 100);
 path.lineTo(100, 50);
 path.close();

 ShapeDrawable drawable = new ShapeDrawable(new PathShape(path, 100, 100));
 drawable.setIntrinsicWidth(200);
 drawable.setIntrinsicHeight(100);

 int[] pixels = new int[] { 0xFFFF0000, 0xFF00FF00, 0XFF0000FF, 0 };
 Bitmap bm = Bitmap.createBitmap(pixels, 2, 2, Bitmap.Config.ARGB_8888);
 drawable.getPaint().setShader(new BitmapShader(bm, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT));

 ImageView ivPath = (ImageView) findViewById(R.id.imageView4);
 ivPath.setImageDrawable(drawable);
}
  • moveTo(float x, float y) method는 다각형응ㄹ 그릴 최초 위치로 이동한다.
    • x와 y는 상대적인 위치로 화면의 위치와는 무관하다.
  • lineTo(float x, float y) method는 마지막 위치로부터 상대적인 위치의 좌표축으로 라인을 그린다.
  • public static Bitmap createBitmap(int[] colors, int width, int height, Bitmap.Config config) method는 주어진 색상을 사용하여 너비와 높이를 비트맵으로 만든다.
  • public BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY) method는 비트맵을 사용하여 색상 바르기를 위한 세이더 객체를 생성한다.


관련글



[Android] 모형 자르기(Clip Drawable)

<?xml version=”1.0” encoding=”utf-8”?>
<clip
    xmlns:android=”http://schemas.android.com/apk/res/android”
    android:drawable=”@drawable/drawable_resource”
    android:clipOrientation=[”horizontal” | ”vertical”]
    android:gravity=[”top” | ”bottom” | ”left” | ”right” | ”center_vertical” |
                     ”fill_vertical” | ”center_horizontal” | ”fill_horizontal” |
                     ”center” | ”fill” | ”clip_vertical” | ”clip_horizontal”] />


  • android:drawable : Drawable resource을 참조하여 이미지를 설정한다.
  • android:clipOrientation : 이미지를 자르기 위해 이동하는 방향.
    • 자를 대고 이미지를 자른다고 생각하고 자가 이동하는 방향을 나타낸다.(좌,우,위,아래)
  • android:gravity: 자의 위치가 어느 방향으로 이동할지를 나타낸다.
    • android:clipOrientation이랑 틀린 점은 android:clipOrientation은 자가 움직일 수 있는 방향만을 제시했다면 android:gravity에서는 오른쪽에서 왼쪽으로 또는 왼쪽에서 위쪽으로 등과 같이 어디를 기준으로 setLevel() method에서 정해준 수치많큼 이동할 수 있는 방향을 제시한다.


<clip />에서는 자르는 방법을 제공하지 않고 자바 프로그램에서 setLevel()메서드를 이용하여 자르기 된다.
아래는 '안드로이드 개발자 사이트'에 있는 예제 소스이다.

<?xml version=”1.0” encoding=”utf-8”?>
<clip xmlns:android=”http://schemas.android.com/apk/res/android”
    android:drawable=”@drawable/android”
    android:clipOrientation=”horizontal”
    android:gravity=”left” />

<ImageView
    android:id=”@+id/image”
    android:background=”@drawable/clip”
    android:layout_height=”wrap_content”
    android:layout_width=”wrap_content” />

ImageView imageview = (ImageView) findViewById(R.id.image);
ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel() + 1000);

<참고>
android:cliporientation="horizontal" 이므로 자르는 위치가 좌우로 움직인다.
android:gravity="left" 이므로 자는 왼쪽으로 움직인다.
위에서도 언급 했듯이 <clip />에서는 자르는 명령이 없다.
자바코드에서 잘라줘야 된다.

drawable.setLevel(drawable.getLevel() + 1000);

이 부분이 자르는 곳이다. <clip />에서 자를 좌우로 움직이며 왼쪽으로 움직이라고 설정해 놨으므로 이 기준을 가지고 위의 자바 코드에서 자를 수 있다.
위에 나온 1000이라는 수치를 자르기 레벨이라 하며 0 ~ 10,000 까지 제공한다. 반을 자를려면 5000을 주면 된다.


관련글

[Android] 모형 겹치기(Layer List)

<?xml version=”1.0” encoding=”utf-8”?>
<layer-list
    xmlns:android=”http://schemas.android.com/apk/res/android” >
    <item
        android:drawable=”@[package:]drawable/drawable_resource”
        android:id=”@[+][package:]id/resource_name”
        android:top=”dimension”
        android:right=”dimension”
        android:bottom=”dimension”
        android:left=”dimension” />
</layer-list>
  • android:drawable : Drawable resource 참조하여 이미지를 설정한다.
  • android:id : 유니크한 아이디를 만들 수 있다.
  • android:top : 상단 여백을 준다.
  • android:right : 왼쪽 여백을 준다.
  • android:bottom : 하단 여백을 준다.
  • android:left : 오른쪽 여백을 준다.

아래와 같이 <bitmap />을 사용할 수도 있다.
<item android:drawable=”@drawable/image” />

위의 코드를 아래와 같이 <bitmap />를 사용하여 똑같이 표현 할 수도 있다.
<item>
  <bitmap android:src=”@drawable/image”
          android:gravity=”center” />
</item>


아래는 '안드로이드 개발자 사이트'에 있는 예제 코드이다.
<?xml version=”1.0” encoding=”utf-8”?>
<layer-list xmlns:android=”http://schemas.android.com/apk/res/android”>
    <item>
      <bitmap android:src=”@drawable/android_red”
        android:gravity=”center” />
    </item>
    <item android:top=”10dp” android:left=”10dp”>
      <bitmap android:src=”@drawable/android_green”
        android:gravity=”center” />
    </item>
    <item android:top=”20dp” android:left=”20dp”>
      <bitmap android:src=”@drawable/android_blue”
        android:gravity=”center” />
    </item>
</layer-list>
관련글

[Android]상태 리스트 모형 (Selector)

<?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android” 
    android:constantSize=[ ”true” | ”false” ]
    android:dither=[ ”true” | ”false” ]
    android:variablePadding=[ ”true” | ”false” ]>
    <item 
        android:drawable=”@[package:]drawable/drawable_resource”
        android:state_pressed=[ ”true” | ”false” ]
        android:state_focused=[ ”true” | ”false” ]
        android:state_selected=[ ”true” | ”false” ]
        android:state_checkable=[ ”true” | ”false” ]
        android:state_checked=[ ”true” | ”false” ]
        android:state_enabled=[ ”true” | ”false” ]
        android:state_window_focused=[ ”true” | ”false” ]/>
</selector>

<Selector /> 속성
  • android:constantSize : 이미지의 크기를 동일하게 할 것인가.(Default -> false)
  • android:dither : 화면상의 색상수와 이미지의 생상수가 차이가 존재하면 원래의 색감으로 맞추어주는 기능이다.(Default -> true)
  • android:variablePadding : 이미지에 따라 자동으로 패딩을 맞추어 주는 기능이다.

<Item /> 속성
  • android:state_pressed : 컴포넌트를 눌렀을 때.
  • android:state_focused : 컴포넌트가 포커스 되었을 때.
  • android:state_selected :  컴포넌트가 선택되어 졌을 때.
  • android:state_checkable : 체크 버튼처럼 선택 가능하도로 뷰를 만들 때.
  • android:state_checked : 체크 버튼처럼 선택되어졌을 때.
  • android:state_enable : 컴포넌트가 활성화 되어 졌을 때.
  • android:state_window_focused : 해당 컴포넌트를 담고 있는 창이 포커스 되었을 때. 즉 다른 애플리케이션에 의해 가려져 있다가 화면의 전면이 다시 나타났을 때.

아래는 '안드로이드 개발자 사이트'에 있는 예제 코드이다.
<?xml version=”1.0” encoding=”utf-8”?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
    <item android:state_pressed=”true”
          android:drawable=”@drawable/button_pressed” /> <!-- pressed -->
    <item android:state_focused=”true”
          android:drawable=”@drawable/button_focused” /> <!-- focused -->
    <item android:state_hovered=”true”
          android:drawable=”@drawable/button_focused” /> <!-- hovered -->
    <item android:drawable=”@drawable/button_normal” /> <!-- default -->
</selector>

<?xml version=”1.0” encoding=”utf-8”?>
<Button
    android:layout_height=”wrap_content”
    android:layout_width=”wrap_content”
    android:background=”@drawable
관련글