티스토리 뷰

Development/App

#5 TextView를 정복하자

Mir(whdghks913) 2013. 8. 1. 18:36

네... 오늘은 제목답게 Textview만 죽도록 할겁니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

각오 단단히 하(지 않으셔도 되지만 하)시고 따라와 주세요~


5. TextView를 정복하자

5-1 프로젝트 생성



자 ㅎㅎ 저번 강좌에 프로젝트 만들기부분은 아주 자세하게 나와 있습니다 ㅎㅎ

저런 예쁜 모양으로 만들어 주시면 되요 ㅎㅎ

(다음 강좌부터 이 스샷을 생략합니다 특이 사항이 있다면 강좌에 표시할 것이고 없다면 기본설정(BlankActivity)그대로 가시면 됩니다)


5-2 XML코드의 모든것

만들어 졌습니다!



이부분을 자세히 봐주세요

이때 Nexus One부분은 눌러 다른 기기로 바꿔주시고.. (안타깝게도 아직 이부분을 고정하는 방법은 저도 잘 모릅니다)

돋보기 눌러주시면 크게 키울수 있습니다



저는 레퍼런스인 겔럭시 넥서스로 선택했습니다 ㅎㅎ



저 화면에서 Ctrl + A를 눌러 처음에 있던 hello world를 지워주세요

아니면 아래에 있는 activity_main.xml을 눌러 하나 있는 textview를 지워주시면 됩니ㅏㄷ


그다음 옆에 있는 위젯 창고(?)에서 TextView를 드래그 해주세요



정 가운데 배치 했습니다 ㅎㅎ



소스코드를 보겠습니다

activity_main.xml을 눌러주세요



자, 이게 우리가 이번 시간에 마스터할 TextView의 기본 소스입니다


[미르의 팁]

-android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_margin="60dp" 이건 몬가요?


아래 정리해 두었습니다

layout_alignParentTop - 부모의 상단 가장자리에 위젯 배치

layout_alignParentBottom - 부모의 하단 가장자리에 위젯 배치

layout_alignParentLeft - 부모의 왼쪽 가장자리에 위젯 배치

layout_alignParentRight - 부모의 오른쪽 가장자리에 위젯 배치

layout_centerHorizontal - 부모의 가로방향 중앙에 위젯을 배치

layout_centerVertical - 부모의 세로방향 중앙에 위젯을 배치

layout_centerInParent - 부모의 정중앙에 위젯을 배치


layout_above - 특정 위젯의 위에 해당 위젯을 배치

layout_below - 특정 위젯의 아래에 해당 위젯을 배치

layout_toLeftOf - 특정 위젯의 왼쪽에 해당 위젯을 배치

layout_toRightOf - 특정위젯을 오른쪽에 해당 위젯을 배치

layout_alignTop - 특정 위젯과 상단이 일치하도록 위젯을 배치

layout_alignBottom - 특정 위젯과 하단이 일치하도록 위젯을 배치

layout_alignLeft - 특정위젯과 왼쪽이 일치하도록 위젯을 배치

layout_alignRight - 특정 위젯과 오른쪽이 일치하도록 위젯을 배치


여기서 부모란?, Textview를 감싸고 있는 또하나의 View를 뜻합니다

<RelativeLayout>가 감싸고 있으면 이게 부모가 되는거 같습니다


모두 알고 계실 필요는 없으나 이런것들도 있구나 정도만 알아주세요 ㅎㅎ


layout_margin은 "값"만큼 띄어서 배치하겠다는 뜻입니다


하나하나 Textview의 속성에 대해 알아보겠습니다


android:text


다들 아시다 싶이 Textview에 표시될 글자를 뜻합니다

두가지로 들어갈수 있죠

하나는 @string/의 형식으로, 하나는 그냥 표시하고픈 글자를 넣어주면 됩니다

원래 string은 2가지 이상에서 같은 글자가 필요할때 쓰거나, 멀티 랭기지를 할때 쓰이는 경우가 많습니다


[미르의 팁]

-@string/을 안썼더니 소스의 줄 옆에 이상한게 생겼어요

그건 Android Lint라고 합니다

[I18N] Hardcoded string "내용", should use @string resource

린트 경고 인데요 되도록이면 @string을 이용하여 작성하라 라는 뜻으로

무시하셔도 됩니다



android:textColor


딱보면 알겠죠? 글자 색을 지정하는 겁니다

값은 #AARRGGBB의 형식을 주로 사용하는데요

AA는 투명도, RR은 빨강색, GG는 초록색, BB는 파랑색을 의미합니다


AA의 경우 불투명일때 FF, 반투명일때 88, 완투명일때 00을 사용합니다

상단바 투명화 하면서 자주 썼죠????ㅋㅋㅋ


[미르의 팁]

RRGGBB의 값은 어떻게 구하나요?

일단 그림판을 열어 색편집을 누르세요


원하는 색을 고른다음 저기 있는 빨강, 녹색, 파랑의 숫자를 기록해 두세요

다른걸 써도 되는데 여기서는 윈도우 계산기로 하겠습니다

보기 - 프로그래머용을 들어간다음 좌측 메뉴를 Dex로 설정하세요

이제 빨강의 숫자를 입력하세요

그다음 Hex를 누르면 그 숫자의 헥스 값이 나옵니다 기록해 두시고...

초록, 파랑도 이렇게 해줍니다


이제 조합하시면 RRGGBB의 값이 나옵니다


저 사진의 숫자의 RRGGBB는 6BF22B이네요



android:textSize


말그대로 글자 크기입니다

단위로는 dip, dp, sp, px등이 있는데요

사진으로 봅시다


(그림 출처 : Do it 안드로이드 앱 정복기)


이렇구나 이해하시고 외우지 말고 넘어가세요


android:typeFace


글자 폰트를 지정합니다

대표적으로

normal

sans

serif

monospace

등이 있습니다만 별로 쓸일은 없더군요


android:textStyle


글자의 특징입니다

뭐 예를들면 굵은글씨, 기울어짐등등..

기본을 제외한 세개만 들어갈수 있습니다

normal

bold

italic

bold|italic

뭐 이런 느낌입니다. ㅎㅎ


[미르의 팁]

bold와 italic사이에 들어간 |은 뭔가요?

우리 집합 배울때 {x|x는 ...}이러잖아요 그때의 |일겁니다 ㅎㅎ

키보드의 \있죠? Shift키와 \키를 동시에 누르면 |이 나옵니다


|은 동시에 적용한다는 뜻입니다

여려개의 속성을 동시에 적용할때 |을 씁니다



android:singleLine


싱글라인 이네요ㅎ

싱글은 하나, 1이란 뜻이고 라인은 줄(번호)라는 뜻이죠?

싱글라인은 줄이 하나다, 즉 글자가 길어졌을때도 한줄로 표시한다 라는 뜻입니다


기본값은 false이며 이를 true로 변경하게 되면 ...으로 나타나게 됩니다


여담인대 런처의 어플이름에 이 값이 설정되어 있는건지 ... 이거 불편하지 않나요?



그럼 한번 테스트 해보겠습니다

지금까지 배운걸 모두 넣어보죠



소스는 다음과 같습니다

아래에 있는 Graphical Layout을 눌러보세요



이렇게 나타납니다 ㅎㅎ

만약 singleLine이 없다면?



이렇게 ...으로 안나타나고 모두 나오지요 ㅎㅎ


안드로이드 기기에 올려서 확인해 보겠습니다



정상적으로 나오군요!


이렇게 어플을 만들때는 꼭 기기에 올려 동작을 확인해 봐야 합니다


이렇게 해서 xml상의 코드를 살펴보았습니다

다음에는 자바 코드와 관련된 textview를 살펴보고, 버튼을 약간 배운다음 버튼을 누르면 Textview의 내용이 바뀌는 어플을 만들어 보겠습니다


이 글에 추가될것으로 추가될때 까지는 가져가지 마세요 ㅎㅎㅎ


exampleTextView.zip


(xml만 수정한 예제소스)



5-3 JAVA코드의 모든것

이번에는 java소스에서 건들여 보겠습니다


MainActivity를 볼까요?



자, 저게 가장 중요한 소스라고 했습니다


잠시 xml으로 돌아와서 button을 추가해 봅시다



버튼은 아직 배우지 않았지만 이번시간에는 일단 추가해 보겠습니다



추가완료!

다시 java소스로 넘어옵시다


이제 버튼을 누르면 글자와 TextView의 속성이 변경되게 할건데요

public class MainActivity extends Activity { 밑에 Button Btn_change;을 추가해 주세요



어? Button에 빨간 줄이 그어 있어요...

이건 import가 되지 않았다는 뜻입니다


이클립스에서는 Ctrl + Shift + O키를 눌러 자동으로 import 할수 있습니다

키를 눌러 import해주시면 됩니다


import전


import 후


보시면 import android.widget.Button;이 추가되었고 Button에 있던 빨간줄 에러도 없어졌습니다

이렇게 import를 해줘야 오류가 안나고 컴파일이 이루어 지게 됩니다



마찬가지로 TextView textview;도 추가후 import 해주세요


이제 버튼과 TextView를 자바 코드상에서 조작할수 있도록 xml과 java를 연결해야만 합니다

protected void onCreate(Bundle savedInstanceState) { 메소드 안에 넣어주시면 되는데요


여기서 주의할점이 있습니다

setContentView(R.layout.activity_main); 이 코드 위에는 넣으시면 안되며 아래에 넣어주셔야 합니다


[미르의 팁]

-왜 위에 넣으면 안되나요?

setContentView메소드는 화면에 나타낼 뷰를 지정하는 역할을 하는데요 이때 xml 레이아웃을 메모리상에 객체화 합니다

즉 화면에 나타낼 뷰를 지정하고, xml 레이아웃의 내용을 메모리 상에 객체화 합니다


그런대 이 메소드 위에 코드를 넣게 되면 메모리 상에 객체화 되지 않은 정보를 참조하려 하기 때문에 강제종료 오류가 발생합니다



그럼


Btn_change = (Button) findViewById(R.id.button1);

textview = (TextView) findViewById(R.id.textView1);


을 적당한 공백을 두고 추가 하시면 됩니다 


이제 버튼을 사용자가 클릭했을때의 작업을 구현해야 합니다

아직 버튼을 배우지 않아 모르지만 버튼을 클릭했을때의 기능 구현은 대표적으로 2가지(setOnClickListener을 이용, 메소드 이용)가 있는데요

다음 시간에 구체적으로 살펴볼 예정이므로 오늘은 그냥 넘어가 봅시다

(사실 여기서 쓰려다가 버튼에 넣는게 나을거 같아 보류해 둡니다 ㅎㅎ)


onCreate메소드에


Btn_change.setOnClickListener(listener);


을, onCreate메소드가 끝나고 빈 공간에


Button.OnClickListener listener = new Button.OnClickListener()

{

 public void onClick(View v)//버튼을 클릭 하면 ... 

 {

    switch(v.getId()){

    case R.id.button1:

    textview.setText("미르의 It정복기 예제 소스"); // 또는 R.string.(이름)

    textview.setTextSize(50);

    textview.setTextColor(Color.GREEN); // 또는 RGB(255, 255, 255)

    break;

    }

 }

     };


을 추가해 주신다음 import해주세요




완성된 소스는 위 사진과 같습니다


다음 강좌에서 자세하게 배울것 이지만 간단하게 짚고 넘어가겠습니다

Button.OnClickListener란, 버튼이 눌렸을때 실행되며 그안에 onClick이라는 메소드가 존재합니다

여기서 if ~else if를 통한 방법 또는 switch ~ case를 통한 방법등을 통해 어떤 버튼이 눌렸는지 ID값을 확인한다음

어떤 명령을 할것인지 지정해 주는겁니다


이 포스팅에서는 자세히 다루지 않고 Button편에서 다루겠습니다

우리가 주의깊게 봐야할건


textview.setText("미르의 It정복기 예제 소스");

textview.setTextSize(50);

textview.setTextColor(Color.GREEN);


입니다

setText안에 어떤 글자를 넣느냐에 따라 달라지죠 ㅎㅎ

만약 string을 통해 넣고 싶다면

setText(R.string.(이름));으로 넣어주시면 됩니다


그다음 setTextSize는 아시다싶이 글자크기, 그 아래 setTextColor은 글자 색입니다



그럼 완성된 코드가 어떻게 돌아가는지 확인해 보겠습니다



여기서 버튼을 누르게 되면



이렇게 글자색, 내용, 크기가 바뀌게 됩니다


[미르의 팁]

-자바코드에서 다룰수 있는 TextView의 속성이 3가지 뿐인가요?

아닙니다

이클립스에는 Ctrl + Space(스페이스바) 키를 눌러 지금 입력중인 내용의 미리보기 또는 바로 입력이 가능합니다


이 글에서는 대표적인 속성을 살펴본것으로 자바에서 사용가능한 TextView의 속성이 3개뿐이다 라는 오해는 하지 말아주시길 바랍니다




이렇게 해서 TextView의 모든것을 살펴보았습니다 ㅎㅎ

기본적인 TextView의 사용법을 마스터 하신다면 무궁무진한 활용이 가능합니다 ㅎㅎ


자바코드를 수정한 예제소스



exampleTextView_java_code.zip


댓글
  • 감사합니다. 안녕하세요.

    열심히 공부중인데..
    윗 방법대로 아무리 따라해도 텍스트 스타일과 사이즈가 적용이안됩니다. ㅠㅠ

    그래서 예제를 열어서 비교해보려하는데 예제파일 오픈하는방법을 모르겠네요 ㅠㅠ
    2014.01.24 13:41
  • Favicon of https://itmir.tistory.com Mir(whdghks913) http://whdghks913.tistory.com/318

    그냥 압축푼다음 열면되요;
    2014.01.24 13:46 신고
  • 감사합니다. 감사합니다 ㅎ

    좋은자료 정주행중입니다!

    즐거운 하루 보내시고

    올해 하시는 모든 일 잘 되시길 기원합니다 ㅎ
    2014.01.24 14:41
  • Favicon of https://byeol2014.tistory.com 옛 주인장 Android Studio 상에서 RGB로 입력 시 rgb라고 입력해야 합니다.(Color.rgb(255,255,255));
    이클립스 상에서는 테스트 못했습니다.
    2014.09.08 22:41 신고
  • 다음 다시한번 눌렀을때 처음으로돌아가게 어떻게하나요? 2015.08.30 18:33
  • 안녕하세요 textview id에 오류가 납니다.
    top level element is not completed
    어떻게 해야하나요....
    도와주세요
    2015.10.10 21:39
  • 초보 개발자 안녕하세요 현제 작은 프로젝트 진행중 어려움을 격고있는 초보 개발자입니다
    하나의 텍스트뷰에 hello world가 들어있고 화면에 출력한후
    hello와 world를 각각 터치했을때 다른 반응을 보이고 싶습니다
    현제는 hello와 world를 두개의 텍스트뷰로 만들어 관리하고있는데
    문장이 길어지고 많아질수록 관리하기 힘들더군요
    하나의 텍스트뷰로 처리하는 방법 없을까요?
    2016.01.05 09:40
  • Favicon of https://itmir.tistory.com Mir(whdghks913) 아래 링크를 참고해보세요

    http://www.androidpub.com/1770049
    2016.01.05 22:26 신고
  • amy821 안녕하세요! 미르님 자료들 보면서 공부중인 대학생입니다! 요즘 인스타그램과 같은 SNS를 구현할 수 있도록 리사이클러뷰를 공부하고 있는데, 카드뷰 안의 아이템들이 [ 첫번째줄(?): 프로필사진, 사용자이름, 두번째줄: 올린사진(이미지뷰), 세번째줄: 사진에 대한 설명 (텍스트뷰), 네번째줄 : 좋아요버튼(버튼), 좋아요수(텍스트뷰), 댓글달기버튼(버튼), 댓글갯수(텍스트뷰) ] 이렇게 구성되어있습니다! 이 카드뷰자체를 눌렀을 때에는 카드뷰 전체를 커스텀 다이얼로그를 띄워 보여주고싶습니다( 확대 느낌처럼? 그래서 커스텀 다이얼로그 띄워졌을 때 그 안에는 카드뷰 내용을 그대로 다 보여주면서 댓글도 자세히 볼 수 있음) . 또한 세번째 줄에 있는 사진에 대한 설명 부분( 텍스트뷰) 을 좀 수정하고싶은데... 잘 모르겠어서요 ㅠㅠ..
    그냥 리사이클러뷰 카드뷰 여러개 있는 상태에서는 텍스트뷰를 단 한 줄만 보여주고 싶습니다.. 그리고 나머지 다음 긴 내용들을카드뷰 클릭시 뜨는 커스텀 다이얼로그에서만 확인할 수 있게 하고 싶은데요...! 이런건 어떻게 구현해야하는지 알 수 있을까요~?
    2016.03.12 00:26
  • es1015 안녕하세요 미르님 질문이 있는데요! 버튼을 한번 누르면 텍스트가 바뀌고, 한번 더누르면 원래 상태로 돌아가는것은 어떤식으로 구현해야할까요?? 2016.04.22 12:33
  • 인수봉 감사합니다.... 처음 안드로이드 예제 연습하는데 오류 원인을 못찾았는데 여기서 찾았네요...
    setContentView 아래에 코딩해야 되는군요....
    2017.02.13 14:11
댓글쓰기 폼