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

Posted by ITPangPang
2016.11.03 22:49 안드로이드(android)/xml


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

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

사용할 수 있겠죠?


끝!

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로