Android 구성 요소 DrawerLayout 탐색 만 들 기

개술
이 블 로 그 는 developer.android.com/상의 Training 과정 에 대한 간단 한 번역 입 니 다.번역 에 대한 이해 가 어렵다 면 아래 링크 를 클릭 하여 원문 을 보십시오!
DrawerLayout 에 대한 Training:http://developer.android.com/training/implementing-navigation/nav-drawer.html
DrawerLayout 에 대한 API:http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
서랍 레이아웃 만 들 기
        서랍 레이아웃 을 만 들 려 면 DrawerLayout 를 XML 파일 의 루트 노드 로 사용 해 야 합 니 다.DrawerLayout 는 Android.support.v4.DrawerLayout 를 참조 한 다음 레이아웃 내부 에 내용 보기 영역 과 하나 또는 두 개의 서랍 보기 영역 을 추가 해 야 합 니 다.여기 서 서랍 보기 그림 이 위 에서 설명 한 메뉴 보 기 를 이해 합 니 다.예 를 들 어 다음 레이아웃 에 표 시 됩 니 다.레이아웃 에 FrameLayout 를 내용 영역 으로 추가 합 니 다(일반적으로 Fragment 를 나타 내 는 데 사 용 됩 니 다).또한 아래 에 listView 를 정의 하여 서랍 메뉴 보 기 를 보 여 줍 니 다.

<android.support.v4.widget.DrawerLayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/drawer_layout" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
  <!-- The main content view --> 
  <FrameLayout 
    android:id="@+id/content_frame" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 
  <!-- The navigation drawer --> 
  <ListView android:id="@+id/left_drawer" 
    android:layout_width="240dp" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:choiceMode="singleChoice" 
    android:divider="@android:color/transparent" 
    android:dividerHeight="0dp" 
    android:background="#111"/> 
</android.support.v4.widget.DrawerLayout> 

이 레이아웃 파일 은 중요 한 레이아웃 특징 을 시범 하 였 다.

주요 내용 의 보기(FrameLayout)는 DrawLayout 의 첫 번 째 키 요소 여야 합 니 다.네 비게 이 션 서랍 은 주요 내용 보기 위 에 있 기 때 문 입 니 다.

주요 내용 보 기 는 부모 보기 와 일치 하 는 너비 와 높이 로 설정 되 어 있 습 니 다.전체 인터페이스 내 비게 이 션 서랍 이 숨겨 져 있 기 때 문 입 니 다.

서랍 보기(ListView)는 수평 중력 과 android:layot 를 지정 해 야 합 니 다.gravity 속성.오른쪽 에서 왼쪽(RTL)언어 를 지원 합 니 다."left"대신 지정 값 과"start"를 지원 합 니 다.(따라서 서랍 에 레이아웃 오른쪽 에 있 습 니 다.레이아웃 이 RTL 일 때).

서랍 보 기 는 폭 을 dp 단위 와 높이 로 부모 보기 와 일치 하도록 지정 합 니 다.서랍 안의 너 비 는 320 dp 를 초과 할 수 없 기 때문에 사용 자 는 항상 주요 내용 보기 의 일부분 을 볼 수 있 습 니 다.

서랍 목록 초기 화
        Activity 에서 첫 번 째 일 은 네 비게 이 션 서랍 목록 의 요 소 를 초기 화 하 는 것 입 니 다.어떻게 하 느 냐 는 프로그램의 내용 에 달 려 있 습 니 다.그러나 네 비게 이 션 서랍 은 보통 ListView 를 포함 하기 때문에 목록 은 Adapter 로 채 워 야 합 니 다(예 를 들 어 Array Adapter 나 Simple CursorAdapter).
예 를 들 어 내 비게 이 션 목록 을 String array 로 초기 화 하 는 방법 을 보 여 줍 니 다.

public class MainActivity extends Activity { 
  private String[] mPlanetTitles; 
  private DrawerLayout mDrawerLayout; 
  private ListView mDrawerList; 
  ... 
 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
    mPlanetTitles = getResources().getStringArray(R.array.planets_array); 
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 
    mDrawerList = (ListView) findViewById(R.id.left_drawer); 
 
    // Set the adapter for the list view 
    mDrawerList.setAdapter(new ArrayAdapter<String>(this, 
        R.layout.drawer_list_item, mPlanetTitles)); 
    // Set the list's click listener 
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); 
 
    ... 
  } 
} 

이 코드 는 setOnItemClickListener()를 호출 하여 네 비게 이 션 서랍 목록 의 클릭 이 벤트 를 받 습 니 다.다음 절 에 서 는 이 인 터 페 이 스 를 어떻게 실현 하 는 지 보 여 줍 니 다.사용자 가 Item 을 선택 할 때 내용 보 기 를 바 꿉 니 다.
탐색 클릭 이벤트 처리
사용자 가 서랍 목록 에 있 는 Item 을 선 택 했 을 때 시스템 은 onItemClickListener 의 onItemClick()을 호출 하여 setOnItemClickListener()에 게 줍 니 다.
onItemClick()방법 에서 무엇 을 하 느 냐 는 app 이 실현 하 는 구조 에 달 려 있 습 니 다.아래 의 예 에서 모든 Item 을 선택 하면 주요 내용 의 레이아웃 에 서로 다른 Fragment 를 삽입 합 니 다.

private class DrawerItemClickListener implements ListView.OnItemClickListener { 
  @Override 
  public void onItemClick(AdapterView parent, View view, int position, long id) { 
    selectItem(position); 
  } 
} 
 
/** Swaps fragments in the main content view */ 
private void selectItem(int position) { 
  // Create a new fragment and specify the planet to show based on position 
  Fragment fragment = new PlanetFragment(); 
  Bundle args = new Bundle(); 
  args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position); 
  fragment.setArguments(args); 
 
  // Insert the fragment by replacing any existing fragment 
  FragmentManager fragmentManager = getFragmentManager(); 
  fragmentManager.beginTransaction() 
          .replace(R.id.content_frame, fragment) 
          .commit(); 
 
  // Highlight the selected item, update the title, and close the drawer 
  mDrawerList.setItemChecked(position, true); 
  setTitle(mPlanetTitles[position]); 
  mDrawerLayout.closeDrawer(mDrawerList); 
} 
 
@Override 
public void setTitle(CharSequence title) { 
  mTitle = title; 
  getActionBar().setTitle(mTitle); 
} 

이벤트 열기 및 닫 기 감청
       서랍 을 열 고 닫 는 이 벤트 를 검색 하고 DrawerLayout set DrawerListener()를 호출 하여 DrawerLayout.DrawerListener 에 전달 합 니 다.이 인 터 페 이 스 는 onDrawerOpened()와 onDrawerClosed()와 같은 서랍 이 벤트 를 되 돌려 줍 니 다.
      그러나 DrawerLayout.DrawerListener 를 실현 하 는 것 보다 Activity 에 도구 모음 이 포함 되 어 있다 면 Action BarDrawerToggle 류 를 계승 할 수 있 습 니 다.Action BarDrawerToggle 은 DrawerLayout.DrawerListener 를 실 현 했 습 니 다.따라서 이러한 반전 을 덮어 쓸 수 있 지만 올 바른 상호작용 에 도 도움 이 됩 니 다.도구 모음 아이콘 과 네 비게 이 션 서랍 사이(다음 절 에 서 는 더 논의 할 것 입 니 다).
      내 비게 이 션 서랍 디자인 매 뉴 얼 처럼 서랍 이 보일 때 제목 을 바 꾸 거나 작업 항목 을 삭제 하 는 등 도구 모음 내용 을 수정 해 야 합 니 다.아래 코드 는 Action BarDrawerToggle 류 의 인 스 턴 스 를 사용 하여 DrawerLayout.DrawerListener 를 다시 쓰 는 방법 을 보 여 줍 니 다.

public class MainActivity extends Activity { 
  private DrawerLayout mDrawerLayout; 
  private ActionBarDrawerToggle mDrawerToggle; 
  private CharSequence mDrawerTitle; 
  private CharSequence mTitle; 
  ... 
 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    ... 
 
    mTitle = mDrawerTitle = getTitle(); 
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 
        R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) { 
 
      /** Called when a drawer has settled in a completely closed state. */ 
      public void onDrawerClosed(View view) { 
        super.onDrawerClosed(view); 
        getActionBar().setTitle(mTitle); 
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
      } 
 
      /** Called when a drawer has settled in a completely open state. */ 
      public void onDrawerOpened(View drawerView) { 
        super.onDrawerOpened(drawerView); 
        getActionBar().setTitle(mDrawerTitle); 
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
      } 
    }; 
 
    // Set the drawer toggle as the DrawerListener 
    mDrawerLayout.setDrawerListener(mDrawerToggle); 
  } 
 
  /* Called whenever we call invalidateOptionsMenu() */ 
  @Override 
  public boolean onPrepareOptionsMenu(Menu menu) { 
    // If the nav drawer is open, hide action items related to the content view 
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); 
    menu.findItem(R.id.action_websearch).setVisible(!drawerOpen); 
    return super.onPrepareOptionsMenu(menu); 
  } 
} 

다음 절 에 서 는 Action BarDrawerToggle 구조 함수 파라미터 와 도구 모음 아이콘 을 처리 하 는 데 필요 한 절 차 를 설명 합 니 다.
닫 기 아이콘 열기
        사용 자 는 네 비게 이 션 서랍 을 열 고 닫 을 수 있 습 니 다.화면 왼쪽 가장자리 에서 손가락 으로 미 끄 러 질 수 있 습 니 다.하지만 도구 모음 을 사용 하면 프로그램 아이콘 을 터치 하여 열 고 닫 을 수 있 습 니 다.프로그램 아이콘 도 네 비게 이 션 서랍 에 닫 힌 특수 한 아이콘 을 표시 할 수 있 습 니 다.이 모든 행 위 는 Action BarDrawerToggle 을 사용 하여 이 루어 질 수 있 습 니 다.앞에서 보 듯 이.
Action BarDrawerToggle 작업 을 시 키 고 인 스 턴 스 를 만 들 려 면 다음 과 같은 인자 가 필요 합 니 다.

서랍 이 있 는 Activity.

DrawerLayout 대상.

서랍 표시 기로 Drawable 자원 을 사용 합 니 다.

문자열 자원 설명"서랍 열기"동작.

문자열 자원 설명"서랍 닫 기"동작.

그 다음 에 Action BarDrawerToggle 의 하위 클래스 를 만 들 었 든 안 만 들 었 든 서랍 의 Listener 로 서 몇 개의 Activity 수명 주기 에 Action BarDrawerToggle 을 호출 해 야 합 니 다.

public class MainActivity extends Activity { 
  private DrawerLayout mDrawerLayout; 
  private ActionBarDrawerToggle mDrawerToggle; 
  ... 
 
  public void onCreate(Bundle savedInstanceState) { 
    ... 
 
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 
    mDrawerToggle = new ActionBarDrawerToggle( 
        this,         /* host Activity */ 
        mDrawerLayout,     /* DrawerLayout object */ 
        R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */ 
        R.string.drawer_open, /* "open drawer" description */ 
        R.string.drawer_close /* "close drawer" description */ 
        ) { 
 
      /** Called when a drawer has settled in a completely closed state. */ 
      public void onDrawerClosed(View view) { 
        super.onDrawerClosed(view); 
        getActionBar().setTitle(mTitle); 
      } 
 
      /** Called when a drawer has settled in a completely open state. */ 
      public void onDrawerOpened(View drawerView) { 
        super.onDrawerOpened(drawerView); 
        getActionBar().setTitle(mDrawerTitle); 
      } 
    }; 
 
    // Set the drawer toggle as the DrawerListener 
    mDrawerLayout.setDrawerListener(mDrawerToggle); 
 
    getActionBar().setDisplayHomeAsUpEnabled(true); 
    getActionBar().setHomeButtonEnabled(true); 
  } 
 
  @Override 
  protected void onPostCreate(Bundle savedInstanceState) { 
    super.onPostCreate(savedInstanceState); 
    // Sync the toggle state after onRestoreInstanceState has occurred. 
    mDrawerToggle.syncState(); 
  } 
 
  @Override 
  public void onConfigurationChanged(Configuration newConfig) { 
    super.onConfigurationChanged(newConfig); 
    mDrawerToggle.onConfigurationChanged(newConfig); 
  } 
 
  @Override 
  public boolean onOptionsItemSelected(MenuItem item) { 
    // Pass the event to ActionBarDrawerToggle, if it returns 
    // true, then it has handled the app icon touch event 
    if (mDrawerToggle.onOptionsItemSelected(item)) { 
     return true; 
    } 
    // Handle your other action bar items... 
 
    return super.onOptionsItemSelected(item); 
  } 
 
  ... 
} 

공식 데모:http://xiazai.jb51.net/201701/yuanma/NavigationDrawer(jb51.net).rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.