2013-06-07 35 views
15

Tôi đã tạo một dự án với đối tượng ngăn điều hướng mới.Ngăn điều hướng: thêm tiêu đề trong listview

Tôi muốn tùy chỉnh bố cục của menu, để thêm đối tượng khác như TextView, ImageView ... Và để bắt đầu, tôi muốn sửa đổi bố cục mặc định chỉ được tạo bằng một listview, bằng cách thêm 2 hoặc 3 tiêu đề trong listview.

Hôm nay, tôi đã cố gắng sử dụng "addHeaderView" nhưng tôi nghĩ rằng có thể sử dụng điều này chỉ để thêm một tiêu đề.

Tôi làm cách nào để thêm tiêu đề và thực sự tùy chỉnh trình đơn bố cục của mình? Bởi vì, từ API nhà phát triển, có vẻ như chỉ có hai trẻ em được phép theo "android.support.v4.widget.DrawerLayout".

Dưới đây là một ảnh chụp của bố trí của tôi ngày hôm nay:

Navigation Drawer Headers in listview

Và đây là một ảnh chụp mà tôi muốn tạo:

Navigation Drawer Headers in listview

Dưới đây là một đoạn mã của tôi MainActivity:

public class MainActivity extends Activity { 
private DrawerLayout mDrawerLayout; 
private ListView mDrawerList; 
private ActionBarDrawerToggle mDrawerToggle; 

private CharSequence mDrawerTitle; 
private CharSequence mTitle; 
private String[] mPlanetTitles; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    mTitle = mDrawerTitle = getTitle(); 
    mPlanetTitles = getResources().getStringArray(R.array.planets_array); 
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 

    // Declaration of the 2 listview's 
    mDrawerList = (ListView) findViewById(R.id.dernieres_news); 

    LayoutInflater inflater = getLayoutInflater(); 

    // Add header news title 
    ViewGroup header_news = (ViewGroup)inflater.inflate(R.layout.header_dernieres_news, mDrawerList, false); 
    mDrawerList.addHeaderView(header_news, null, false); 

    // set a custom shadow that overlays the main content when the drawer opens 
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START); 

    String[] names=new String[]{"Title 1", "Title 2", "Title 3", "Title 4", "Title 5"}; 

    /*Array of Images*/ 
    int[] image = new int[] {R.drawable.ic_action_feed, R.drawable.ic_action_feed, R.drawable.ic_action_feed, R.drawable.ic_action_feed, R.drawable.ic_action_feed}; 

    List<HashMap<String, String>> listinfo = new ArrayList<HashMap<String, String>>(); 
    listinfo.clear(); 
    for(int i=0;i<5;i++){ 
     HashMap<String, String> hm = new HashMap<String, String>(); 
     hm.put("name", names[i]); 
     hm.put("image", Integer.toString(image[i])); 
     listinfo.add(hm); 
    } 

    // Keys used in Hashmap 
    String[] from = { "image", "name" }; 
    int[] to = { R.id.img, R.id.txt }; 
    SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), listinfo, R.layout.drawer_list_item, from, to); 
    mDrawerList.setAdapter(adapter); 

    mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); 

    // enable ActionBar app icon to behave as action to toggle nav drawer 
    getActionBar().setDisplayHomeAsUpEnabled(true); 
    getActionBar().setHomeButtonEnabled(true); 

    // ActionBarDrawerToggle ties together the the proper interactions 
    // between the sliding drawer and the action bar app icon 
    mDrawerToggle = new ActionBarDrawerToggle(
      this,     /* host Activity */ 
      mDrawerLayout,   /* DrawerLayout object */ 
      R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */ 
      R.string.drawer_open, /* "open drawer" description for accessibility */ 
      R.string.drawer_close /* "close drawer" description for accessibility */ 
      ) { 
     public void onDrawerClosed(View view) { 
      getActionBar().setTitle(mTitle); 
      invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
     } 

     public void onDrawerOpened(View drawerView) { 
      getActionBar().setTitle(mDrawerTitle); 
      invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() 
     } 
    }; 
    mDrawerLayout.setDrawerListener(mDrawerToggle); 

    if (savedInstanceState == null) { 
     selectItem(0); 
    } 
} 

Và mã của activity_main.xml:

<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/dernieres_news" 
     android:layout_width="240dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:background="#F3F3F4" 
     android:choiceMode="singleChoice" 
     android:divider="#E3E9E3" 
     android:dividerHeight="1dp" /> 

+0

'int [] để = {R.id.img, R.id.txt}; 'Nơi mà bạn đã định nghĩa này? – DroidLearner

Trả lời

8

Bạn sẽ làm điều đó theo cùng một cách như bạn sẽ thêm các đề mục trong bất kỳ ListView khác, bằng cách dạy ListAdapter của bạn để trả lại hàng tiêu đề cũng như hàng chi tiết . Ở cấp độ thấp, điều này bao gồm các phương pháp ghi đè như getViewTypeCount()getItemViewType() trong số ListAdapter của bạn, cộng với việc có getView() biết sự khác biệt giữa các loại hàng. Hoặc, sử dụng triển khai cấp cao hiện tại như https://github.com/emilsjolander/StickyListHeaders hoặc http://code.google.com/p/android-amazing-listview/ hoặc bất kỳ người nào khác được tìm thấy khi tìm kiếm android listview headers.

+0

Vì vậy, bạn không thể sử dụng cái gì khác ngoài ListView? (Giả sử bố cục có 3 nút) –

+0

@ThomasDecaux: Điều đó sẽ đi ngược lại các nguyên tắc thiết kế. Không có gì ngăn cản bạn đặt bất cứ thứ gì trong đó (mặc dù 'SurfaceView' có thể sẽ là một vấn đề). – CommonsWare

+0

Bạn đúng, cảm ơn –

1

Bạn sẽ phải phân lớp BaseAdapter và sử dụng nó thay vì SimpleAdapter trong ListView.

Bạn cung cấp bộ điều hợp với dữ liệu nhồi, nơi dữ liệu bổ sung là tiêu đề. Tiêu đề và bản thân danh sách sẽ là thành viên của cùng một lớp học. Sau đó, trong bộ điều hợp bạn quyết định dựa trên mục dữ liệu nếu chế độ xem thực tế là một tiêu đề hoặc một mục và thổi phồng nó cho phù hợp.

UPDATE:

Dưới đây là một ví dụ tốt về điều này: http://w2davids.wordpress.com/android-sectioned-headers-in-listviews/

Điều này thực sự tách đề mục từ các mục dữ liệu và sử dụng convertView chính xác, không giống như các giải pháp tôi sử dụng cho đến nay trong các ứng dụng trước đây của tôi.

+0

Ok, cảm ơn bạn. Bạn có một mẫu có thể giúp tôi không? – wawanopoulos

+0

Đã cập nhật câu trả lời của tôi. – Herrbert74

8

Các câu trả lời khác là chính xác.

Tôi đã tìm thấy một ví dụ thực sự tốt về tùy chỉnh chế độ xem để chứa hai loại mục: menu sectionmenu item. Tất nhiên bạn có thể thay đổi nó thành bất cứ thứ gì bạn muốn.

Ví dụ này cũng bao gồm việc triển khai lớp hoạt động trừu tượng mà mọi hoạt động có ngăn điều hướng kế thừa từ đó.

http://www.michenux.net/android-navigation-drawer-748.html

Các vấn đề liên quan