안드로이드 개발 Android Swipe Views를 생성해보자(Play Store 같은 UI) 관련

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: http://thdev.net/373

 

Android 3.0 부터 제공되는 Swipe Views와 Tabs + Swipe를 편리하게 생성하고 사용할 수 있습니다. 안드로이드에 적용된 가장 많이 볼법한 Swipe Views가 Play store입니다. 아래와 같은 화면 구성을 담고 있습니다.

 순서대로 상단에 Apps라고 적혀있는 부분이 바로 ActionBar 이고, 그 바로 아래 제목이 보이는 부분이 Title Strip 부분입니다. 그리고 

각 화면은 Fragment로 구성되어 있습니다. Swipe Views의 경우에는 Android 3.0 이전 버전에서도 동작을하지만 ActionBar를 사용해야 하는 Tabs + Swipe의 경우에는 3.0이상에서만 동작하게 됩니다.

 

 

 해당 Activity는 FragmentActivity라는 액티비티 위에서, "android-support-v4.jar" 라이브러리를 사용하여 동작하게 됩니다. Tabs + Swipe는 ActionBar가 동작하지 않는 3.0 버전 이전에서는 에러가나서 동작하지 않지만 Swipe Views의 경우에는 라이브러리를 통해서 동작하게 됩니다.

 

예제 코드 생성

 이번 글에서는 간단하게 FragmentActivity를 생성하고, 소스코드를 분석해보는것만 하려고 합니다. 다음 리뷰에서 Swipe Views 예제를 직접 생성해보도록 하겠습니다.

 Swipe Views의 예제코드를 생성하는 방법은 정말 간단합니다. Android SDK 최신버전을 설치하셨다면 "New Android Application"을 통해서 아주 쉽게 생성할 수 있습니다.

 우선 기본값을 통해서 생성을 진행해보겠습니다. 아래와 같이 Minimum Required SDK가 API 8: Android 2.2 (Froyo)가 지정되어 있고, Target SDK는 API 17: Android 4.2 (Jelly Bean)으로 지정되어 있습니다. 

 

 

그리고 모두 기본값으로 선태하고 마지막 New Blank Activity를 생성하기 직전 Activity Name과 Layout Name을 지정하는 부분에 Navigation Type을 선택할 수 있는 부분이 있습니다. 5가지의 Type을 기본적으로 생성할 수 있습니다.

5가지 Navigation Type

 - None : 기본값으로 Blank Activity가 생성

 - Tabs : ActionBar에 Tab이 추가된 FragmentActivity가 생성

 - Tabs + Swipe : 기본 Tab FragmentActivity에 Swipe(좌우 이동)이 추가된 화면 생성

 - Swipe Views + Title Strip : 제목만 있는 FragmentActivity 생성

 - Dropdown : ActionBar에 Dropdown 메뉴가 포함된 Activity 생성

 

 위와 같이 5개의 Activity를 생성할 수 있습니다. 정말 간단하게 FragmentActivity를 상속받는 4가지 형태의 Activity를 생성하여 예제코드를 작성할 수 있습니다. 여기서 중요한점이 있습니다. 처음에 이야기했듯이 ActionBar는 Android 3.0 이상에서 지원되고(추가되었고) 이전 버전에는 사용이 불가능합니다. 처음에 Minimum Required을 3.0 이상이 아닌 2.2 로 잡았기 때문에 아래와 같이 X 표시가 뜨게 됩니다. 해당 라이브러리는 API 11이상에서 지원된다고 합니다.

 

 

 다시 처음 화면으로 돌아와 API 11로만 변경하고 생성을 진행하면 됩니다.

 

 

오류 메시지 없이 선택이 가능하고, 생성을 할 수 있습니다.

 

 

 

 

 

 

 

반응형

 

 

 

 

728x90

 

 

 

 

 

 

 기본적으로 Project 생성을 완료했습니다. 계속 이야기하지만 Swipe Views + Title Strip의 경우에는 3.0 이전버전에서도 동작합니다. 가능은하지만 New Application Project에서는 거부하여 생성할 할 수 없습니다. minSdk 버전만 변경하시면 2.2 에서도 동작하고, 원하는 화면 그대로 표시가 됩니다. 단, ActionBar는 추가되지 않지만요.

 그냥 실행하면 Android Play Store에서 봤던 화면과 동일한 화면을 결과로 확인할 수 있습니다. 기본 3개의 페이지가 생성되게 됩니다.

 

 

android.support.v4.app.FragmentActivity API

   - Activity를 상속받는 FragmentActivity

   http://developer.android.com/reference/android/support/v4/app/FragmentActivity.html

android.support.v4.app.FragmentPagerAdapter API

   http://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html

Fragments API

   - API 11 (허니콤)부터 추가된 개념입니다. 더 자세한 내용은 아래쪽의 PPT를 참고해주세요.

   http://developer.android.com/guide/components/fragments.html

 

소스코드 분석 - FragmentActivity를 상속받는 class

해당 소스코드는 기본으로 생성되는 코드입니다. 모두 한페이지에서 제공되니 오늘은 간단히 뭐하는지만 살펴보겠습니다.

//FragmentActivity를 상속 public class MainActivity extends FragmentActivity { 	/* 	 * PagerAdapter을 생성합니다. 	 * PagerAdapter는 android.support.v4.app.FragmentPagerAdapter 	 * 를 상속받습니다. FragmentPagerAdapter는 v4 libs에 추가된 내용입니다. 	 */ 	SectionsPagerAdapter mSectionsPagerAdapter;  	//android.support.v4.view.ViewPager의 Custom Layout 	ViewPager mViewPager;  	@Override 	protected void onCreate(Bundle savedInstanceState) { 		super.onCreate(savedInstanceState); 		setContentView(R.layout.activity_main);  		mSectionsPagerAdapter = new SectionsPagerAdapter( 				getSupportFragmentManager());  		mViewPager = (ViewPager) findViewById(R.id.pager); 		mViewPager.setAdapter(mSectionsPagerAdapter);  	}  	@Override 	public boolean onCreateOptionsMenu(Menu menu) { 		getMenuInflater().inflate(R.menu.activity_main, menu); 		return true; 	}  	//PagerAdapter는 Fragment를 통해 각각의 페이지의 이름과 Fragment를 정의 	//이 페이지는 xml의 android.support.v4.view.ViewPager에 보여지게 된다. 	public class SectionsPagerAdapter extends FragmentPagerAdapter {  		public SectionsPagerAdapter(FragmentManager fm) { 			super(fm); 		}  		//각 position의 값에 따라서 각 화면을 정의한다. 		//여기서는 Bundle를 이용하여 position + 1한 값을 전송 		//Fragment의 View에서 1,2,3을 표시하게 된다. 		@Override 		public Fragment getItem(int position) { 			//각 화면은 Fragment로 구성된다. 			Fragment fragment = new DummySectionFragment(); 			Bundle args = new Bundle(); 			args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1); 			fragment.setArguments(args); 			return fragment; 		}  		//Fragment에 사용될 전체 페이지 수를 정의한다. 여기서는 3페이지 		@Override 		public int getCount() { 			return 3; 		}  		/*  		 * getPageTitle을 정의한다. 이 부분은 XML의 		 * android.support.v4.view.PagerTitleStrip에 뿌려진다. 		 * 제목은 모두 대문자로 변형되어 출력되고, String에 저장되어 있다. 		 */ 		@Override 		public CharSequence getPageTitle(int position) { 			switch (position) { 			case 0: 				return getString(R.string.title_section1).toUpperCase(); 			case 1: 				return getString(R.string.title_section2).toUpperCase(); 			case 2: 				return getString(R.string.title_section3).toUpperCase(); 			} 			return null; 		} 	}  	//각각의 Fragment를 만들게 된다. 	public static class DummySectionFragment extends Fragment { 		public static final String ARG_SECTION_NUMBER = "section_number";  		public DummySectionFragment() { 		}  		/* onCreateView를 통해 화면에 보여질 내용을 정리하게 된다. 		 * XML을 통해서 직접 작성할 수도 있다. 		 * 그리고 각각 페이지의 내용이 다르다면 각각의 Fragment와 별도의 XML을 가지면 된다. 		 */ 		@Override 		public View onCreateView(LayoutInflater inflater, ViewGroup container, 				Bundle savedInstanceState) { 			TextView textView = new TextView(getActivity()); 			textView.setGravity(Gravity.CENTER); 			textView.setText(Integer.toString(getArguments().getInt( 					ARG_SECTION_NUMBER))); 			return textView; 		} 	} } 

소스코드 분석 - activity Layout

<!--  	v4 libs에 포함된 ViewPager이다. 	기본적으로 LinearLayout로 동작한다. 	android.support.v4.view.ViewPager 이 정의는 변경할 수 없다. 	변경하실 것이라면 커스텀 Layout를 정의하셔야 합니다. 	--> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/pager"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity" >      <!--     Tabs의 경우에는 TitleStrip가 생성되지 않지만 Swipe Views는     PagerTitleStrip가 아래 처럼 생성된다.     -->      <android.support.v4.view.PagerTitleStrip         android:id="@+id/pager_title_strip"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_gravity="top"         android:background="#33b5e5"         android:paddingBottom="4dp"         android:paddingTop="4dp"         android:textColor="#fff" />  </android.support.v4.view.ViewPager> 

PPT - ActionBar와 Fragment

 아래 PPT는 Leonardo YongUk Kim - GDG Korea Android 모임의 운영진이신 직접 만들어주신 PPT자료입니다. 

 허락 받고 해당 글에 추가한 내용입니다. PPT 읽어보시면 도움이 많이 되실겁니다.^^

 원 글은 아래 Google+ GDG Korea Android 커뮤니티 페이지입니다.

    https://plus.google.com/101901704178116997887/posts/UdP4Z5Xq27p

 

Actionbar and fragment from Leonardo Kim

 

마무리

 간단하게 FragmentActivity를 상속받아서 Swipe Views를 변경하여 보았습니다. 본문에서도 계속 이야기 했던 부분인 minSDK는 변경하셔도 문제가 없습니다. 2.2에서도 동작하니깐요. 단 ActionBar를 사용하는 부분들은 별도의 오픈 소스를 사용하시거나, 직접 구현하셔서 사용하셔야 합니다. 위에 올려드린 PPT에 보시면 그 오픈소스 이야기도 나와있으니 참고하시면 됩니다. 오픈소스를 사용하시면 3.0 이전버전에서도 동작하게 됩니다. 이상으로 간단하게 Swipe Views를 생성하여봤습니다. 다음 글에서는 직접 Swipe Views를 구현해 보도록 하겠습니다.

 참고로 2.3.3에서 동작하는 모습

 

 

 

-------------------------------------------------------------------------------------------------

 

출처: http://thdev.net/375

 

지난 글에서 Swipe Views를 생성하는 방법과 기본적인 코드 동작방식을 설명한데 이어서 직접 예제를 작성해보았습니다. XML을 통한 UI구성이기 때문에 간단한 코드를 통해 Fragment를 상속받아 Swipe Views를 작성해보았습니다.

 Swipe Views의 기본적인 설명 글은 아래 글을 참고하세요.

    http://www.thdev.net/373

 

작성한 예제코드

 작성한 예제코드는 ActionBar를 사용하였기에 API 11(3.0)이상에서 동작합니다.

 Swipe Views를 생성하고, 각 페이지별로 Fragment 3개를 생성합니다. Fragment 별로 XML을 각각 불러오고 상황에 따라서 해당 Fragment에서 값을 처리합니다.

 각 페이지는 이전에 작성한 예제들과 웹뷰를 구성하였습니다. 웹뷰는 추후 별도의 글로 작성하고, 아래 기존예제를 참고하여 Swipe Views를 작성하였습니다.

 확장 리스트 뷰 작성 : http://www.thdev.net/368

 Parcelable 인터페이스 구현 : http://www.thdev.net/364

 

예제 코드

SectionsPagerAdapter.java

 - 각 페이지별로의 getItem을 처리하였습니다. 각각의 Fragment를 상속받는 클래스를 리턴하게 되며, Item별로 제목을 리턴하게 됩니다.

public class SectionsPagerAdapter extends FragmentPagerAdapter { 	Context mContext;  	public SectionsPagerAdapter(Context context, FragmentManager fm) { 		super(fm); 		mContext = context; 	}  	@Override 	public Fragment getItem(int position) { 		// getItem is called to instantiate the fragment for the given page. 		// Return a DummySectionFragment (defined as a static inner class 		// below) with the page number as its lone argument. 		switch(position) { 		case 0: 			return new ExpandableMainFragment(mContext); 		case 1: 			return new ParcelableExample(mContext); 		case 2: 			return new WebViewMainFragmnet(mContext); 		} 		return null; 	}  	@Override 	public int getCount() { 		// Show 3 total pages. 		return 3; 	} 	 	@Override 	public CharSequence getPageTitle(int position) { 		// TODO Auto-generated method stub 		switch (position) { 		case 0: 			return mContext.getString(R.string.title_section1).toUpperCase(); 		case 1: 			return mContext.getString(R.string.title_section2).toUpperCase(); 		case 2: 			return mContext.getString(R.string.title_section3).toUpperCase(); 		} 		return null; 	}  } 

Fragment를 상속받는 Class의 View 처리 - 확장 리스트 View 처리 부분

 - XML을 통한 처리를 하였기에 아래와 같이 간단한 코드가 만들어집니다.

 - View를 return 하여 처리하게 됩니다.

 - FragmentPagerAdapter의 getItem을 처리하면 아래의 onCreateView가 실행되게 됩니다. View는 직접 만들어도 되고, layout를 생성하여 만들어도 됩니다.

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 	Log.v("ExpandableMainFragment", "create"); 	View view = inflater.inflate(R.layout.page_one_expandablelistview, null); 	 	mList = (ExpandableListView)view.findViewById(R.id.expandableListView); 	mList.setAdapter(new ExpandableAdapter(mContext, createData()));  	return view; } 

결과 화면

 3개의 Fragment로 구성하여 아래와 같은 결과물을 적용하였습니다. 첫 번째 페이지는 확장 리스트 뷰, 두 번째 페이지는 Parcelable, 마지막 페이지는 웹뷰를 구성하였습니다. 모두 Fragment를 통한 구성이기에 간단한 예제로 작성이 마무리 되었습니다. ActionBar 부분은 Parcelable 페이지 전환시에만 확인이 가능합니다. 그렇기에 3.0 이상에서만 확인이 가능합니다.

 

 

 

 

소스코드 다운로드

  http://db.tt/dGZ5ckDq

 

 

 

 

 

=================================

=================================

=================================