요즘 Tab을 이용한 앱 구성이 많이 활발해졌습니다. 페이스북이나 인스타그램, 카카오톡만 해도 탭 버튼을 이용한 화면 구성 법을 사용하고 있습니다. 이 앱들의 소스코드에서는 어떤 방식으로 Tab을 구현하였는지는 알지 못하나 저희도 Tab을 쉽게 구현 할 수 있다는 것은 확실합니다!
[그림 1] 카카오톡과 인스타그램의 탭 버튼 구성
Tab버튼을 구성하는데는 여러가지의 방법이 있습니다. 이 포스팅에서는 아래 그림과 같이 Activity의 버튼(보여줄 화면의 수 만큼)과 나머지 영역에 framLayout이라는 위젯을 배치하여 전체적인 레이아웃을 구성하고, 버튼 선택 시framLayout에 원하는fragment를 띄우는 방식으로 구현할 것 입니다.
[그림 2] FrameLayout과 button을 이용한 탭 버튼 구성
2. 소스코드와 구현화면
[그림 3] 구현 화면
[그림 4] 소스 리스트
핵심**activity_main.xml :탭 버튼과 프레임레이아웃 구성
핵심**MainActivity.class :탭 버튼 클릭을 통해 프레임레이아웃에 프래그먼트를 띄움
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class Fragment1 extends Fragment {
public Fragment1() { // Required empty public constructor }
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_fragment1, container, false); }
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class Fragment2 extends Fragment {
public Fragment2() { // Required empty public constructor }
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_fragment2, container, false); }
}
# 참고 사항
본 포스팅 내용은'탭 뷰'구현에 있어서 항상올바른 방향을 제시하는 것은 아님을 미리 말씀드립니다.
개발 목적에 따라 다르며오픈소스를 참고하여 '탭 뷰'를 구현하는 것도 시도해 보시길 추천합니다.
2. 화면에 출력시킬 drawable 파일에서는 이미지를 보통 1개만 사용 (꽉찬 이미지) 하므로
장치별로 보여줄 이미지를 크기에 맞게 만들어 두어야 합니다.
사용할때는 @mipmap 를 이용합니다.
- @drawable/bg_splash (x)
- @mipmap/bg_splash (o)
* 디렉토리별 화면 크기 (pixel) (\app\src\main\res\)
mipmap-hdpi : 480*800 // 171 px
mipmap-xhdpi : 720*1280 // 256 px
mipmap-xxhdpi : 1080*1920 // 384 px
mipmap-xxxhdpi : 1440*2560 // 512 px (로고가 512px 의 경우 위 주석값으로 맞추면 됨)
위 기준으로 만든 이미지를 각 디렉토리에 넣어둡니다.
=========================
예전에안드로이드 로딩 화면 구현하기에 대해 포스팅한 적이 있다. 같은 내용에 대해 다시 글을 작성하는 이유는 보다 나은 방법을 알게 되었기 때문이다.
기존의 구현
위의 포스팅을 확인해보면 알겠지만, 기존에 사용했던 방법은 핵심은 로딩 화면에서Handler.postDelayed를 이용하여 일정 시간의 지연을 주는 것이다. 이러한 구현 방법에 대해 사용자의 입장과 개발자의 입장에서 다시 한번 고민할 필요가 있다.
1. 일정 시간의 기준?
로딩 화면 지연을 위한 ‘일정 시간’의 기준은 없다. 사용자는 로딩 화면이 띄어질 때 무엇을 하고 있는지 알 수 없으며 알고 싶지 않을 수도 있다. 즉, 앱을 실행할 때마다 ‘일정 시간’을 로딩 화면을 보면서 시간 낭비한다고 생각할 수도 있겠다.
2. 안드로이드 앱의 Cold Start?
Cold start란 기기 부팅 후 앱이 처음 실행되거나 시스템에서 종료한 후에 앱을 시작하는 것을 말한다. 안드로이드는 특히 cold start 시동에 약간의 시간이 걸린다. 만약 기존의 방법으로 구현하는 경우, 아래의 이미지와 같이 빈 화면이 먼저 나타나고 나서야 로딩 화면이 보이게 된다.
개선된 구현
개선된 구현의 핵심은 splash activity(로딩 화면)에 대한 layout 파일을 사용하지 않고 background theme를 이용하는 것이다.
