Android 구성 요소 DrawerLayout 모방 왕 이 뉴스 v 4.4 사 이 드 메뉴
21485 단어 AndroidDrawerLayout사 이 드 메뉴
오늘 이 블 로 그 는 DrawerLayout 에 대한 기본 적 인 용법 을 기록 할 것 입 니 다.DrawerLayout 의 용법 에 대해 잘 모 르 는 경우 가 많 을 것 이 라 고 생각 합 니 다.이것 도 비교적 정상 적 인 일 입 니 다.DrawerLayout 는 안 드 로 이 드 구성 요소 로 서 구 글 이 나중에 안 드 로 이 드 에 추 가 했 기 때 문 입 니 다.android.support.v4 가방 에 있 습 니 다.그렇다면 DrawerLayout 는 어떤 구성 요소 일 까요?우 리 는 우리 가 안 드 로 이 드 에서 각종 앱 을 사용 할 때 앱 홈 페이지 에 보통'사 이 드 메뉴'가 있다 는 것 을 알 고 있 습 니까?사 이 드 스 케 이 트 메뉴 의 실현 에 대해 저 는 앞의 블 로그 에 소개 가 있 습 니 다.더 알 고 싶 은 친 구 는 걸음 을 옮 겨 주세요.
Android 사용자 정의 컨트롤―사 이 드 메뉴
Android 사용자 정의 컨트롤―오픈 소스 구성 요소 SlidingMenu 프로젝트 통합
'왕 이 뉴스'클 라 이언 트 v 4.4 의 캡 처 를 통 해 이 DrawerLayout 서랍 식 레이아웃 이 어떤 모습 인지 설명 합 니 다.
자,보시 다시 피 왕 이 뉴스 클 라 이언 트 의 효과 가 매우 뚜렷 합 니 다.우리 손가락 이 화면 왼쪽 에서 오른쪽으로 미 끄 러 질 때 서랍 식 메뉴 가 왼쪽 에서 튀 어 나 오고'떠 있 는'메 인 화면 위 에 있 습 니 다.장치 에 제 한 된 공간 을 합 리 적 으로 이용 합 니 다.마찬가지 로 손가락 이 화면 오른쪽 에서 왼쪽으로 미 끄 러 지면 왼쪽으로 튀 어 나 오 는 서랍 식 메뉴 가 나타 납 니 다.사용자 체험 효 과 는 좋 습 니 다.DrawerLayout 가 나타 나 기 전에 사 이 드 메뉴 를 만들어 야 할 때 Github 의 오픈 소스 프로젝트 SlidingMenu 를 사용 해 야 합 니 다.Google 도 SlidingMenu 의 강력 한 점 을 보 았 을 수도 있 습 니 다.그래서 Android 후기 버 전에 DrawerLayout 을 추가 하여 SlidingMenu 와 같은 기능 을 수행 하 는 구성 요 소 를 추 가 했 습 니 다.또한 초기 버 전 을 호 환 하기 위해 안 드 로 이 드,슈퍼 port.v4 패키지 에 추가 합 니 다.
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
또한 Google 의 Training 과정 을 번 역 했 습 니 다.주 소 는 다음 과 같 습 니 다.https://www.jb51.net/article/102142.htm
효과 미리 보기
서랍 레이아웃 만 들 기
아래 서랍 레이아웃 은 android.support.v4.DrawerLayout 를 참조 합 니 다.LineaLayout,RelativeLayout 등 레이아웃 과 같이 정 의 됩 니 다.DrawerLayout 내부 에서 3 개의 레이아웃 을 정의 합 니 다.각각 메 인 화면 을 관리 하 는 FrameLayout 입 니 다.이 레이아웃 은 화면 전환 을 보 여 주 는 Fragment 입 니 다.다음은 ListView 입 니 다.메뉴 목록 을 보 여 주 는 데 사 용 됩 니 다.마지막 으로 RelativeLayout 입 니 다.오른쪽 레이아웃 을 보 여 줍 니 다.레이아웃 코드 는 다음 과 같 습 니 다.
<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" >
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="@+id/left_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
<RelativeLayout
android:id="@+id/right_drawer"
android:layout_width="220dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#111"
android:gravity="center_horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textColor="@android:color/white"
android:textSize="24sp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
위 에서 말 한 바 와 같이 DrawerLayout 에는 왼쪽 표시 줄 사 이 드 슬라이드 메뉴 로 ListView 가 포함 되 어 있 기 때문에 이 서랍 목록 을 먼저 초기 화하 고 이 목록 에 데 이 터 를 맞 춰 야 합 니 다.데이터 어댑터 는 가장 간단 한 Array Adapter 를 사용 합 니 다.아 날로 그 데 이 터 는 res/values/strings.xml 에 간단하게 정의 되 어 있 습 니 다.다음 과 같 습 니 다.
<string-array name="menu_array">
<item>Menu 1</item>
<item>Menu 2</item>
<item>Menu 3</item>
<item>Menu 4</item>
</string-array>
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
......
//
mMenuTitles = getResources().getStringArray(R.array.menu_array);
mMenuListView.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mMenuTitles));
mMenuListView.setOnItemClickListener(new DrawerItemClickListener());
......
}
사용자 가 서랍 목록 에 있 는 아 이 템 을 선 택 했 을 때 시스템 은 온 아 이 템 클릭 Listener 의 온 아 이 템 클릭()을 호출 하여 seton 아 이 템 클릭 Listener()에 게 온 아 이 템 클릭()방법 에서 무엇 을 하 는 지 알려 줍 니 다.다음 예 에서 모든 아 이 템 을 선택 하면 주요 내용 의 레이아웃 에 다른 Fragment 를 삽입 합 니 다.또한 내 비게 이 션 목록 의 내용 을 Fragment 에 전달 합 니 다.다음은 부분 코드 입 니 다.
/**
* ListView Item
*
*/
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectItem(position);
}
}
/**
* Fragment
*
* @param position
*/
private void selectItem(int position) {
// TODO Auto-generated method stub
Fragment fragment = new ContentFragment();
Bundle args = new Bundle();
switch (position) {
case 0:
args.putString("key", mMenuTitles[position]);
break;
case 1:
args.putString("key", mMenuTitles[position]);
break;
case 2:
args.putString("key", mMenuTitles[position]);
break;
case 3:
args.putString("key", mMenuTitles[position]);
break;
default:
break;
}
fragment.setArguments(args); // FragmentActivity Fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();
// item title，
mMenuListView.setItemChecked(position, true);
setTitle(mMenuTitles[position]);
mDrawerLayout.closeDrawer(mMenuListView);
}
세심 한 친 구 는'왕 이 뉴스'v 4.4 클 라 이언 트 홈 페이지 왼쪽 상단 에 메뉴'동적'메뉴 버튼 이 있 는 것 을 발견 할 수 있 습 니 다.디 스 플레이 프로 세 스 가 이 렇 습 니 다.메뉴 가 열 리 지 않 았 을 때'3'과 같은 세 개의 횡선 을 표시 합 니 다.메뉴 가 열 렸 을 때'<-'라 는 단 추 를 표시 합 니 다.끊임없이 변화 합 니 다.이런 거 좀 화사 하지 않 아 요?!안 드 로 이 드 5.0 을 알 아 보신 분 들 은 이 효과 가 안 드 로 이 드 5.0 이 새로 출시 한 머 티 리 얼 디자인 언어 를 사용 해 만 든 효과 라 는 것 을 알 수 있 을 것 입 니 다.그렇다면 이 효 과 를 어떻게 따라 해 야 할 까요?죄송합니다.게 으 름 을 피 워 서 소 와 소의 Github 에서 이러한 효 과 를 찾 았 습 니 다.material-menu 구성 요 소 는 Android 5.0 의 Material Design 효 과 를 모 의 했 습 니 다.주의해 야 할 것 은 이 구성 요소 에서 JackWharton 의 Nine Old Androids 애니메이션 효 과 를 사 용 했 습 니 다.
material-menu 홈 페이지:https://github.com/balysv/material-menu
NineOldAndroids 홈 페이지:https://github.com/JakeWharton/NineOldAndroids
material-menu 의 사용 은 홈 페이지 의 데모 와 설명 을 참고 할 수 있 으 며,통합 시 Nine Old Androids 내 보 내기 jar 를 다운로드 하여 프로젝트 에 통합 해 야 합 니 다.다음은 제 가 사용 하 는 부분 코드 입 니 다.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
......
// ，
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
// ActionBar ，
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
mMaterialMenuIcon = new MaterialMenuIcon(this, Color.WHITE, Stroke.THIN);
mDrawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
showView = drawerView;
if (drawerView == mMenuListView) {
mMaterialMenuIcon.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW, isDirection_left ? 2 - slideOffset : slideOffset);
} else if (drawerView == right_drawer) {
mMaterialMenuIcon.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW, isDirection_right ? 2 - slideOffset : slideOffset);
}
}
@Override
public void onDrawerOpened(android.view.View drawerView) {
if (drawerView == mMenuListView) {
isDirection_left = true;
} else if (drawerView == right_drawer) {
isDirection_right = true;
}
}
@Override
public void onDrawerClosed(android.view.View drawerView) {
if (drawerView == mMenuListView) {
isDirection_left = false;
} else if (drawerView == right_drawer) {
isDirection_right = false;
showView = mMenuListView;
}
}
});
......
}
/**
* onPostCreate ， icon state
*/
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mMaterialMenuIcon.syncState(savedInstanceState);
}
/**
* onSaveInstanceState ， icon state
*/
@Override
protected void onSaveInstanceState(Bundle outState) {
mMaterialMenuIcon.onSaveInstanceState(outState);
super.onSaveInstanceState(outState);
}
'왕 이 뉴스'v 4.4 클 라 이언 트 홈 페이지 를 최대한 모 의 하기 위해 저도 제목 표시 줄 오른쪽 상단 에 작은 아이콘 을 추가 합 니 다.이 작은 아이콘 을 클릭 할 때 오른쪽 표시 줄 메뉴 를 팝 업 할 수 있 도록 실현 방식 이 간단 합 니 다.Action Bar 에 네 비게 이 션 을 추가 하 는 지식 은 csdn 에서 설명 을 찾 거나 Android 개발 자 홈 페이지 에 올 라 가 원본 문 서 를 볼 수 있 습 니 다.저 는 먼저 res/menu 에서 main.xml 에서 하 나 를 간단하게 정의 합 니 다.
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/action_personal"
android:icon="@drawable/action_personal"
android:orderInCategory="100"
android:showAsAction="always"
android:title="@string/action_personal"/>
</menu>
/**
*
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
/**
* ActionBar
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id) {
case android.R.id.home:
if (showView == mMenuListView) {
if (!isDirection_left) { // ，
mDrawerLayout.openDrawer(mMenuListView);
} else {// ，
mDrawerLayout.closeDrawer(mMenuListView);
}
} else if (showView == right_drawer) {
if (!isDirection_right) {// ，
mDrawerLayout.openDrawer(right_drawer);
} else {// ，
mDrawerLayout.closeDrawer(right_drawer);
}
}
break;
case R.id.action_personal:
if (!isDirection_right) {// ，
if (showView == mMenuListView) {
mDrawerLayout.closeDrawer(mMenuListView);
}
mDrawerLayout.openDrawer(right_drawer);
} else {// ，
mDrawerLayout.closeDrawer(right_drawer);
}
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
마찬가지 로 현재 오른쪽 네 비게 이 션 메뉴 가 표시 되 거나 숨겨 져 있다 면 오른쪽 네 비게 이 션 이 표시 되 었 는 지 여 부 를 판단 하여 열 리 거나 숨겨 진 결정 을 내 려 야 합 니 다.
여기 서 의 논 리 는 약간 어 지 럽 게 해석 되 는 것 같 습 니 다.그리고 코드 는 세 션 으로 나 누 어 붙 여 져 서 이해 하기 어렵 습 니 다.더 이해 해 야 한다 면 아래 부분 을 계속 보 세 요.저 는 이미 붙 여 놓 았 기 때문에 자바 코드 도 상세 하고 주석 도 상세 하 며 이해 하기 쉽 습 니 다.정말 안 됩 니 다.블 로그 아래 의 다운로드 링크 를 클릭 하여 소스 코드 를 직접 다운로드 하여 실행 할 수 있 습 니 다.
모든 원본 코드
public class MainActivity extends FragmentActivity {
/** DrawerLayout */
private DrawerLayout mDrawerLayout;
/** */
private ListView mMenuListView;
/** */
private RelativeLayout right_drawer;
/** */
private String[] mMenuTitles;
/** Material Design */
private MaterialMenuIcon mMaterialMenuIcon;
/** / */
private boolean isDirection_left = false;
/** / */
private boolean isDirection_right = false;
private View showView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mMenuListView = (ListView) findViewById(R.id.left_drawer);
right_drawer = (RelativeLayout) findViewById(R.id.right_drawer);
this.showView = mMenuListView;
//
mMenuTitles = getResources().getStringArray(R.array.menu_array);
mMenuListView.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mMenuTitles));
mMenuListView.setOnItemClickListener(new DrawerItemClickListener());
// ，
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
GravityCompat.START);
// ActionBar ，
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
mMaterialMenuIcon = new MaterialMenuIcon(this, Color.WHITE, Stroke.THIN);
mDrawerLayout.setDrawerListener(new DrawerLayoutStateListener());
if (savedInstanceState == null) {
selectItem(0);
}
}
/**
* ListView Item
*
*/
private class DrawerItemClickListener implements
ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
selectItem(position);
}
}
/**
* DrawerLayout
*/
private class DrawerLayoutStateListener extends
DrawerLayout.SimpleDrawerListener {
/**
*
*/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
showView = drawerView;
if (drawerView == mMenuListView) {// isDirection_left
mMaterialMenuIcon.setTransformationOffset(
MaterialMenuDrawable.AnimationState.BURGER_ARROW,
isDirection_left ? 2 - slideOffset : slideOffset);
} else if (drawerView == right_drawer) {// isDirection_right
mMaterialMenuIcon.setTransformationOffset(
MaterialMenuDrawable.AnimationState.BURGER_ARROW,
isDirection_right ? 2 - slideOffset : slideOffset);
}
}
/**
*
*/
@Override
public void onDrawerOpened(android.view.View drawerView) {
if (drawerView == mMenuListView) {
isDirection_left = true;
} else if (drawerView == right_drawer) {
isDirection_right = true;
}
}
/**
*
*/
@Override
public void onDrawerClosed(android.view.View drawerView) {
if (drawerView == mMenuListView) {
isDirection_left = false;
} else if (drawerView == right_drawer) {
isDirection_right = false;
showView = mMenuListView;
}
}
}
/**
* Fragment
*
* @param position
*/
private void selectItem(int position) {
Fragment fragment = new ContentFragment();
Bundle args = new Bundle();
switch (position) {
case 0:
args.putString("key", mMenuTitles[position]);
break;
case 1:
args.putString("key", mMenuTitles[position]);
break;
case 2:
args.putString("key", mMenuTitles[position]);
break;
case 3:
args.putString("key", mMenuTitles[position]);
break;
default:
break;
}
fragment.setArguments(args); // FragmentActivity Fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.content_frame, fragment).commit();
// item title，
mMenuListView.setItemChecked(position, true);
setTitle(mMenuTitles[position]);
mDrawerLayout.closeDrawer(mMenuListView);
}
/**
* ActionBar
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id) {
case android.R.id.home:
if (showView == mMenuListView) {
if (!isDirection_left) { // ，
mDrawerLayout.openDrawer(mMenuListView);
} else {// ，
mDrawerLayout.closeDrawer(mMenuListView);
}
} else if (showView == right_drawer) {
if (!isDirection_right) {// ，
mDrawerLayout.openDrawer(right_drawer);
} else {// ，
mDrawerLayout.closeDrawer(right_drawer);
}
}
break;
case R.id.action_personal:
if (!isDirection_right) {// ，
if (showView == mMenuListView) {
mDrawerLayout.closeDrawer(mMenuListView);
}
mDrawerLayout.openDrawer(right_drawer);
} else {// ，
mDrawerLayout.closeDrawer(right_drawer);
}
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
/**
* onPostCreate ， icon state
*/
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mMaterialMenuIcon.syncState(savedInstanceState);
}
/**
* onSaveInstanceState ， icon state
*/
@Override
protected void onSaveInstanceState(Bundle outState) {
mMaterialMenuIcon.onSaveInstanceState(outState);
super.onSaveInstanceState(outState);
}
/**
*
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
