DrawerLayout의 간단한 사용(공식 측면 슬라이딩 메뉴)
이 섹션 소개:
이 섹션에서는 기본 UI 컨트롤 부분의 마지막 컨트롤인 DrawerLayout, 공식에서 제공하는 측면 슬라이딩 메뉴를 제공합니다. 이전 섹션의 ViewPager와 같은 컨트롤은 3.0 이후에 도입되었습니다. 하위 버전에서 사용하려면 사이드 슬라이딩의 경우 v4 호환 패키지가 필요하다고 생각합니다. 많은 사람들이 github에서 SlidingMenu를 사용해 왔지만 두 가지 버전이 있는 것 같습니다. 하나는 독립적이고 다른 하나는 다른 하나에 의존합니다. 오픈 소스 프로젝트: ActionBarSherlock; Google이 이 컨트롤을 제공하므로 사용하지 않으시겠습니까? 머티리얼 디자인 디자인 사양에서 어디에서나 볼 수 있는 여러 사이드 슬라이딩 메뉴의 애니메이션 효과는 대부분 툴바 + ~을 달성하기 위한 DrawerLayout, 이 섹션에서는 DrawerLayout의 기본 사용법을 살펴보겠습니다. ~ 일부 사람들은 이를 사용하기를 좋아합니다. 서랍 컨트롤이라고 합니다~공식 문서: DrawerLayout
1
메인 콘텐츠 뷰는 DrawerLayout
- 2의 첫 번째 하위 뷰여야 합니다. 높이는 match_parent
- 3여야 합니다. 지정된 측면 슬라이딩 보기의 android:
layout_gravity 속성이 표시되어야 합니다.- android:layout_gravity = "start"이면 메뉴가 왼쪽에서 오른쪽으로 슬라이드됩니다. android:layout_gravity = "end"일 때 메뉴를 오른쪽에서 왼쪽으로 밀어냅니다. 왼쪽, 오른쪽 사용은 권장하지 않습니다!!! 사이드 슬라이딩 뷰의 너비는 dp이며, 320dp를 초과하는 것은 권장하지 않습니다. (일부 메인 콘텐츠 뷰를 항상 보기 위해)
- 설정 측면 슬라이딩 이벤트: mDrawerLayout.setDrawerListener(DrawerLayout .DrawerListener);한 가지 주의할 점: 사용자가 Actionbar에서 애플리케이션 아이콘을 클릭하면 측면 슬라이딩 메뉴가 나타납니다. ! 여기서는 DrawerLayout.DrawerListener의 특정 구현 클래스인
ActionBarDrawerToggle- 을 전달해야 합니다. ActionBarDrawerToggle의 onDrawerOpened() 및 onDrawerClosed()를 재정의하여 서랍 풀아웃을 수신할 수 있습니다. 아니면 이벤트를 숨기세요! 하지만 5.0 이후에는 툴바를 사용하기 때문에 여기서는 이에 대해 이야기하지 않겠습니다! 관심 있으신 분들은 관련 정보를 직접 확인해보세요 문서!
- 2. 코드 예제 사용
예 1: 단일 측면 슬라이딩 메뉴 구현
렌더링 실행
:
키 코드 구현:
첫 번째는 메인 레이아웃입니다. 참고: 가장 바깥쪽 레이어는 DrawerLayout이어야 합니다! ! ! !
activity_main.xml:
android:id="@+id/drawer_layout"
android:layout_width ="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent" / >
<ListView
android:id="@+id/list_left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:Background="../ style/images/android-tutorial-drawerlayout.html"
android:choiceMode="singleChoice"
android:divider="#FFFFFF"
android:dividerHeight="1dp" />
</android.support.v4 .widget.DrawerLayout>
接着ListView의 布局代码과 domain类:Item比较简单,就不给流了,直接上中间Fragment的 布局以及代码吧!另外Adapter直接复用我们之前写的那个可复用的MyAdapter!
fg_content.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp " />
</RelativeLayout>
ContentFragment.java:
* 2015년 10월 8일 0008년 Jay가 작성함.
*/
public class ContentFragment extends Fragment {
private TextView tv_content;
@Override
public View onCreateView(LayoutIn 더 평평한 팽창기, ViewGroup 컨테이너, BundleSavedInstanceState) { ㅋㅋㅋ ;
tv_content.setText(text);
반환 보기;
}
}
마지막으로 활동 클래스
MainActivity.java:
menuLists;
private MyAdapter<Item> myAdapter = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout );
list_left_drawer = (ListView) findViewById(R.id.list_left_drawer);
menuLists = new ArrayList<Item>();
menuLists.add(new Item(R.mipmap.iv_menu_realtime ,"实时信息"));
menuLists.add(new Item(R.mipmap.iv_menu_alert,"提醒통지"));
menuLists.add(new Item(R.mipmap.iv_menu_trace,"活动路线"));
menuLists. add(새 항목( R.mipmap.iv_menu_settings,"상关设置")));
myAdapter = new MyAdapter<Item>(menuLists,R.layout.item_list) {
@Override
public void bindView( ViewHolder 홀더, 항목 obj) {
holder.setImageResource (R.id.img_icon,obj.getIconId());
holder.setText(R.id.txt_content, obj.getIconName());
}
};
list_left_drawer.setAdapter( myAdapter);
list_left_drawer.setOnItemClickListener( this);
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ContentFragment contentFragment = new ContentFragment();
Bundle args = new Bundle();
args.putString("text", menuLists. get(긍정적) .geticonName());
ContentFragment.Setarguments(ARGS);
FragmentManager FM = GetSupportfragmentManager(); .replace(R.id.ly_content, ContentFragment) .Commit();
}
}
글쎄, 갖고 계실지 모르겠네요 위의 DrawerLayout의 레이아웃은 아마도 DrawerLayout에서 추측할 수 있습니다. 중앙의 콘텐츠 부분, 왼쪽의 사이드 슬라이딩 메뉴 부분, 오른쪽의 사이드 슬라이딩 메뉴 부분까지 최대 3개 부분으로 구성되어 있습니다! 두 개의 측면 슬라이딩 메뉴를 사용하여 예시를 작성해 보겠습니다.
렌더링 실행
:
코드 구현:먼저 두 개의 조각과 해당 레이아웃을 만듭니다. 각각 왼쪽과 오른쪽 슬라이딩 메뉴입니다!
Left Fragment: Layout:
fg_left.xml, 여기에 사진이 사용되며 클릭하면 새 활동이 나타납니다. 물론 필요에 따라 확장할 수도 있습니다!
<?xml version="1.0" 인코딩="utf-8"?>android:layout_height="match_parent">
<ImageView
android:id="@+id/img_bg"
android:layout_width="match_parent"
android: layout_height="match_parent"
android:Background="../style/images/bg_menu_left"/>
</LinearLayout>
对应的LeftFragment.java:
* 2015년 10월 9일 0009년 Jay가 작성함.
*/
public 클래스 LeftFragment는 Fragment를 확장합니다{
private DrawerLayout drawer_layout;
@Override
public View onCreateView(LayoutInflater 팽창기, ViewGroup 컨테이너, BundleSavedInstanceState ) {
보기 보기 = inflater.inflate(R.layout.fg_left, container, false);
ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg);
img_bg.setOnClickListener (새로운 View.OnClickListener() {
@Override
public void onClick(View v) {
getActivity().startActivity(new Intent(getActivity(),OtherActivity.class));
서랍_ layout.closeDrawer(Gravity.START);
}
});
return view;}}}
// 暴露 给 activity a activity, 用于 传入 传入 drawerlayout, 因为 点击 点击 后 想 关掉 drawerlayout
public void setdrawerlayout (drawerlayout drawer_layout) {
this.drawer_layout = drawer_layout;}}}}
Fragment 오른쪽:
레이아웃은 버튼 3개뿐입니다. 클릭한 후 가운데 부분의 Fragment를 교체합니다. 레이아웃 fg_right.xml코드는 다음과 같습니다.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height= "match_parent"
android:Background= "../style/images/android-tutorial-drawerlayout.html"
android:gravity="center"
android:orientation="vertical">
<Button
android: id="@+id/btn_one "
Android:layout_width ="wrap_content"
Android:layout_height ="wrap_content "
Android: text ="메뉴 항목 "/& & lt; ID = "@+ID/btn_two"
Android:layout_width = "wrap_content"
Android:layout_height = "wrap_content"
Android: text = "메뉴 항목 2"/& lt; 버튼
android: id = "@+i d/btn_3 "
android:layout_width ="wrap_content " ㅋㅋㅋ ~ 안드로이드를 통해:
그러면 해당하는 것은 RightFragment.java:
입니다.* 2015년 10월 9일 0009년 Jay가 작성함.
*/
public 클래스 RightFragment는 조각을 확장하여 View.OnClickListener를 구현합니다.{
private DrawerLayout drawer_layout;
private FragmentManager fManager;
@Override
public View onCreateView (LayoutInflater 팽창기, ViewGroup 컨테이너, BundleSavedInstanceState) {
보기 보기 = inflater.inflate(R.layout.fg_right, container, false);
view.findViewById(R.id.btn_one).setOnClickListener(this);
view.findViewById(R.id.btn_two).set OnClickListener (this);
view.findViewById(R.id.btn_ three).setOnClickListener(this);
fManager = getActivity().getSupportFragmentManager();
return view;
}
@Override
public void onClick(View v) {
스위치 (v.getId()){
case R.id.btn_one:
ContentFragment cFragment1 = 새 ContentFragment("1.点击了右侧菜单项一",R.color.blue);
fManager.beginTransaction( ).replace(R.id.fly_content,cFragment1).commit();
drawer_layout.closeDrawer(Gravity.END);
break;
case R.id.btn_two:
ContentFragment cFragment2 = 새 ContentFragment("2.点击了右侧菜单项이",R.color.red);
fManager.beginTransaction().replace(R.id.fly_content,cFragment2).commit();
drawer_layout.closeDrawer(Gravity.END);
휴식;
Case R.id.btn_3:
ContentFragment CFRAGMENT3 = New ContentFragment ("3. 오른쪽 메뉴 항목 3을 클릭하세요.", R.Color.yellow) id.fly_content, cfragment3) .commit();
draw_layout.closeDrawer(Gravity .END);
break; drawer_layout){
This.drawer_layout = draw_layout;
}
}
또한 중간에 ContentFragment가 채워져 있으며 레이아웃은
fg_content.xml
입니다.
<RelativeLayout xmlns:android="http:/ /schemas.android.com/apk/res/android" android:layout_width="match_parent " android:layout_height="match_parent"
android:orientation="vertical">android:id=" @+id/tv_content"
android:layout_width="wrap_content"
android:layout_height=" Wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp" />
</RelativeLayout>
ContentFragment.java:
private TextView tv_content;
private String strContent;
private int bgColor;
public ContentFragment(String strContent,int bgColor) {
This.strContent = strContent ; S this.bgcolor = bgcolor;
}@v@v Public View OncreateView(Layoutinflator Inflator, ViewGroup Container, Bundle SavedanceState) {
View v iEW = Inflator.inflate(R.Layout.fg_Content, Container, FALSE); .setBackgroundColor(getResources().getColor(bgColor));
tv_content = (TextView) view.findViewById(R.id.tv_content);
tv_content.setText(strContent);
return view;
}
}
작성 그런 다음 활동 레이아웃과 활동 코드로 이동할 차례입니다. 그 전에 상단 표시줄의 레이아웃도 필요합니다:
<?xml version="1.0" 인코딩="utf-8"?><RelativeLayout xmlns :android ="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content"<Button
android:id="@+id/btn_right "
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android :layout_alignParentRight="true"
그런 다음 activity_main.xml:
xmlns:tools="http://schemas.android.com/ tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height= "match_parent"
android:orientation="vertical">
<include
android:id="@+id/topbar"
layout="@layout/view_topbar"
android:layout_width="wrap_content"
안드로이드: layout_height="48dp" />
<FrameLayout
android:id="@+id/fly_content"
android:layout_width="match_parent"
android:layout_height="match_parent" " />
</LinearLayout> ;
<fragment
android:id="@+id/fg_left_menu"
android:name="jay.com.drawerlayoutdemo2.LeftFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android :layout_gravity="start"
android:tag="LEFT"
tools:layout="@layout/fg_left" />
<fragment
android:id="@+id/fg_right_menu"
android:이름= "jay.com.drawerlayoutdemo2.RightFragment"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:tag="RIGHT"
tools:layout="@layout/fg_right" />
</android.support.v4.widget. 서랍 레이아웃>
마지막으로 MainActivity.java:
public class mainactivity는 appcompatactivity를 확장합니다. @OverridesetContentView(R.layout.activity_main);
fManager = getSupportFragmentManager();
fg_right _menu = (RightFragment) fManager.findFragmentById(R.id. fg_right_menu);
fg_left_menu = (LeftFragment) fManager.findFragmentById(R.id.fg_left_menu);
initViews();
}
private void initViews() {
drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
fly_content = (FrameLayout) findViewById(R.id.fly_content);
topbar = findViewById(R.id.topbar);
btn_right = (버튼) topbar.findViewById(R.id.btn_right);
btn_right.setOnClickListener(this );
//设置右侧滑菜单只能通过编程来打开
drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
Gravity.END);
drawer_layout.setDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View view, float v) {
}
@Override
public void onDrawerOpened(보기 보기) {
}
@Override
public void onDrawerClosed(보기 보기) {
drawer_layout.setDrawerLockMode(
DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
}
@Override
공개 void onDrawerStateChanged(int i) {
}
});
fg_right_menu.setDrawerLayout(drawer_layout);
fg_left_menu.setDrawerLayout(drawer_layout);
}
@Override
public void onClick(View v) {
drawer_layout.openDrawer (Gravity.RIGHT);
drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
Gravity.END); //解除锁정
}
}
자 이제 끝났습니다~ 후후, 코드를 볼 때 가질 수 있는 의심에 대해 이야기해 봅시다:
- 1.drawer_layout.openDrawer(Gravity.END);
이 문장은 어떤 메뉴가 열리나요? START는 왼쪽을 나타내고 END는 오른쪽을 나타냅니다- 2.drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END); 오른쪽 사이드 슬라이딩 메뉴는 잠겨져 있어 제스처로는 열거나 닫을 수 없습니다. 코드를 통해서만 열 수 있어요! 즉, openDrawer 메소드를 호출하세요! 그런 다음 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END); 잠금 상태를 잠금 해제합니다. 즉, 제스처를 통해 측면 슬라이딩 메뉴를 닫을 수 있습니다. 마지막으로 서랍이 닫힐 때 호출됩니다. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END); 오른쪽 슬라이딩 메뉴를 다시 잠그세요!
- 3. 레이아웃 코드에서 태그 속성의 역할은 무엇인가요? 답변: 여기서는 DrawerListener의 onDrawerSlide 메서드를 재정의할 때 첫 번째로 전달할 수 있습니다. drawView 매개변수, drawView.getTag().equals("START")를 호출하여 어느 것이 메뉴 이벤트를 트리거했는지 확인합니다. 메뉴! 그러면 해당 작업을 수행할 수 있습니다!
3. 코드 샘플 다운로드
DrawerLayoutDemo.zip
DrawerLayoutDemo2.zip
이 섹션 요약:
이 섹션에서는 공식 측면 슬라이딩 컨트롤 DrawerLayout의 기본 사용법을 소개합니다. 사용하기 일어나기가 매우 편리합니다! 물론 이것은 단순한 사용법 시연일 뿐입니다. 또한 Zhang Yang이 쓴 Android DrawerLayout high imitation QQ5.2 양방향 측면 슬라이딩 메뉴를 살펴보실 수 있습니다. 이 섹션의 내용을 읽으시면 이해하지 못하실 거라 믿습니다~ 좋아요!
이 섹션은 여기까지입니다. UI 컨트롤 챕터에 작별 인사를 하세요~ 다음 챕터에서는 그리기와 애니메이션을 시작하겠습니다. 고급 맞춤형 컨트롤 시리즈의 기반을 마련하세요!