나무 숲

[안드로이드 스튜디오] 버튼 Button 본문

Career/모바일

[안드로이드 스튜디오] 버튼 Button

wood.forest 2017. 4. 27. 00:12



Button




클릭하면 다른 페이지로 이동하는 등의 기능을 실행하는 버튼입니다.


안드로이드 스튜디오에서 이같은 아이템을 배치하고 만들고 하는 방법은 두 가지가 있네요.



text에서 텍스트로 열심히 쓰는 방법과



design에서 좌측 팔레트에 나열된 아이템들을 끌어다 쓰고, 우측 properties에서 설정하는 방법이 있습니다.

사실 저는 처음 접할 때 design 쪽으로 쓰지 말라고.. text로 하라고 하였습니다. 이유는.. 잘 모르겠네요 ㅎㅎ;





어째저째하여 메인화면의 버튼 세 개를 만들었습니다.

지금보니 간격이나 그런게 중구난방이네요..ㅠ; 하지만 우선 기능 구현을 다 한 다음에 처언천히 미적인 부분을 가꾸어가려 합니다.



우선 아래 소스는 '등록'버튼의 text 코드입니다.


<Button
android:id="@+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:text="등록"
android:textSize="20dp"

android:drawableTop="@drawable/temp"

android:height="180dp"

android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"

android:layout_marginTop="350dp"

/> 


android:id="@+id/button_register"

버튼 아이템의 아이디를 button_register로 설정했습니다. html에서와 똑같이 아이디로 동작합니다.



android:text="등록"

버튼의 텍스트를 설정했습니다.



android:drawableTop="@drawable/temp"

drawableTop이란, 버튼 내에서 텍스트 위에 이미지를 넣겠다는 뜻입니다.

자매품으로 drawableBottom, drawableLeft, drawableRight, drawableStart, drawableEnd 등이 있습니다.

다른 건 다 그러려니 싶은데 Start와 End는 뭘까 싶어 확인해 보았습니다.



텍스트의 시작 혹은 끝에 이미지를 삽입한다는 뜻임을 알 수 있었습니다.



버튼에 이미지 삽입


1) drawable에 (원하면 새로 공간을 만들어서도 가능) 이미지를 넣습니다.

간단하게

이렇게 프로젝트의 위치에 들어가서 폴더 안에 이미지를 잡아넣으면 됩니다.

안드로이드 스튜디오에서 즉각 반영됩니다.

drawable폴더의 temp라는 이미지라는 뜻으로 코드를 작성합니다.



android:height="180dp"

버튼 아이템의 높이를 설정합니다. 너비를 설정하고 싶다면 height대신 width를 사용하면 되겠습니다.

dp는 안드로이드 스튜디오에서 사용되기도 하는..? 픽셀같은 단위를 나타냅니다.



android:paddingLeft="10dp"

패딩.. 내부 아이템을 겉 껍데기와 띄워주는 공간입니다. 패딩같습니다. 상하좌우 또는 단순히 android:padding=""으로 전체 설정할 수도 있습니다.



android:layout_marginTop="350dp"

전체 레이아웃에서 margin을 나타냅니다.

아이템이 전체 화면에서 top이 얼마나 띄워져있는가.. 뭐 그렇습니다. padding과 마찬가지로 android:margin=""으로도 설정할 수 있습니다.







버튼은 너무.. 간단하게.. 이정도는 일단.. 비주얼적으로는 기본입니다.

중요한 것은 Onclick, 즉 클릭 하므로써 수행되는 기능!

Intent!!

는 빠른 시일 내에 하려고 합니다.











//android button maker

http://angrytools.com/android/button/


버튼을 꾸밀 때 이쪽을 참고하셔도 좋을 듯 해요~

728x90
반응형
Comments