Guideline (RedLine)

PDF 파일을 참조하여서 RedLine에 맞게 화면을 설정해 봅시다

일단 디자인에서 글씨 폰트를 변경하라고 되어있습니다

1

android:fontFamily="sans-serif-condensed"

TextView에 다음과 같이 적어주면 폰트를 변경할 수 있습니다

폰트 크기도 22sp, 14sp라고 적혀있습니다

1
2

android:textAppearance="?android:textAppearanceLarge"
android:textAppearance="?android:textAppearanceSmall"

다음과 같이 적으면 대략 22sp, 14sp와 비슷한 크기가 됩니다

현재 아이템에서 이미지 쪽을 보면 60dp 사이즈에 가운데 이미지가 표시 되어있습니다
FrameLayout을 이용해서 60dp사이즈를 사용해서 크기를 설정해주고 이미지 배치합시다

1
2
3

<FrameLayout
	android:layout_width="60dp"
	android:layout_height="wrap_content">

날짜 / 날씨 설명을 표시하는 부분과 온도를 표시하는 부분은 dp로 설정하지 않고 비율 계산으로 합니다
175 : 125이닌깐 7:5로 해주면 됩니다

1
2
3
4

<LinearLayout
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:layout_weight="7"

1
2
3
4
5

<LinearLayout
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:layout_weight="5"
	android:layout_gravity="center"

이제 남은 화면들도 RedLine에 맞게 수정을 해줍시다

좀더 효과적인 도구가 있습니다

(폰) 설정 - 개발자 옵션 - 레이아웃 범위 표시 하면 모든 뷰의 패딩과 마진과 같은 경계선을 볼 수 있습니다

R.attr
Typography
Color

연습

• 나머지 화면들을 수정하세요
• 정답

어느정도 RedLine과 비슷하게 했지만 더 수정하고 싶은 부분이 생기기 마련입니다

Tablets에서 세로 모드로 봤을때는 또 화면을 하나로 유지해도 괜찮은 UI 일수도 있습니다
Tablets으로 시작할때 오늘 날짜가 자동으로 선택 되도록 해야하는 방법도 좋은 방법입니다

정답은 없습니다 본인의 Application을 자유롭게 수정을 하고 좀 더 사용하기 좋은 앱으로 만드세요

Accessibility

앱이 얼마나 접근성이 좋은지 평가하려면 Accessibility Developer Checklist가 있습니다

설정에서 접근성을 보면 여러가지가 있습니다
캡션, 확대동작, 글꼴크기, 디스플레이크기등이 있습니다

우리가 더 자세하게 알아볼것은 TalkBack 입니다
시각장애우 분들이나 저 시력자 분들을 위해서 음성안내를 도와주는 Application 입니다
우리앱에서 적용을 해봅시다

ImageView에 content description을 추가해 주는 것이 좋습니다

1
2
3
4
5

// DetailFragment.onLoadFinished()
mIconView.setContentDescription(description);

// ForecastAdapter.bindView()
viewHolder.iconView.setContentDescription(description);

Custom View

Creating Custom Views

표준 위젯 라이브러리를 알면 좋지만 표준 위젯 라이브러리로 표현이 힘들고 어려울 경우에는 Custom View를 제작하고 만들어야 합니다

우리가 만드는 Application 에서는 Custom View를 쓰지는 않습니다 하지만 알고는 있어야 합니다
우리는 언제 사용할지 모르기 때문입니다

MyView라는 Custom View를 만듭니다

MyView는 View 또는 SurfaceView 를 상속받아서 구현해야합니다

View는 가볍고, 캔버스 방식입니다
SurfaceView는 특별히 UI요소를 지원하도록 디자인 되어서 3D 그래픽이나 Open GL을 사용해서 빨리 그릴 수 있도록 합니다

View를 이용해서 100*100 빈 상자를 그립니다 이것을 바꾸려면

1

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

handler를 Override해서 뷰 크기를 정할 수 있습니다

1

protected void onDraw(Canvas canvas)

onDraw()도 Override해서 뷰의 내용을 그립니다
onMeasure()는 부모 뷰가 자식 뷰를 만들 때 호출됩니다

특정한 높이나 너비를 정할 수 있지만 대부분의 경우 match_parent 또는 wrap_content 를 많이 사용합니다

1
2
3
4
5
6
7

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
	int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);
	int myHeight = hSpecSize;

	if (hSpecMode == MeasureSpec.EXACTLY) {

여유 공간을 계산을 해서 어떤 크기로 뷰를 설정할지를 알 수 있습니다

1

setMeasuredDimension(myWidth, myHeight);

setMeasuredDimension() 메서드를 이용해서 반영될 크기를 결정합니다

사실 여기서 부터는 추가사항입니다 안해도 괜찮습니다

우리는 Compass을 만들어서 바람이 오는 방향을 표시해 봅시다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

public class Compass extends View {
    public Compass(Context context) {
        super(context);
    }

    public Compass(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public Compass(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

	@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// 내용생략
	}

기본 준비는 다했으니 실제로 뷰 내용을 그려봅시다

1
2
3

@Override
protected void onDraw(Canvas canvas) {
}

Android에서 Canvas는 매우 일반적이고 단순합니다
아래의 그림위에 계속 그리는 형식으로 반복됩니다
Canvas와 Paint에는 다양한 브러쉬가 있습니다

선, 사각형, 원형, 컬러 텍스트, 패턴, 그라데이션, 이미지 등의 도구도 풍부합니다
또한 이동, 회전, 확대, 축소 하는 기능도 제공합니다
밑에 글을 참조해서 멋있는 UI를 그려보세요

Canvas and Drawables
Custom Drawing

Paint 객체의 생성과 소멸이 빈번하고 GC 때문에 UI의 프레임이 떨어지는 현상을 보실수도 있습니다
onDraw에서 최적화를 통하여 UI 표시에 문제가 없도록 해야합니다

onDraw를 완성하고 xml의 추가를 할때는 패키지 이름을 포함해서 사용하면 됩니다

1
2
3

<패키지명.Compass
	android:layout_width="..."
	android:layout_height="..."/>

Custom View의 마지막 단계는 interactive의 추가입니다
사용자 입력이 대표적인 예 입니다

키입력, 트랙볼 움직임, 화면 터치 이벤트등 이 모두에 해당하는 event handler를 Override해서 할 수 있습니다

MotionEvent 문서를 참고하여서 여러분 스스로 완전한 interactive Custom View를 완성해 보세요

복습은 필수

• View & ViewGroup
• Responsive Design
• Fragment
• UI
• Accessibility
• Custom Views