Layout(xml파일)에 Style 적용하기

Layout(xml파일)에

Style 적용하기

ㆍ 이번에는 xml에서 레이아웃 작업을 할때 

    style을 적용시켜서 반복코딩을 줄여보도록 

    하겠습니다.

ㆍ 저는 아주아주 많이 활용하는 편은 아니고

    간단한것만 style로 묶어서 사용하는 편입니다.

어려운 부분은

하나도 없으니

그냥 눈으로 읽으셔도

바로 적용시킬 수 있을겁니다.

바로 비교해보자

일단 뭐 모양 상관없이

다양하게 만들어보겠습니다.

(Style 적용X)

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    </LinearLayout>

</LinearLayout>

width, height, orientation만

골고루 섞어가면서

넣어봤습니다

자 그럼 이번에는

위와 똑같이 적용되는

Style 사용한 코드를

보겠습니다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/layout_match_vertical"
    tools:context="com.tistory.itpangpang.styleex.MainActivity">

    <LinearLayout
        style="@style/layout_match_horizontal">

        <TextView
            style="@style/layout_wrap" />

        <ImageView
            style="@style/layout_match" />
    </LinearLayout>

    <LinearLayout
        style="@style/layout_wrap_vertical">
    </LinearLayout>

    <LinearLayout
        style="@style/layout_wrap_horizontal">
    </LinearLayout>

</LinearLayout>

자 뭔말인지는

모르겠으나..

확실히 엄청 간단해졌죠?

그럼 위에 적용시킨

Style이 무엇인지

[res]-[values]-[style.xml]

을 열어보겠습니다

<style name="layout_match">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
</style>

<style name="layout_wrap">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

<style name="layout_match_horizontal" parent="layout_match">
    <item name="android:orientation">horizontal</item>
</style>

<style name="layout_match_vertical" parent="layout_match">
    <item name="android:orientation">vertical</item>
</style>

<style name="layout_wrap_horizontal" parent="layout_wrap">
    <item name="android:orientation">horizontal</item>
</style>

<style name="layout_wrap_vertical" parent="layout_wrap">
    <item name="android:orientation">vertical</item>
</style>

스타일에 들어와보니

그래도 여기는 코드를

보면 이해가 될 것입니다.

가장 간단한것부터 먼저 보자면

          

두 개의 코드는 같습니다.

앱이 돌아가게 되면

왼쪽은 style.xml에서

이렇게 정의해 준 스타일을

불러다가 적용해서 사용하게 됩니다

그 다음 orientation이 적용된 코드를 보면

                       

이렇게 부모의 스타일을

물려 받은후에 새로운 스타일을

적용시켜서 사용할 수 있습니다

에구구.

뭔가 잘 설명해보려고 했는데

오히려 더 정리가 안된듯..

뭔가 지저분. ㅠㅠ

어쨋든 대충 저렇게 원하는

기능들을 묶어서 나만의

스타일로 적용한 후에

불러다가 쓰면 됩니다.

저는 솔직히 위에 써놓은

스타일만 씁니다.

width, height, orientation.

1. 올 wrap

2. 올 match

3.올 wrap + horizontal

4. 올 wrap + vertical

5. 올 match + horizontal

6. 올 match + vertical

보통 ImageView를

사용할때 올 wrap을

많이 사용하고

Linearlayout을 자주 사용하기

때문에 Orientation쓰는 일이 많아서

딱 저 6개만 쓰는 편입니다.

하지만 스타일 활용하는것을

좋아하시는 분은

margin, padding, background등

다양하게 모아서 쓰시면 됩니다.

Relativelayout을 좋아하시는 분은

centerHorizontal

centerInParent

centerVertical

등을 묶어서 잘 활용하면 깔끔하게

사용할 수 있겠죠?

끝!