6. Layout TextView & Style 저장 (레이아웃 텍스트뷰 스타일) - Android Studio(안드로이드)

준비

오늘은 Layout 에 대해 좀 더 알아보도록 하겠습니다.

우선 새프로젝트를 만들어 줍니다.

물로 Empty 로 만들어 줍니다.

https://arvigoes.tistory.com/77?category=748927

2. Android Studio 첫 프로젝트

그리고 activity_main.xml 에서 기존에 만들어진 TextView 를 지워 줍니다.

그리고 Layout 을 LinearLayout 로 바꿔 주도록 합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
</LinearLayout>

가장 기본적인 Layout 이라 학습하기가 편합니다.

 

TextView 추가

TextView 추가

드래그&드롭으로 TextView 를 추가 하도록 합니다.

TextView Attribute 중 Text 에 적당한 이름을 적어 주도록 합니다.

Text

텍스트 뷰를 추가하고 내용을 넣고 보니 텍스트 뷰에 Warning 이 발생하고 있습니다.

삼각형 ! 표가 워닝 마크 입니다.

Warning 마크 클릭

둘중에 아무거나 눌러서 내용을 확인 하도록 합니다.

Warning 내용

대충 "arvigoes" 라는 string 이 하드코딩 되어있다 이런 내용입니다.

해결 해 보도록 합니다.

 

TextView attribute 창에서 좀전에 arvigoes 라고 쓴 창옆에 있는 길다란 타원모양을 눌러 주도록 합니다.

이 부분을 누르면 Resource 선택창이 열립니다.

Pick a Resource Resource open

아래와 같은 리소스 선택창이 뜨면 Add new resource 를 선택 하여 new string value 를 선택하여 

Add new Resource

String Value Resource 생성창을 열어 줍니다.

string resource 생성

OK 를 눌러 리소스를 생성해 주도록 합니다.

warning 사라짐

Text 영역에 "arvigoes" 대신 "@string/name" 이 들어가 있습니다.

그리고 하드코딩이 사라짐과 동시에 warning 이 사라짐을 확인 할 수 있습니다.

 

생성된 string resource 는 res/values/string.xml 에 포함되어 있습니다.

Resource String.xml

 

이번엔 TextView 의 폰트 설정도 추출해 보도로 하겠습니다.

xml에서 text 편집에서 TextView  android:textSize = "20sp" 를 추가 하도록 합니다. (있으면 그냥 하셔도 됩니다)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/name"
        android:textSize="20sp"
        />
</LinearLayout>

커서는20sp에 있어야 함

Extract dimension resource 를 선택해 주도록 합니다.

extract dimesion resource

OK 를 눌러 추출 하도록 합니다.

추출 하면 dimens.xml 에 추가된 내용을 확인 합니다.

Resource dimens.xml

 

Style TextView

이번에는 TextView 에 여러 스타일을 적용해 보도록 하고 스타일을 추출해서 다른 텍스트 뷰에 적용 해 보도록 하겠습니다.

TextView attribute 에서 padding 값을 적용 해 보도록 하겠습니다.

하드코딩을 피하면서 적용 해 보도록 하겠습니다.

padding Top

폰트 추가

이번엔 폰트를 프로젝트에 추가해 보도록 하겠습니다.

font 추가

리소스에 폰트가 추가 되었습니다.

resource 에 font 추가

추가된 폰트를 TextView 에 적용 하도록 합시다.

텍스트뷰에 적용

 

 

Style 추출 및 적용

component Tree 에서 이때까지 여러값들을 추가한 TextView 에서 마우스 오른쪽버튼으로 클릭!

Refactor -> Extract Syle 을 선택 합니다.

스타일 추출 메뉴

적용된 스타일 중 추출할 내용을 선택하여 적당한 이름으로 저장 합니다.

스타일추출

syles.xml 에 추출된 내용을 확인하도록 합니다.

추출완료

이제 새로운 TextView 에 적용해 보도록 합니다.

 

attribute 에서 돋보기 버튼을 눌러 검색 해 보록 합니다.

style 에 만들어둔 스타일을 적용!

스타일 적용

style = "@style/nameStyle" 이 추가되어 폰트 및 사이즈 등이 동일하게 적용된 모습을 볼 수 있습니다.

Activity_main 의 TextView 스타일 적용

style 적용

이상 textView 추가와 style 에 대해 알아봤습니다.

한동안 layout 에 대해 다루도록 하겠습니다.

나중에 내용이 점점 많아진다면 layout 관련 내용을 따로 해서 관리 할 계획인데 얼마나 양이나올지 모르겠네요