Android Code Lab 02

Użycie NavigationDrawer na starszych wersjach Androida.

Kod źródłowy: https://dl.dropboxusercontent.com/u/20220/CodeLab02.zip

Transcript

1. Android Code Lab 02
   NavigationDrawer
   google.com/+AdamJodłowski
   

   View Slide

2. Wykorzystanie NavigationDrawera
   Komponent NavigationDrawer zajmuje się za nas animacją, ukrywaniem i
   pokazywaniem swojej zawartości. Do zadań programisty należy:
   1. Dostarczenie odpowiedniego layoutu aktywności z użyciem widoku DrawerLayout
   2. Obsługa interakcji użytkownika z opcjami wyświetlanymi w drawerze
   3. Ewentualne pokazywanie i ukrywanie drawera programowo, w reakcji na inne
   zdarzenia niż swipe po ekranie
   Dobrą praktyką jest podpięcie NavigationDrawera do ikonki aplikacji w ActionBarze, z
   uwagi na nieoczywistość zastosowania tego rodzaju nawigacji w aplikacji.
   Aby skorzystać z komponentu, należy mieć dołączoną i skonfigurowaną bibliotekę
   Support Library (v4), jest ona dołączana automatycznie do nowotworzonych projektów.
   Część prezentacji zakłada przypadek pisania aplikacji dla wersji API 11+ z uwagi na
   wykorzystanie ActionBara. Aby przystosować kod do starszych wersji platformy,
   wystarczy skorzystać z ActionBarCompat zgodnie z Code Lab 01.
   

   View Slide

3. Layout głównej aktywności
   Aby skorzystać z NavigationDrawera, modyfikujemy plik layoutu aktywności wg wzoru:
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/drawerLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   android:id="@+id/appContent"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
   android:layout_width=" 240dp"
   android:layout_height="match_parent"
   android: layout_gravity="start" />
   
   

   View Slide

4. Layout głównej aktywności
   Aby skorzystać z NavigationDrawera, modyfikujemy plik layoutu aktywności wg wzoru:
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/drawerLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   android:id="@+id/appContent"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
   android:layout_width=" 240dp"
   android:layout_height="match_parent"
   android: layout_gravity="start" />
   
   zawartość głównego ekranu, musi to być pierwszy element wewnątrz
   DrawerLayoutu (typowo stanowi kontener na fragmenty)
   podawajmy maksymalnie 320dp
   pozioma grawitacja drawera: do lewej
   zawartość
   drawera
   ustawiamy jako root całego layoutu
   

   View Slide

5. Przykładowy layout
   android:id="@+id/drawerLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
   android:layout_width="240dp"
   android:layout_height="match_parent"
   android:layout_gravity="start"
   android:background="#eee" >
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true"
   android:src="@drawable/ic_launcher" />
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_below="@+id/logoViewDrawer"
   android:choiceMode="singleChoice"
   android:divider="@android:color/transparent"
   android:dividerHeight="0dp" />
   
   
   

   View Slide

6. Nasłuchiwanie zdarzeń drawera
   Potrzebujemy obiektu implementującego interfejs DrawerLayout.DrawerListener:
   mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
   mDrawerLayout.setDrawerListener(new DrawerListener() {
   @Override
   public void onDrawerClosed(View drawerView) {
   Log.d("CodeLab", "onDrawerClosed");
   }
   @Override
   public void onDrawerOpened(View drawerView) {
   Log.d("CodeLab", "onDrawerOpened");
   }
   @Override
   public void onDrawerSlide(View drawerView, float slideOffset) {
   Log.d("CodeLab", "onDrawerSlide: " + slideOffset);
   }
   @Override
   public void onDrawerStateChanged(int newState) {
   Log.d("CodeLab", "onDrawerStateChanged: " + newState);
   }
   });
   

   View Slide

7. Współpraca drawera z ikonką aplikacji w ActionBarze (1)
   Uwaga: jeśli nie masz w aktualnym projekcie dołączonego ActionBarCompat, możesz
   tymczasowo zmienić wartość android:minSdkVersion w manifeście na >10.
   ActionBarDrawerToggle spaja ActionBar z NavigationDrawerem oraz pokazuje go i
   ukrywa na kliknięcie ikonki aplikacji w ActionBarze. Dobrą praktyką jest zastąpienie
   tradycyjnej ikonki przycisku w górę, ikonką drawera, która podpowiada użytkownikowi,
   że zastosowano właśnie taki rodzaj nawigacji.
   Wspomnianą ikonę najlepiej dodać do zasobów aplikacji z paczki Android Design Icons.
   

   View Slide

8. Współpraca drawera z ikonką aplikacji w ActionBarze (2)
   Zmodyfikuj klasę głównej aktywności według podanego niżej kodu:
   public class MainActivity extends Activity {
   private DrawerLayout mDrawerLayout;
   private ActionBarDrawerToggle mDrawerToggle;
   public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
   mDrawerToggle = new ActionBarDrawerToggle(this,
   mDrawerLayout,
   R.drawable.ic_drawer,
   R.string.action_drawer_open,
   R.string.action_drawer_close) {
   public void onDrawerClosed(View view) {
   getActionBar().setTitle("Main App View");
   }
   public void onDrawerOpened(View drawerView) {
   getActionBar().setTitle("Drawer visible");
   }
   };
   

   View Slide

9. Współpraca drawera z ikonką aplikacji w ActionBarze (2)
   Zmodyfikuj klasę głównej aktywności według podanego niżej kodu:
   public class MainActivity extends Activity {
   private DrawerLayout mDrawerLayout;
   private ActionBarDrawerToggle mDrawerToggle;
   public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
   mDrawerToggle = new ActionBarDrawerToggle(this,
   mDrawerLayout,
   R.drawable.ic_drawer,
   R.string.action_drawer_open,
   R.string.action_drawer_close) {
   public void onDrawerClosed(View view) {
   getActionBar().setTitle("Main App View");
   }
   public void onDrawerOpened(View drawerView) {
   getActionBar().setTitle("Drawer visible");
   }
   };
   aktywność zawierająca
   NavigationDrawera
   ikonka symbolizująca
   NavigationDrawer
   dwa zasoby typu ‘string’
   opisujące wykonywane akcje
   (otwarcie i zamknięcie)
   tutaj również możemy
   nasłuchiwać zdarzeń
   

   View Slide

10. Współpraca drawera z ikonką aplikacji w ActionBarze (3)
    mDrawerLayout. setDrawerListener(mDrawerToggle);
    getActionBar().setDisplayHomeAsUpEnabled(true);
    // getActionBar().setHomeButtonEnabled(true); // API 14 i wyzej
    }
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle. syncState();
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle. onConfigurationChanged(newConfig);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) { return true; }
    return super.onOptionsItemSelected(item);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
    }
    }
    

    View Slide

11. Współpraca drawera z ikonką aplikacji w ActionBarze (3)
    mDrawerLayout. setDrawerListener(mDrawerToggle);
    getActionBar().setDisplayHomeAsUpEnabled(true);
    // getActionBar().setHomeButtonEnabled(true); // API 14 i wyzej
    }
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle. syncState();
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle. onConfigurationChanged(newConfig);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) { return true; }
    return super.onOptionsItemSelected(item);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
    }
    }
    niech Toggle nasłuchuje
    synchronizacja po utworzeniu
    synchronizacja zmiany konfiguracji
    przekazujemy zdarzenie wyboru
    elementu menu opcji do komponentu
    Toggle, jeśli je obsłużył,
    zatrzymujemy propagację tego
    zdarzenia
    

    View Slide

12. Reakcja na wybór elementów drawera
    Interakcja użytkownika z elementami drawera następuje w sposób tradycyjny, należy
    zarejestrować odpowiednie obiekty nasłuchujące na przyciski, wybór elementów listy czy
    gesty dotykowe. Typową reakcją jest podmiana fragmentów stanowiących główną
    zawartość aplikacji, kiedy drawer jest niewidoczny (w naszym przykładowym layoucie
    XML, kontenerem na fragmenty jest FrameLayout o id appContent).
    Pomocne dodatkowe metody wywołujące pokazanie się i ukrycie drawera:
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    mDrawerLayout.openDrawer(GravityCompat.START);
    mDrawerLayout.closeDrawer(GravityCompat.START);
    

    View Slide