ImageView의 가장자리를 라운처 처리하는 방법
http://stackoverflow.com/questions/1705239/how-should-i-give-images-rounded-corners-in-android
만들다가 에러가 나면 이걸보면 거의 해결
BItmap 클래스 관련 정보
[ 해결 ]
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
///////////////////////////////////
출처: http://blog.naver.com/PostView.nhn?blogId=bulseek&logNo=100152719667아이폰에 비해 안드로이드는 구글이 지향하는 바 처럼 디자인이 투박하다.
아이폰에서는 어느정도 디자인된 모듈을 제공함으로서 기본 컨트롤만 사용해도
어플을 배포하는데는 지장이 없다. 하지만 안드로이드는 기본 디자인으로
배포하기에는 뭔가 아쉽다. 개발하는 입장에서 자기 자식이나 마찬가지인
어플을 세상에 보여줄 때 이쁘게 치장해 보여주고 싶은 것이 인지상정이다.
이번에 소개할 것은 컨트롤에 라운드를 주는 작업이다. 직사각형이 아닌 모서리가
깍인 라운드만 주더라도 그렇게 딱딱해 보이지 않는다. 이작업을 하는 것이
Shape Drawable 이다. drawable 폴더에 shape xml 태그를 작성해 넣으면 되는데
shape 태그의 속성들은 다음과 같다.
shape 태그에서 shape 값은 line과 oval 이있는데 line 은 간단하게 선을 만들며
oval 은 타원형 형태로 만들어진다. 아래는 TextView 를 테스트 해본 그림이다.
테스트 결과 corners 의 속성값에 영향을 받지 않는다.
1 | <TEXTVIEW android:id="@+id/txt_real" android:layout_width="fill_parent" android:layout_height="150dp"android:background="@drawable/rounded_corner1" android:text="" android:textColor="#ff330000"android:padding="20dp" /> |
rounded_corner1.xml
1 | <?xml version="1.0" encoding="UTF-8"?> |
3 | <SOLID android:color="#ff99cc00" /> |
4 | <CORNERS android:radius="15dip" /> |
5 | <PADDING android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> |
shape 에 line 을 넣었을 때다. line 셋팅시 한줄의 라인을 표시하는 것이다.
dashWidth 값을 주어서 점선으로 표현하였다.
rounded_corner1.xml
1 | <?xml version="1.0" encoding="UTF-8"?> |
3 | <STROKE android:color="#ffffffff" android:width="2dp" android:dashWidth="2dp" android:dashGap="2dp" /> |
shape 속성값을 알아보았으니 이제 shap 내에 들어가는 태그 값들에 속성을 알아본다.
solid : 단색으로 채워 넣는다.
stroke : 테두리를 그린다. 점선은 dashWidth, dashGap 사용한다.
corners : 가장자리를 round 처리한다.
padding : 패딩처리를 한다.
gradient : solid 대신 gradient 효과를 주기 위해 대체되는 속성
위의 속성값을 이용해서 TextView를 꾸며 보았다. 밋밋한 형태보다 테두리를 두르고
Border 색깔을 주니 기본 형태보다는 좋은 것 같다. 각진 형태를 없애기 위해 라운드를
주고 stroke 속성값을 통해 TextView의 테두리를 주어서 좀더 보기 좋게 표현하였다.
1 | <?xml version="1.0" encoding="UTF-8"?> |
3 | <SOLID android:color="#ffddffd9" /> |
4 | <STROKE android:color="#ff0066cc" android:width="4dp" /> |
5 | <PADDING android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> |
6 | <CORNERS android:radius="4dp" /> |
다음은 구글에서 그라디에이션을 적용한 예제이다.
2 | <GRADIENT android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="45" /> |
3 | <PADDING android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> |
4 | <CORNERS android:radius="8dp" /> |
drawable xml 값을 컨트롤에 적용하기 위해서 xml background 를 사용하였는데
이것을 소스에서 적용하고 싶다면 다음과 같이 사용하면 된다1 | Resources res = getResources(); |
2 | Drawable shape = res.getDrawable(R.drawable.rounded_corner1); |
3 | TextView tv = (TextView)findViewById(R.id.txt_real); |
4 | tv.setBackgroundDrawable(shape); |
TextView 는 조금만 더 다듬는다면 shape 속성값으로 원하는 디자인이 나올 것
같은데 일반 버튼이나 TextEdit 는 형태 자체를 없애버리므로 TextEdit 인지 button 인지
구분이 가지 않는다.
그래서 나름대로 버튼을 개선해보기로 했다. 먼저 Button 컨트롤은 주위에 테두리를 주고
마우스를 클릭했을 때 색깔이 바뀌는 걸로 해보자.
이 내용도 위와 비슷하며 단지 차이가 있다면 selector 태그를 이용해 버튼 이벤트에 따라
적용되는 내용이 달라진다는 것이다. xml 설정값에 보면 포커스가 갔을 때, 눌렀을때,
기본값일 때 등으로 나눠 져 있는 것을 볼수 있다. 색깔값은 values/strings.xml 에
지정해 두었다. 위저드를 이용할 경우 Color 를 선택해 색깔값을 넣고 저장하면 된다.
버튼에 적용된 xml 설정값이며 drawable 폴더에 들어가 있어야 한다. 아래 xml 을 적용하기
위해서는 android:background=”custom_button” 같이 하면 된다.
custom_button.xml
01 | <?xml version="1.0" encoding="utf-8"?> |
03 | <ITEM android:state_pressed="true"> |
05 | <GRADIENT android:startColor="@color/yellow1" android:endColor="@color/yellow2"android:angle="270" /> |
06 | <STROKE android:color="@color/grey05" android:width="3dp" /> |
07 | <CORNERS android:radius="3dp" /> |
08 | <PADDING android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> |
11 | <ITEM android:state_focused="true"> |
13 | <GRADIENT android:startColor="@color/orange5" android:endColor="@color/orange4"android:angle="270" /> |
14 | <STROKE android:color="@color/grey05" android:width="3dp" /> |
15 | <CORNERS android:radius="3dp" /> |
16 | <PADDING android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> |
21 | <GRADIENT android:startColor="@color/blue25" android:endColor="@color/blue2" android:angle="270"/> |
22 | <STROKE android:color="@color/grey05" android:width="3dp" /> |
23 | <CORNERS android:radius="3dp" /> |
24 | <PADDING android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> |
적용한 결과 화면이다. 디자인 감각이 조금더 있었으면 좀더 보기 좋았을 텐데
아쉽다. 하다보면 좋아지겠지라는 막연한 믿음을 가지고 디자인은 여기까지 ㅋ
//////////////////////////////////////////////////////////////////////////////////////
코드가 에러가나면 태그를 모두 소문자로 바꾸어 주세요.
