대협의 ETF 투자분석

액션바 taps+swipe에서 잠시 언급했던 fragment에 대해 이번엔 정리해 보도록 하겠습니다.

안드로이드 플랫폼 3.0 버전인 허니컴Honeycomb부터 큰 화면의 태블릿을 위해 도입된 대표적인 컴포넌트가 프래그먼트(Fragment)와 액션바(ActionBar)입니다.그 중 액션바는 이전 게시판에서 이야기했으니 오늘은 프래그먼트에 대해서입니다.

만약 스마트 폰 앱을 개발할 때 세로모드(Portrait)에서는 단순하게 화면을 구성하지만 가로모드(Landscape) 화면 구성을 좀더 다양한 화면으로 구성 하고 싶다면 어떻게 할지 고민할 수 있습니다. 또는 해상도나 디바이스의 스크린크기, 디바이스 종류에 따라서 보여지는 것들을 다르게 구성하고 싶어할 수도 있습니다.

안드로이드에서는 이러한 요구사항을 만족시켜줄 수 있는 것을 fragment라는 개념으로 추가하게 되었습니다.

안드로이드 3.0이전 버전에서는 한 화면에 보이는 모든 것을 관장하는 것이 Activity라는 개념이였는데 이러한 Activity는 하나의 화면에 여러개 사용할 수 없게 설계가 되어있습니다.

그러나 하나의 액티비티로 상호작용하는 것은 큰 화면의 기기에서 비효율적이며 자원 낭비가 심하고 또한 일부 화면을 위한 자원을 재사용할 수 없고, 다양한 내용을 표시하려면 구성이 매우 복잡했습니다.

그래서 하나의 화면에 Activity와 비슷한 개념을 가지면서도 여러가지 화면을 넣을 수 있는 방법으로 fragment가 등장하게 되었습니다. 

1) 프래그먼트는 액티비티 조각 혹은 서브액티비티(subactivity)

2) 하나의 액티비티에서 다수의 프래그먼트를 결합하여 다중 패널multi-pane UI를 생성할 수 있음

3) 여러 액티비티에서 하나의 프래그먼트를 재활용 가능

4) 프래그먼트 자신만의 생명주기 가짐

5) 입력 이벤트를 받아들이며, 액티비티가 실행하는 동안 동적으로 추가 혹은 삭제 가능

6) activity 안에서만 존재할 수 있고 단독으로 존재할 수 없다.

7) activity 안에서 다른 view와 함께 존재 가능

8) back stack을 사용가능

9) 반드시 default 생성자 존재

애플리케이션을 태블릿과 핸드셋에 모두 지원하도록 설계하고자 한다면 화면의 사이즈에 따라 최적의 UX을 맛볼 수 있도록 프래그먼트를 다양한 레이아웃 구성에 재사용할 수 있습니다.

작은 화면사이즈 기기에는 하나의 액티비티에 하나의 프래그먼트를 사용하는 1-패널 UI를 제공하고, 태블릿과 같은 큰 화면사이즈 기기에서는 2개의 프래그먼트를 하나의 액티비티에 조합하여 2-패널UI를 제공하면 됩니다. 

● 활성resumed 상태 : 실행 중인 액티비티에서 프래그먼트가 보이는 상태

● 중지paused 상태 : 다른 액티비티가 포그라운드 상태이며 포커스를 가지고 있지만 프래그먼트가 거주하는 액티비티가 여전히 보이는 상태

● 정지stopped 상태 : 프래그먼트가 보이지 않는다. 호스트 액티비티가 정지되거나 프래그먼트가 액티비티에서 제거되고 백스택에 추가되어 있는 상태 정지된 프래그먼트는 여전히 살아 있어 모든 상태와 멤버 정보가 시스템에 보관되어 있으나 사용자에게 더 이상 보이지 않고 액티비티가 종료되면 프래그먼트도 같이 종료됨

아래 소스에서 사용한 메소드는 onActivityCreated,onResume,onPause, onCreateView정도여서 http://blog.saltfactory.net/190 의 설명을 인용하도록 하겠습니다.

● onAttach()

onAttach() 콜백 메소드는 fargment가 activity에 추가되고 나면 호출된다. 이때 Activity가 파라미터로 전달되게 된다. Fragment는 Activity가 아니다. 다시말해서 Activity는 Context를 상속받아서 Context가 가지고 있는 많이 있지만 Fragment는 android.app 의 Object 클래스를 상속받아서 만들어진 클래스이다. 그래서 Fragment에서는 Context의 기능을 바로 사용할 수 없다. 뿐만 아니라 Fragment는  Activity 안에서만 존재하기 때문에 Activity를 onAttach() 콜백으로 받아올 수 있다.

 public void onAttach(Activity activity) {
      super.onAttach(activity);
 }

 	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}

	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	                Bundle savedInstanceState)
	{
	        view = inflater.inflate(R.layout.table, container, false);
	        return view;
	}

    public void onActivityCreated(Bundle savedInstanceState) {
    	//Log.d(TAG,"onActivityCreated");
	    super.onActivityCreated(savedInstanceState);
    }

    public void onStart(){
    	super.onStart();
    }

	public void onResume() {
		super.onResume();

		⁄⁄mStatus.setText("현재 상태 : 서비스 시작");
		cellwidth = new int[5];
		desity = this.getResources().getDisplayMetrics().density;
		appendHeader();
		appendRowBlank();
		datainfo = selectData();
		appendRow(datainfo);	
		ViewTreeObserver vto = headerView[0].getViewTreeObserver();
		vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
		  @SuppressWarnings("deprecation")
		@Override
		  public void onGlobalLayout() {
		    ⁄⁄Log.d(TAG, "Height = " + headerView[0].getWidth() + " Width = " + tv[0][0].getWidth());
		    ViewTreeObserver obs = headerView[0].getViewTreeObserver();
		    resizeRow();
		    obs.removeGlobalOnLayoutListener(this);
		  }
		});		
		
	}	

    
   @Override
    public void onPause() {
        super.onPause();
    }

    
    @Override
    public void onSaveInstanceState(Bundle savedInstanceState) {
        super.onSaveInstanceState(savedInstanceState);
        savedInstanceState.putInt("text", "savedText");
    }

    
    @Override
    public void onStop() {
        super.onStop();
    }

    
    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

   @Override
    public void onDetach() {
       super.onDetach();
       activity = null;
    }

swipe기능이 뭔지 어색할지 모르지만 스마트폰 사용자라면 지금도 많이 사용하고 있는 기능입니다. 특히 안 가르쳐줘도 아이들은 정말 잘 사용하는 기능이죠. 손가락으로 클릭후 오른쪽/왼쪽으로 움직하면 화면이 변경되는 기능입니다.

Android 3.0 부터 제공되는 Swipe Views와 Tabs + Swipe를 편리하게 생성하고 사용할 수 있습니다. 

프로젝트 생성시 다른 프로젝트와 조금 다르게 설정만 해주면 됩니다.

그럼 작성도 안 했는데 많은 소스의 내용이 생깁니다. 왠지 뿌듯하지만 작동로직을 제대로 이해하지 못하면 남이 짠 소스이니 구현에 힘이 들 수 있습니다.

이제부터 자동생성 소스 중 변경부분을 위주로 설명하도록 하겠습니다.

		@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.
			Fragment fragment = new DummySectionFragment();
			Bundle args = new Bundle();
			args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
			fragment.setArguments(args);
			return fragment;
		}

		@Override
		public Fragment getItem(int position) {
			Fragment fragment = null;
			
			⁄⁄ 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:			
				fragment = new TabOne();
				break;
			case 1:			
				fragment = new TabTwo();
				break;
			}
			return fragment;
		}

메인activity는 이렇게 만 변경하고 물론 tab이 기본이 3개인데 2개 바꾸는 기본적인 변경의 내용은 그냥 생략했습니다. 보면 직관적으로 알 수 있기 때문에 전체 소스를 참고하시면 될 듯 합니다.

public class TabOne extends Fragment implements MapView.OpenAPIKeyAuthenticationResultListener, 
MapView.MapViewEventListener,
MapView.CurrentLocationEventListener,
MapView.POIItemEventListener {

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

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	                Bundle savedInstanceState)
	{
	        view = inflater.inflate(R.layout.map, container, false);
	        linearLayout = (LinearLayout)view.findViewById(R.id.maplayout);
	}	

}

public class TabTwo extends Fragment {

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

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	                Bundle savedInstanceState)
	{
	        view = inflater.inflate(R.layout.table, container, false);
	        return view;
	}
}

이렇게 2개의 fragment를 생성해주면 됩니다. 프래그먼트에 대해서는 다음에 한번 이론적으로 접근해보고 지금은 이렇게 activity와 같은 식으로 추가해주면 아래와 같은 기능을 가진 앱이 만들어집니다.

그래도 이 기능은 기본 소스를 만들어주어서 참 편하게 구현할 수 있는 기능입니다.

PublicWifi_0409.zip

아직 생각한 모든 기능을 구현한 것은 아니지만 이 주제는 다 구현했으니 전체 소스도 첨부합니다.

액션바에 아래와 같이 검색창을 넣을 수 있는데 이를 위해서는 3가지 작업이 필요하다.

1) menu xml에 SearchView item추가

    <item
        android:id="@+id⁄action_search"
 
        android:showAsAction="ifRoom"
        android:actionViewClass="android.widget.SearchView"
        android:title="@string⁄search"
       android:icon="@drawable⁄search"        
    ><⁄item>

2) onCreateOptionsMenu 에 search view 항목추가 및 Listener 설정

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	       super.onCreateOptionsMenu(menu);
	        MenuInflater inflater = getMenuInflater();
	        inflater.inflate(R.menu.activity_lost, menu);
	        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
		        searchItem = menu.findItem(R.id.action_search);
		        searchView = (SearchView) searchItem.getActionView();
		        searchView.setQueryHint("물품명 또는 분류");
		        searchView.setOnQueryTextListener(queryTextListener);      
	
		        SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
		        if(null!=searchManager ) {   
		        	searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
		        }
		        searchView.setIconifiedByDefault(true);
		        
	        }
	        return true;
	}

개발참고사이트 : http://developer.android.com/reference/android/widget/SearchView.html 

3) 리스너에 처리로직 구현

	private OnQueryTextListener queryTextListener = new OnQueryTextListener() {
		@TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
		@Override
		public boolean onQueryTextSubmit(String query) {
			⁄⁄ TODO Auto-generated method stub
			⁄⁄searchItem.collapseActionView();
			⁄⁄Log.d(TAG,"onQueryTextSubmit");
			Cursor mCount= db.rawQuery("select count(*) from datainfo where GetName like '%" + query+"%' or cate like '%"+ query+"%'", null);
			mCount.moveToFirst();
			count= mCount.getInt(0);
			mCount.close();
			if(count <=0){
				Toast.makeText(LostActivity.con, "검색된 데이타가 없습니다.", Toast.LENGTH_LONG).show();
				return false;
			}
			datainfo = new DataInfo[count];
			Cursor result = db.rawQuery("SELECT * from datainfo where GetName like '%" + query+"%' or cate like '%"+ query+"%' order by GetDate desc", null);
			result.moveToFirst();	
			int i =0;
			while (i<count){
				datainfo[i] = new DataInfo();
				datainfo[i].SetLostId(result.getString(1));
				datainfo[i].SetLostName(result.getString(2));
				datainfo[i].SetLostURL(result.getString(3));
				datainfo[i].SetLostDate(result.getString(5));
				datainfo[i].SetLostTitle(result.getString(4));
				datainfo[i].SetTakePlace(result.getString(6));
				datainfo[i].SetTakeContact(result.getString(7));
				datainfo[i].SetLostPos(result.getString(9));
				datainfo[i].SetLostPlace(result.getString(10));
				datainfo[i].SetLostThing(result.getString(11));
				datainfo[i].SetLostStatus(result.getString(12));
				datainfo[i].SetLostImageUrl(result.getString(14));
				i++;
				result.moveToNext();
			}
			result.close();	
			appendRow(datainfo);
			resizeRow(count);
			⁄⁄Log.d(TAG,"onQueryTextSubmit"+count);
			imm= (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
			imm.hideSoftInputFromWindow(searchView.getWindowToken(), 0);
			searchView.setQuery("", false);
			searchView.setIconified(true);
			⁄⁄Toast.makeText(LostActivity.con, "onQueryTextSubmit:["+count+"]", Toast.LENGTH_LONG).show();
			return false;
		}
		@Override
		public boolean onQueryTextChange(String newText) {
			// TODO Auto-generated method stub
			return false;
		}
	};

Lost_completed.zip