티스토리 뷰


위와 같은 레이아웃을 처리 하는 경우 별도 이미지를 받아 백그라운드 이미지로 적용 할 수도 있지만 위와 같이 간단한 레이아웃은 별도의 이미지 없이도 xml로 처리 할 수 있습니다.


일반적인 border처럼 설정 해 처리 하면 되지만 위와 같이 처리 할려면 top,bottom,left,right중 특정 부분을 가려 주어야 합니다. 아래의 옵션을 추가 해주면 해당 부분을 가려 주어 원하는 형태로 xml를 디자인 할 수 있습니다.


android:top="-1dp"     //위쪽
android:bottom="-1dp"  //아래쪽
android:left="-1dp"    //왼쪽
android:right="-1dp"   //오른쪽


1.non_select_border.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#f2f2f2" />
        </shape>
    </item>
  
    <item  android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1.0dp"
                android:color="#3a94e8" />
        </shape>
    </item>
</layer-list>
cs



2.select_border.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item  android:bottom="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="0.5dp"
                android:color="#3a94e8" />
        </shape>
    </item>
</layer-list>
cs


3.실제 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
   <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"    
         android:orientation="horizontal" 
         android:layout_gravity="center"
         android:gravity="center"
         >        
         <TextView
             android:layout_width="0dip"
             android:layout_height="45.0dp"
             android:layout_weight="1"
             android:text="테스트1"
             android:gravity="center"
             android:textSize="14sp"
             android:textColor="#3a94e8"
             android:background="@drawable/non_select_border"
             />
         <TextView
             android:layout_width="0dip"
             android:layout_height="45.0dp"
             android:layout_weight="1"
             android:text="테스트2"
             android:gravity="center"
             android:textSize="14sp"
             android:textColor="#999999"
             android:background="@drawable/select_border"
             />
    </LinearLayout>
cs


댓글