안녕하세요. 


보통  다른  언어에서  버튼은  버튼만 써야 하죠. 

나만의 버튼을 만들기 위해서는  기본 버튼을 상속해서  커스터마징 하거나 해야 하죠. 




안드로이드는 재미 있는 것이  Button 안 써도  거의 모든  UI 아이템이 버튼처럼 사용이 가능하답니다.


TextView 던  ImageView 던  심지어  Layout 도....<LinearLayout<LinearLayout


원하는 아무것이나  이쁘게 만드시고,  

해당  아이템의 xml 파일에  


android:clickable="true"


태그만 추가하시면  다 되는  놀라운 기능이 있답니다.^^



추가로  백그랑운드에 selector 하나만 추가하면  완벽한  버튼이 된답니다. 



오히려 버튼을 커스터마이징 하는 것보다  훨씬 간단하게   원하는 모양을 만들 수가 있답니다. 



------------ 추가된 내용입니다. ------


버튼은 쉽게 사용할 수 있는 곳 까지 버튼을 쓰지말자는 것이 아니구요. 

버튼이 편할 때는  그냥 버튼을 쓰면 되구요. 


그렇지 않은 경우는  버튼이 아니더라도 방법이 많다는 것이랍니다. ^^

최대한 코딩을 쉽게하자는 거죠. 



아래 예는  저희 디자이너가 준 버튼의 예제 랍니다.


btn_exam01.png


위 점선 부분 전체가 눌려야 하구요.  눌리면 회색 계열로 전체가 반전됩니다. 

옆의  PHOTOS는  멀티 랭기지 지원해야 하기 때문에   이미지로 박으면 안됩니다. 


물론  ImageButton을  잘  활용하면 만들수 있겠죠. 


btn_exam02.png


또 다른 예 인데요.   

오른쪽의 아이콘이 있는데요.   (어떤 버튼은  아이콘이  왼쪽으로 가기도 합니다.)  


누를 때 배경도 바뀌지만  아이콘도 바뀌어야 한답니다. 

이런류의 버튼의 여러개 있고,  title 도  바뀌구요. 



이런것을  단순히 이미지 3~4개로 미리 만들어서   ImageButton을 사용하려면 좀 그렇죠. 


더군다나  안드로이의폰 의 다양한 해상도 때문에  9패치 이미지만으로  처리가  깔끔하지가 않더군요. 



그래서 그냥 layout 로 처리 해 버렸습니다. 


 <LinearLayout
    android:id="@+id/main_photo" 
    android:layout_below="@+id/line_photo"
    android:background="@drawable/text_button_background"
    android:clickable="true"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true">
    <RelativeLayout
     android:layout_weight="4"
     android:layout_width="fill_parent"
        android:layout_height="fill_parent">
     <ImageView
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:padding="10dp" 
         android:src="@drawable/icon_photo" 
         android:layout_alignParentRight="true" 
         android:layout_centerVertical="true"/>
    </RelativeLayout>
    <TextView 
     android:layout_weight="2"
     android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="10dp"
        android:textSize="32sp" 
        android:text="@string/photos" 
        android:textColor="@color/text_gray"
        android:gravity="center_vertical">
    </TextView> 
   </LinearLayout>

위  xml 은  layout 파일에서   첫번째 이미지 버튼의 해당하는 부분입니다.

icon의  위치 글자 위치/크기등  마음대로  xml에서 조절이 가능합니다.

 

버튼처럼  눌려지는 부분과  눌려지는 효과를 보이 부분은   맨 바깥쪽의  LinearLayout  에 지정해 두었습니다.

 

 

눌리는 효과에 해당하는  text_button_background.xml 을  drawable 에 만들어 두고요.

 

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:drawable="@drawable/background_check" />
    
    <item android:drawable="@drawable/background_uncheck" />
</selector>

효과에 해당하는 파일을  9패치 파일로 2개 만들어 두었습니다.

 

 

실제 코드 상에서는  Button 사용할 때 와 동일하지만, 

선언만  View 또는  아이템 형식  LinearLayout 으로  만들어서 사용하면 된답니다.

 

 private View  mViewPhotos;

... 중간 생략  
mViewPhotos = findViewById(R.id.main_photo);
mViewPhotos.setOnClickListener(mPhotosClickListener);
 
 
private OnClickListener mPhotosClickListener = new OnClickListener() {
  @Override
  public void onClick(View v) {
   //  버튼 눌렀을 때 작업할 것을 작성
  }
  
 };

 

이렇게 하면  xml 레이아웃을 원하는 대로 바꾸면서  만들 수가 있답니다.

 

 

감사합니다.

 

 

 

 

이 게시물을