안드로이드 : , 수평선 긋기, 버튼 쉽게 만들기, 이미지와 텍스트가 같이 들어가는 버튼 만들기, RalativeLayout 속성들

수평선 긋기

 

하다보니 수평선을 그어야 하는데 이거 때문에 이미지를 넣는다는 것은 너무나도 번거롭다. xml로 간단하게 수평선을 만들 수 있다.

 <View
        android:id="@+id/v_divider"
        android:layout_width="match_parent"
        android:layout_height="2dp"  //굵기는 자유롭게 조절
        android:background="#333333" //색깔 />

 

 

버튼 쉽게 만들기

버튼을 꾸며주려고 xml을 수정하던 중에 다른 블로그에서 좀  더 쉽게 수정할 수 있는 사이트를 알려주었다.

해당 코드가 어떻게 적용되는지 좀 더 직관적으로 알 수 있어서 추천한다. 

  https://angrytools.com/android/button/

Android Button Maker

위의 링크로 들어가면 사이트가 나올 것이다. 사용법도 쉬운 편이다.

 

 

 

이미지와 텍스트가 같이 들어가는 버튼 만들기

button 태그에서 만들면 된다.  아래 코드 참고

 <Button
            android:id="@+id/btn_topic1"
            android:layout_width="110dp"
            android:layout_height="50dp"
            android:background="@drawable/button_style"  // 커스텀 버튼 xmml이다. 
            android:text="@string/topic1"      //버튼에 들어갈 텍스트
            android:textColor="#FFFFFF"			//글자 색깔
            android:textSize="18sp"				//글자 크기
            android:layout_gravity="center|center_horizontal"   //글자 정렬
            android:padding="10dp"		//버튼 내부 여백
            //버튼 텍스트 기준 왼쪽으로 준거다. right,bottom등 다양한 위치로 줄 수 있다.
            android:drawableLeft="@drawable/fire"  
            android:layout_marginLeft="10dp"   
            />

 

간혹 버튼 안에 들어가는 이미지가 커서 곤란한 경우가 있다. 그럴 때에는 xml에서 사이즈를 조절해주고 drawable~~태그 안에다가 @drawble/'사이즈를 조절해놓은 xml' 을 넣으면 된다. xml 작성은 아래 코드블록 참고 ( 정 모르겠으면 아래 코드에서 android:drawable 내용만 바꾸고 복붙하면 된다.)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/fire"  //여기다가 크기를 조절하고싶은 이미지를 넣는다.
        android:width="25dp"   // 바꾸고싶은 크기
        android:height="25dp" //바꾸고싶은 크기
</layer-list>

 

RalativeLayout 속성들

 

말 그대로 상대적인 레이아웃 

리니어레이아웃이 그저 칸을 나누면서 하나하나 채우는거라면 릴레이티브 레이아웃은 기준을 하나 정하고 그 기준에 맞춰서 배치하는 것이 가능하다.

 

적용하려는 속성에다가 anchor view의 id를 쓰면 된다.

 

위젯끼리의 관계를 지정하는 속성들

layout_alignBaseline	anchor view와 baseline을 맞춘다.
layout_alignBottom	anchor view와 아래쪽 가장자리를 맞춘다.
layout_alignTop	anchor view와 위쪽 가장자리를 맞춘다.
layout_alignLeft	anchor view와 왼쪽 가장자리를 맞춘다.
layout_alignRight	anchor view와 오른쪽 가장자리를 맞춘다.
layout_above	anchor view의 위쪽에 배치
layout_below	anchor view의 아래쪽에 배치
layout_toLeftOf	anchor view의 왼쪽에 배치
layout_toRightOf	anchor view의 오른쪽에 배치

 

Parent와의 관계를 지정하는 속성

layout_centerHorizontal	수평 방향으로 컨테이너의 가운데 배치
layout_centerVertical	수직 방향으로 컨테이너의 가운데 배치 ( layout_centerInParent )
layout_alignParentLeft	컨테이너와 왼쪽 가장자리를 맞춘다.
layout_alignParentRight	컨테이너와 오른쪽 가장자리를 맞춘다.
layout_alignParentBottom	컨테이너와 아래쪽 가장자리를 맞춘다.
layout_alignParentTop	컨테이너와 위쪽 가장자리를 맞춘다.