안드로이드(Android) 3.2 이상에서 앱의 설정부분을 폰/태블릿에 적합하게 보여주자..

이제는 많은 안드로이드 앱들이 한 바이너리에서 폰과 태블릿 UI를 화면에 맞게 지원하기 시작했고, 이와 더불어 설정 화면도 폰과 태블릿을 한꺼번에 지원할 수 있도록 안드로이드 개발 사이트에서 가이드를 하고 있다. 안드로이드의 설정 부분에 대한 가이드는 http://developer.android.com/guide/topics/ui/settings.html 에서 볼 수 있고, 폰 전용, 폰과 태블릿 그리고 태블릿 전용으로 적합한 설정화면을 어떻게 나타내야 하는지를 쉽게 배울 수 있다.

우선 대표적인 안드로이드 앱인 GMail 앱이 어떻게 폰과 태블릿을 지원하는지 살펴보자. 아래의 왼쪽 화면은 폰 버전의 설정화면이고, 우측이 태블릿의 설정화면이다. GMail 앱은 구글의 서비스인 만큼 안드로이드 가이드를 매우 충실히 따르고 있고, 가장 좋은 레퍼런스 중의 하나이다.

하지만 위 GMail 앱의 폰 UI는 한번 더 들어가야 실제 설정화면을 볼 수 있어서, 개인적으로 폰에서는 좋은 UI가 아니라고 생각한다. 그리고, 많은 안드로이드 앱이 설정(Settings) 메뉴를 클릭하면 바로 설정에 관한 내용을 보여 주고 있는데, 이게 태블릿에서 보면 좋아 보이지 않는다.

그래서, 폰과 태블릿의 UI 가이드를 따르면서, 기존의 GMail 앱과는 다른 UI를 사용해 보는게 어떨까 한다. 아래는 예제 프로그램에서 보여지는 설정 부분의 메뉴화면이다.

그래서, 폰과 태블릿에서 확인하면..
아래처럼, Settings 화면에서 폰과 태블릿의 다른 UI를 확인할 수 있다.

 

위의 옵션 메뉴는 동일하게 보여지기 때문에, 아래의 menu>main.xml에서 동일한 코드로 구성을 한다.

그리고 각 설정화면은, PreferenceFragment를 상속하고 있는 클래스(AboutPreferenceFragment, SettingPreferenceFragment)에서는 xml> 디렉토리에 있는 about_preference.xml과 settings_preference.xml을 사용해서 각 화면을 처리한다.

촤측의 이미지에서, 태블릿(sw720dp는 10.1인치, sw600dp는 7인치를 표현)을 처리하기 위한 코드는 SettingsActivity.java에서 구현을 하고 있다. 이 클래스의 내용은 간단하게, xml 헤더가 없으면(폰 UI), SettingPreferenceFragment를 android.R.id.content에 바인딩해서, 폰 UI를 표현한다.

 

 

 

 

package net.sjava.ex.preference;

import java.util.List;

import android.os.Bundle;
import android.preference.PreferenceActivity;
import net.sjava.ex.preference.R;
import net.sjava.ex.preference.fr.SettingPreferenceFragment;

public class SettingActivity extends PreferenceActivity {
	static final String TAG = SettingActivity.class.getSimpleName();

	@Override
	public void onBuildHeaders(List<Header> target) {		
		try {
			if (getResources().getIdentifier("settings_header", "xml", getPackageName()) <= 0)
				return;

			loadHeadersFromResource(R.xml.settings_header, target);
		} catch(Exception e) { }
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	

		if(!hasHeaders())
			createTransaction().replace(android.R.id.content, new SettingPreferenceFragment()).commit();
	}

	protected android.app.FragmentTransaction createTransaction() {
		return getFragmentManager().beginTransaction();
	}
}

소스코드는..
cfile21.uf@27489E4151E6D981039453.zip이 UI/UX는 안드로이드 공식 UI 가이드를 정확하게 따르지는 않지만, 폰과 태블릿을 한꺼번에 지원하는 세팅메뉴에서 한 번은 생각해 볼 만한 이슈라고 생각한다. 개인적으로, 이 UI가 더 좋다고 생각한다.

안드로이드(Android) 3.2 이상에서 앱의 설정부분을 폰/태블릿에 적합하게 보여주자..”에 대한 2개의 생각

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.