SlideShare a Scribd company logo
ActionBar & Fragment
Leonardo YongUk Kim http://dalinaum-kr.tumblr.com
ActionBar
애플리케이션 아이콘

 최상위 화면이 아니면 캐럿(<)을 포함해야 함.

뷰 컨트롤

 여러 뷰를 사용할 때. 스피너나 탭을 제공해야.

액션 버튼(3)과 액션 오버플로우(4)

 메뉴 버튼은 사용하지 않음.

 부족한 항목은 오버플로우를 통해 표시되어야 함.
Actionbar and fragment
애플리케이션 아이콘



getActionBar().setDisplayAsUpEnable(true|false)
getActionBar().setDisplayUseLogoEnabled(true|false)
UP 선택시 onOptionsItemSelected(MenuItem)이 호출.

  MenuItem 값은 action.R.id.home
뷰 컨트롤
                                        getActionBar().setNavigation(
                                     ActionBar.NAVIGATION_MODE_TAB)

                                         tab = getActionBar().newTab()
                                                .setText(“TAB”)
                                  .setTabListener(new MyListener(Fragment))

                                         getActionBar().addTab(tab)




    getActionBar().setNavigation(
ActionBar.NAVIGATION_MODE_LIST)

    setListNavigationCallbacks(
          SpinnerAdapter,
       OnNavigationListener)
액션 버튼



 onCreateOptionsMenu(Menu) {
   getMenuInflater().inflate(RID, Menu)
 }
액션 버튼

  onCreateOptionsMenu(Menu) {
      getMenuInflater().inflate(ResourceID, Menu)
  }

<menu xmlns:android="http://schemas.android.com/apk/
res/android">
    <item android:id="@+id/menu_save"
          android:icon="@drawable/ic_menu_save"
          android:title="@string/menu_save"
          android:showAsAction="ifRoom|withText" />
</menu>
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            // app icon in action bar clicked; go home
            Intent intent = new Intent(this,
HomeActivity.class);

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}
문맥 액션바 (CAB: Contextual Action Bar)
문맥 액션바

private ActionMode.Callback mCallback = new
ActionMode.Callback() {
}

       startActionMode( mCallback );
Action Provider




 <item android:id="@+id/menu_share"
        android:title="@string/share"
        android:showAsAction="ifRoom"
        android:actionProviderClass="android.widget.ShareActionProvider" />
  ...
Froyo? GingerBread?




 Jake Wharton



                http://actionbarsherlock.com
Fragment
<LinearLayout>
                        <include layout=”...>
                        <include layout=”...>
                          </LinearLayout>




   <LinearLayout>
<include layout=”...>
<include layout=”...>
  </LinearLayout>
<LinearLayout>
                        <include layout=”...>
                        <include layout=”...>
                          </LinearLayout>


      중첩된 요소를 관리할 방법이 없었습니다.
   <LinearLayout>
<include layout=”...>
<include layout=”...>
  </LinearLayout>
Activity를 중첩하면 어때?




ActivityGroup (eg. TabActivity)는 Activity를 포함시킬 수
있었습니다. (현재는 deprecated)

View 모델로는 상황에 따른 관리가 어렵다.

Activity는 중첩을 고려하지 않아 여러 문제가 존재.
계층 레이아웃이 아니면 문제 없는 것 아네요?
회전 등으로 액티비티가 사라지면
프로그래머가 알아서 해야 합니다.
액티비티 간에 정보 전달할 방법은 인텐트와
onRetainNonConfigurationInstance (deprecated)
전역적인 정보 공유 방법이 부재.

처리하던 작업이나 외부에서 오는 노티를 액티비티가
받기 어려움.
Fragment




       독립적인 UI 단위
Actionbar and fragment
생명 주기를 통한
시스템에 의한 관리
<FrameLayout xmlns:android="http://schemas.android.com/apk/
res/android"
    android:layout_width="match_parent"
android:layout_height="match_parent">
    <fragment
class="com.example.android.apis.app.FragmentLayout
$TitlesFragment"
             android:id="@+id/titles"
             android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>




 fragment에 class를 정적으로 넣어 생성하는 방법
DetailsFragment details = (DetailsFragment)
                                getFragmentManager().findFragmentById(R.id.details);
                        if (details == null || details.getShownIndex() != index) {
                            // Make new fragment to show this selection.
                            details = DetailsFragment.newInstance(index);

                                // Execute a transaction, replacing any existing
                                // fragment with this one inside the frame.
                                FragmentTransaction ft
                                        = getFragmentManager().beginTransaction();
                                ft.replace(R.id.details, details);
                                ft.setTransition(
                                        FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                                ft.commit();
                        }



    fragment를 동적으로 생성하거나 교체하는 방법

    한번에 여러 fragment가 교체될 수 있고 백스택에 의해
    관리됨. 그렇기 때문에 트랜잭션을 만들어야 함.

        add와 replace를 주로 사용.
한번의 트랜잭션 동안 두개의 프래그먼트를 교체.
타블렛 + 폰
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


                                                                                                   두개의 layout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment class="com.example.android.apis.app.TitlesFragment"
                android:id="@+id/titles" android:layout_weight="1"
                android:layout_width="0px"
                android:layout_height="match_parent" />

    <FrameLayout android:id="@+id/details" android:layout_weight="1"
            android:layout_width="0px"
            android:layout_height="match_parent" />
   
</LinearLayout>



                                                                <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                                        android:layout_width="match_parent"
                                                                        android:layout_height="match_parent">
                                                                    <fragment class="com.example.android.apis.app.TitlesFragment"
                                                                            android:id="@+id/titles"
                                                                            android:layout_width="match_parent"
                                                                            android:layout_height="match_parent" />
                                                                </FrameLayout>




런타임으로 서브 Fragment 존재 확인
                          DetailsFragment details = (DetailsFragment)
                                 getFragmentManager().findFragmentById(R.id.details);
                         if (details == null || details.getShownIndex() != index) {
타블렛 + 폰
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


                                                                                                   두개의 layout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment class="com.example.android.apis.app.TitlesFragment"
                android:id="@+id/titles" android:layout_weight="1"
                android:layout_width="0px"
                android:layout_height="match_parent" />



                 뷰 컴포넌트를 재사용가능하고
    <FrameLayout android:id="@+id/details" android:layout_weight="1"
            android:layout_width="0px"
            android:layout_height="match_parent" />
   

              시스템이 리소스 관리를 도와주는 것일 뿐.
</LinearLayout>




                프로그래머는 코딩해야 합니다.
                                                                <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                                        android:layout_width="match_parent"
                                                                        android:layout_height="match_parent">
                                                                    <fragment class="com.example.android.apis.app.TitlesFragment"
                                                                            android:id="@+id/titles"
                                                                            android:layout_width="match_parent"
                                                                            android:layout_height="match_parent" />
                                                                </FrameLayout>




런타임으로 서브 Fragment 존재 확인
                          DetailsFragment details = (DetailsFragment)
                                 getFragmentManager().findFragmentById(R.id.details);
                         if (details == null || details.getShownIndex() != index) {
기본 콤포넌트와 구글 API는 점차
Fragment 위주로

DialogFragment
ListFragment
PreferenceFragment
WebViewFragment
YouTubePlayerFragment
MapFragment
Android UI
Actionbar and fragment
Actionbar and fragment

More Related Content

PDF
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
PPTX
Jqm+appspresso
PDF
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
PDF
안드로이드 메테리얼 디자인 transition, cardview 맛보기
PDF
다시보는 Angular js
PDF
자바스크립트 프레임워크 살펴보기
PPTX
Shit if
PDF
안드로이드 6.0 마시멜로 지원을 고민하는 개발자를 위한 안내서
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Jqm+appspresso
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
안드로이드 메테리얼 디자인 transition, cardview 맛보기
다시보는 Angular js
자바스크립트 프레임워크 살펴보기
Shit if
안드로이드 6.0 마시멜로 지원을 고민하는 개발자를 위한 안내서

Viewers also liked (20)

PDF
Tensorflow 101
PDF
Realm과 RxJava
PDF
PublishSubject
PDF
Viewpager를활용한app만들기
PPTX
나의 오픈소스 사용기
PPTX
A brief guide to android gradle
KEY
The Git - (#1/2)
PDF
Anatomy of an android
PDF
PDF
Butter android views
PPTX
안드로이드를 위한 Gradle 맛들이기
PDF
Anatomy of Realm
PDF
C++ 미정의 행동(undefined behavior)
PDF
[0602 박민근] Direct2D
PDF
3D Graphics 101
PDF
좋은 뷰, 나쁜 뷰, 이상한 뷰
PPTX
C++ stl
PDF
Modern android
PPTX
EventBus for Android
PDF
A brief introduction to Realm with Kotlin
Tensorflow 101
Realm과 RxJava
PublishSubject
Viewpager를활용한app만들기
나의 오픈소스 사용기
A brief guide to android gradle
The Git - (#1/2)
Anatomy of an android
Butter android views
안드로이드를 위한 Gradle 맛들이기
Anatomy of Realm
C++ 미정의 행동(undefined behavior)
[0602 박민근] Direct2D
3D Graphics 101
좋은 뷰, 나쁜 뷰, 이상한 뷰
C++ stl
Modern android
EventBus for Android
A brief introduction to Realm with Kotlin
Ad

Similar to Actionbar and fragment (9)

PDF
08 fragment 태블릿 대응
PPT
Introducing Fragments
PDF
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
PDF
Youtube를활용한app만들기
PPTX
Android 기초강좌 애플리캐이션 구조
PPT
안드로이드스터디 5
PDF
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
PPTX
Java, android 스터티7
PPT
Designing Apps for Motorla Xoom Tablet
08 fragment 태블릿 대응
Introducing Fragments
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
Youtube를활용한app만들기
Android 기초강좌 애플리캐이션 구조
안드로이드스터디 5
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
Java, android 스터티7
Designing Apps for Motorla Xoom Tablet
Ad

More from Leonardo YongUk Kim (14)

PDF
Compose Multiplatform 101
PDF
Kotlin 2.0을 통해 알아보는 코틀린의 미래
PDF
안드로이드 빌드: 설탕없는 세계
PDF
Realm은 어떻게 효율적인 데이터베이스를 만들었나?
PDF
MVC부터 MVVM, 단방향 데이터 흐름까지
PDF
역시 Redux
PDF
오픈 소스로 취업하기: 나는 어떻게 오픈 소스를 하다 렘 개발자가 되었나?
PDF
Realm: 초고속 데이터베이스
PDF
React Everywhere
PDF
React Redux React Native
PDF
Veni, Vide, Built: Android Gradle Plugin
PDF
GIt 마을로 이주하기 (Git -> Svn, svn-all-fast-export)
KEY
red black tree
Compose Multiplatform 101
Kotlin 2.0을 통해 알아보는 코틀린의 미래
안드로이드 빌드: 설탕없는 세계
Realm은 어떻게 효율적인 데이터베이스를 만들었나?
MVC부터 MVVM, 단방향 데이터 흐름까지
역시 Redux
오픈 소스로 취업하기: 나는 어떻게 오픈 소스를 하다 렘 개발자가 되었나?
Realm: 초고속 데이터베이스
React Everywhere
React Redux React Native
Veni, Vide, Built: Android Gradle Plugin
GIt 마을로 이주하기 (Git -> Svn, svn-all-fast-export)
red black tree

Actionbar and fragment

  • 1. ActionBar & Fragment Leonardo YongUk Kim http://dalinaum-kr.tumblr.com
  • 3. 애플리케이션 아이콘 최상위 화면이 아니면 캐럿(<)을 포함해야 함. 뷰 컨트롤 여러 뷰를 사용할 때. 스피너나 탭을 제공해야. 액션 버튼(3)과 액션 오버플로우(4) 메뉴 버튼은 사용하지 않음. 부족한 항목은 오버플로우를 통해 표시되어야 함.
  • 6. 뷰 컨트롤 getActionBar().setNavigation( ActionBar.NAVIGATION_MODE_TAB) tab = getActionBar().newTab() .setText(“TAB”) .setTabListener(new MyListener(Fragment)) getActionBar().addTab(tab) getActionBar().setNavigation( ActionBar.NAVIGATION_MODE_LIST) setListNavigationCallbacks( SpinnerAdapter, OnNavigationListener)
  • 7. 액션 버튼 onCreateOptionsMenu(Menu) { getMenuInflater().inflate(RID, Menu) }
  • 8. 액션 버튼 onCreateOptionsMenu(Menu) { getMenuInflater().inflate(ResourceID, Menu) } <menu xmlns:android="http://schemas.android.com/apk/ res/android"> <item android:id="@+id/menu_save" android:icon="@drawable/ic_menu_save" android:title="@string/menu_save" android:showAsAction="ifRoom|withText" /> </menu>
  • 9. @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: // app icon in action bar clicked; go home Intent intent = new Intent(this, HomeActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); return true; default: return super.onOptionsItemSelected(item); } }
  • 10. 문맥 액션바 (CAB: Contextual Action Bar)
  • 11. 문맥 액션바 private ActionMode.Callback mCallback = new ActionMode.Callback() { } startActionMode( mCallback );
  • 12. Action Provider <item android:id="@+id/menu_share" android:title="@string/share" android:showAsAction="ifRoom" android:actionProviderClass="android.widget.ShareActionProvider" /> ...
  • 13. Froyo? GingerBread? Jake Wharton http://actionbarsherlock.com
  • 15. <LinearLayout> <include layout=”...> <include layout=”...> </LinearLayout> <LinearLayout> <include layout=”...> <include layout=”...> </LinearLayout>
  • 16. <LinearLayout> <include layout=”...> <include layout=”...> </LinearLayout> 중첩된 요소를 관리할 방법이 없었습니다. <LinearLayout> <include layout=”...> <include layout=”...> </LinearLayout>
  • 17. Activity를 중첩하면 어때? ActivityGroup (eg. TabActivity)는 Activity를 포함시킬 수 있었습니다. (현재는 deprecated) View 모델로는 상황에 따른 관리가 어렵다. Activity는 중첩을 고려하지 않아 여러 문제가 존재.
  • 18. 계층 레이아웃이 아니면 문제 없는 것 아네요?
  • 19. 회전 등으로 액티비티가 사라지면 프로그래머가 알아서 해야 합니다.
  • 20. 액티비티 간에 정보 전달할 방법은 인텐트와 onRetainNonConfigurationInstance (deprecated) 전역적인 정보 공유 방법이 부재. 처리하던 작업이나 외부에서 오는 노티를 액티비티가 받기 어려움.
  • 21. Fragment 독립적인 UI 단위
  • 24. <FrameLayout xmlns:android="http://schemas.android.com/apk/ res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment class="com.example.android.apis.app.FragmentLayout $TitlesFragment" android:id="@+id/titles" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> fragment에 class를 정적으로 넣어 생성하는 방법
  • 25. DetailsFragment details = (DetailsFragment)                     getFragmentManager().findFragmentById(R.id.details);             if (details == null || details.getShownIndex() != index) {                 // Make new fragment to show this selection.                 details = DetailsFragment.newInstance(index);                 // Execute a transaction, replacing any existing                 // fragment with this one inside the frame.                 FragmentTransaction ft                         = getFragmentManager().beginTransaction();                 ft.replace(R.id.details, details);                 ft.setTransition(                         FragmentTransaction.TRANSIT_FRAGMENT_FADE);                 ft.commit();             } fragment를 동적으로 생성하거나 교체하는 방법 한번에 여러 fragment가 교체될 수 있고 백스택에 의해 관리됨. 그렇기 때문에 트랜잭션을 만들어야 함. add와 replace를 주로 사용.
  • 26. 한번의 트랜잭션 동안 두개의 프래그먼트를 교체.
  • 27. 타블렛 + 폰 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 두개의 layout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="match_parent">     <fragment class="com.example.android.apis.app.TitlesFragment"             android:id="@+id/titles" android:layout_weight="1"             android:layout_width="0px"             android:layout_height="match_parent" />     <FrameLayout android:id="@+id/details" android:layout_weight="1"             android:layout_width="0px"             android:layout_height="match_parent" />     </LinearLayout> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:layout_width="match_parent"         android:layout_height="match_parent">     <fragment class="com.example.android.apis.app.TitlesFragment"             android:id="@+id/titles"             android:layout_width="match_parent"             android:layout_height="match_parent" /> </FrameLayout> 런타임으로 서브 Fragment 존재 확인 DetailsFragment details = (DetailsFragment)                     getFragmentManager().findFragmentById(R.id.details);             if (details == null || details.getShownIndex() != index) {
  • 28. 타블렛 + 폰 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 두개의 layout         android:orientation="horizontal"         android:layout_width="match_parent"         android:layout_height="match_parent">     <fragment class="com.example.android.apis.app.TitlesFragment"             android:id="@+id/titles" android:layout_weight="1"             android:layout_width="0px"             android:layout_height="match_parent" /> 뷰 컴포넌트를 재사용가능하고     <FrameLayout android:id="@+id/details" android:layout_weight="1"             android:layout_width="0px"             android:layout_height="match_parent" />     시스템이 리소스 관리를 도와주는 것일 뿐. </LinearLayout> 프로그래머는 코딩해야 합니다. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:layout_width="match_parent"         android:layout_height="match_parent">     <fragment class="com.example.android.apis.app.TitlesFragment"             android:id="@+id/titles"             android:layout_width="match_parent"             android:layout_height="match_parent" /> </FrameLayout> 런타임으로 서브 Fragment 존재 확인 DetailsFragment details = (DetailsFragment)                     getFragmentManager().findFragmentById(R.id.details);             if (details == null || details.getShownIndex() != index) {
  • 29. 기본 콤포넌트와 구글 API는 점차 Fragment 위주로 DialogFragment ListFragment PreferenceFragment WebViewFragment YouTubePlayerFragment MapFragment