2014-04-21 15 views
10

Làm cách nào để triển khai ngăn điều hướng android như thế này?Làm cách nào để triển khai ngăn điều hướng android có thể mở rộng với phụ đề?

TopLevelView1 ~ TopLevelView4 có thể chọn và không có con
TopVevelView5 thể collaspe

Câu hỏi của tôi là nếu cấu trúc nhóm của tôi như thế này ví dụ

Tất cả
nhìn chằm chằm
Thể loại
---- mp3
---- txt
---- doc
---- pdf

khi tôi chọn tất cả rồi hiển thị tất cả tệp.

khi tôi chọn nhìn chằm chằm rồi chỉ hiển thị tệp được xem.

khi tôi chọn mp3, sau đó chỉ hiển thị các tệp mp3.

và Danh mục có thể mở rộng và thu gọn.

https://developer.android.com/design/media/navigation_drawer_collapse.png

+1

Trông giống như một 'ExpandableListView'. Bên cạnh đó bạn thực hiện nó chính xác giống như bạn làm với một 'ListView' bình thường. Hình ảnh đến từ trang dành cho nhà phát triển Android. Tại sao bạn không làm theo hướng dẫn ở đó? [Đây là] (https://developer.android.com/training/implementing-navigation/nav-drawer.html) –

+0

Bạn có thể muốn sử dụng một ExpandableListView ... đây là một ví dụ: http: //www.androidhive .info/2013/07/android-expandable-list-view-tutorial/ –

+1

Xin lỗi vì không mô tả rõ ràng câu hỏi của tôi.Tôi đã cập nhật câu hỏi của mình. – Sagi

Trả lời

3

Đối với navigation:

  • Alternative 1:

    trượt Menu, mà tôi chắc chắn sẽ đi với. Thậm chí được sử dụng bởi các ứng dụng phổ biến như LinkedIn và Foursquare và dễ dàng triển khai và sử dụng. Full giải thích và nguồn ví dụ mã: SlidingMenu - GitHub

  • Phương án 2:

    Android Navigation Drawer. Nếu bạn muốn tự hoàn toàn tùy chỉnh mọi thứ mà không cần sử dụng bất kỳ thư viện nào, đây là tùy chọn của bạn. Bạn có thể kiểm tra mã và làm thế nào để làm điều đó từ trang web của nhà phát triển Android: Creating a Navigation Drawer

Xem bên trong menu ngăn kéo/trượt menu của bạn:

  • Alternative 1:

    Android mặc định ExpandableListView. Liên kết: Android Developers, androidhive

  • Phương án 2:

    AnimatedExpandableListView, được thực hiện từ ExpandableListView, nhưng khi một mục được nhấp, mở rộng được thực hiện với một hình ảnh động trơn tru mà bạn có thể thích để sử dụng cho một nhìn tốt hơn.AnimatedExpandableListView

1

Hãy thử một cái gì đó giống như mã

<android.support.v4.widget.DrawerLayout 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <FrameLayout 
     android:id="@+id/drawer_list_container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" > 

     <ExpandableListView 
      android:id="@+id/drawer_list" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_gravity="center"/> 
    </FrameLayout> 
</android.support.v4.widget.DrawerLayout> 

Java:

drawerListView.setAdapter(new ExpandableListAdapter() { 

      @Override 
      public void unregisterDataSetObserver(DataSetObserver observer) { 
       // TODO Auto-generated method stub 

      } 

      @Override 
      public void registerDataSetObserver(DataSetObserver observer) { 
       // TODO Auto-generated method stub 

      } 

      @Override 
      public void onGroupExpanded(int groupPosition) { 
       // TODO Auto-generated method stub 

      } 

      @Override 
      public void onGroupCollapsed(int groupPosition) { 
       // TODO Auto-generated method stub 

      } 

      @Override 
      public boolean isEmpty() { 
       // TODO Auto-generated method stub 
       return false; 
      } 

      @Override 
      public boolean isChildSelectable(int groupPosition, int childPosition) { 
       // TODO Auto-generated method stub 
       return false; 
      } 

      @Override 
      public boolean hasStableIds() { 
       // TODO Auto-generated method stub 
       return true; 
      } 

      @Override 
      public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { 
       // TODO Auto-generated method stub 
       TextView view = new TextView(getApplicationContext()); 
       view.setText("group " + groupPosition); 
       return view; 
      } 

      @Override 
      public long getGroupId(int groupPosition) { 
       // TODO Auto-generated method stub 
       return groupPosition; 
      } 

      @Override 
      public int getGroupCount() { 
       // TODO Auto-generated method stub 
       return 5; 
      } 

      @Override 
      public Object getGroup(int groupPosition) { 
       // TODO Auto-generated method stub 
       return null; 
      } 

      @Override 
      public long getCombinedGroupId(long groupId) { 
       // TODO Auto-generated method stub 
       return 0; 
      } 

      @Override 
      public long getCombinedChildId(long groupId, long childId) { 
       // TODO Auto-generated method stub 
       return 0; 
      } 

      @Override 
      public int getChildrenCount(int groupPosition) { 
       // TODO Auto-generated method stub 
       return 5; 
      } 

      @Override 
      public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, 
        ViewGroup parent) { 
       TextView view = new TextView(getApplicationContext()); 
       view.setText("child " + groupPosition); 
       return view; 
      } 

      @Override 
      public long getChildId(int groupPosition, int childPosition) { 
       // TODO Auto-generated method stub 
       return childPosition ; 
      } 

      @Override 
      public Object getChild(int groupPosition, int childPosition) { 
       // TODO Auto-generated method stub 
       return null; 
      } 

      @Override 
      public boolean areAllItemsEnabled() { 
       // TODO Auto-generated method stub 
       return false; 
      } 
     }); 
Các vấn đề liên quan