[Android] Drawer Layout - Sliding menu

Public on May 6, 2014

Tạo project và layout

      1.       Tạo Project với tên “NavigationDrawerTest” và nên chọn version từ 4.0 trở lên như hình
        2.       Mở file layout chính lên và thay layout ngoài cùng bằng DrawerLayout từ thư viện v4 (nếu chưa có thư viện thì chép thư viện vào libs).  Bên trong DrawerLayout sẽ có một FrameLayout (làm phần nội dung chính để hiển thị ) và một ListView (dùng làm phần bên trái) như source bên dưới.
<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">
    <!-- View chinh chua noi dung -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- view ben trai, navigation drawer, la listview -->
    <ListView android:id="@+id/drawer_list"
        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>
Trong giao diện trên ta phải lưu ý 1 số điểm sau:
View chính chứa nội dung (Frame Layout) cần phải là con đầu tiên trong DrawerLayout vì theo xml thì thứ tự xml là thứ tự z (trên dưới) và nó phải nằm trên. Và nó có chiều rộng và chiều cao là match_parent để khi phần drawer bị ẩn thì phần Frame Layout này sẽ chiếm toàn bộ màn hình.
Phần Drawer view (ListView) cần phải chỉnh layout_gravity theo horizontal. Để chạy từ Right-to-Left ta sẽ cho giá trị của nó là “start”, để chạy từ Left-to-Right ta cho giá trị của nó là “left”. Nó phải có thuộc tính layout_width là một số theo dp. Số này không lớn hơn 320dp để người dùng luôn thấy một phần của view chính khi Drawer view hiện ra.

Tạo nội dung cho Drawer List (ListView)

Phần Drawer List là phần listview ta có thể tạo nội dung theo kiểu thông thường dùng dùng Adapter như ArrayAdapter, SimpleCursorAdapter… . Ở đây để đơn giản ta dùng string array
      3.       Thêm vào file “res/values/strings.xml” một string-array như bên dưới:
    <string-array name="thanhpho">
        <item>Sai Gon</item>
        <item>Hue</item>
        <item>Da Nang</item>
        <item>Da Lat</item>
        <item>Nha Trang</item>
    </string-array>
      4.       Tạo một file layout mới tên “drawer_list_item.xml” (trong thư mục layout). Đây dùng làm layout cho một mục con trong listview. Có nội dung như sau:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#f00"
    android:text="test ne"
/>
      5.       Mở file java chính (MainActivity.java) khai báo các biến toàn cục. Chú ý: nhúng thư viện android.support.v4.widget.DrawerLayout
     String [] danhsach;
     DrawerLayout drawerlayout;
     ListView listview;

      6 .       Trong hàm onCreate ta ánh xạ các view, lấy tài nguyên, tạo adapter và gán vào listview như sau:
drawerlayout= (DrawerLayout)findViewById(R.id.drawer_layout);
listview=(ListView)findViewById(R.id.drawer_list);
danhsach=getResources().getStringArray(R.array.thanhpho);
ArrayAdapter<String> adapter =
     new ArrayAdapter<String>(this,R.layout.drawer_list_item,danhsach);
listview.setAdapter(adapter);

Bắt sự kiện mở , đóng drawer

       7.       Chép hình ic_drawer.png vào thư mục drawable. Đây là hình để click vào đóng/mở drawer.
       8.       Mở file “res/values/strings.xml” và bổ xung thêm 2 chuỗi dùng để làm text trên actionbar.

      <string name="drawer_open">Mo menu</string>
      <string name="drawer_close">Dong menu</string>
      9.       Mở file java chính khai báo thêm các biến toàn cục
     ActionBarDrawerToggle drawertoggle;
     String drawertitle;
     String title;
      10.   Sau lệnh setadapter trong onCreate viết thêm như bên dưới.
title=drawertitle=(String) getTitle();
drawertoggle=new ActionBarDrawerToggle(
           this, //ap vao activity nao
           drawerlayout, //drawerlayout
           R.drawable.ic_drawer,//icon
           R.string.drawer_open, //chuoi mo
           R.string.drawer_close  /*chuoidong*/
           )
{
     //goi khi drawer da hoan tat close
     @Override
     public void onDrawerClosed(View drawerView) {
           // TODO Auto-generated method stub
           super.onDrawerClosed(drawerView);
           getActionBar().setTitle(title);
     }
     //goi khi drawer da hoan tat open
     @Override
     public void onDrawerOpened(View drawerView) {
           // TODO Auto-generated method stub
           super.onDrawerOpened(drawerView);
           getActionBar().setTitle("chon thanh pho");
     }
};

//co lenh nay moi thuc hien duoc ham onDrawerClosed va onDrawerOpened
drawerlayout.setDrawerListener(drawertoggle);
      11.   Chạy chương trình, dùng chuột đưa gần cạnh trái và kéo qua phải để thấy kết quả (hình đã sửa text của listview thành màu trắng cho đẹp).


Điều khiển menu khi drawer open/close

Ta có thể điều khiển menu tùy theo trạng thái của drawer là mở hay đóng
      12.   Mở file res/menu/main.xml bổ sung thêm 1 item như sau:
    <item
        android:id="@+id/action_test"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="action_test"/>
     13.   Trong 2 hàm onDrawerClosed và onDrawerOpened bổ sung thêm lệnh invalidateOptionsMenu, lệnh này báo rằng menu cần phải thay đổi và nó sẽ chạy hàm onPrepareOptionsMenu.
                public void onDrawerClosed(View drawerView) {
                     // ………………………………………
                     //bao menu da thay doi can tao lai
                     //no se goi onPrepareOptionsMenu
                     invalidateOptionsMenu();
                    
                }
                public void onDrawerOpened(View drawerView) {
                     //…………………………
                     invalidateOptionsMenu();
                }
     14.   Bên ngoài hàm onCreate , override lên phương thức onPrepareOptionsMenu. Tạo ra biến boolean và đọc trạng thái của Drawer xem đang mở hay đóng. Sau đó kiếm đến menu Setting bằng hàm findItem và setVisible để ẩn/hiện menu đó.
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
    // TODO Auto-generated method stub
    boolean dangmo=drawerlayout.isDrawerOpen(listview);
    menu.findItem(R.id.action_test).setVisible(!dangmo);
    return super.onPrepareOptionsMenu(menu);
    }
      15.   Chạy chương trình, nhấn nút menu để thấy có menu có mục “action_test” hiện ra. Kéo Drawer và nhấn nút menu để thấy không có menu “action_test”.
    
       

Ẩn hiện Drawer bằng icon của chương trình

Ta thấy rằng có thể kéo Drawer nhưng chưa nhấn icon để ẩn hiện Drawer được. Thực hiện tiếp
     16.   Trong onCreate dưới cùng viết thêm lệnh bên dưới, 2 lệnh này giúp cho nút home hiện ra trên thanh actionbar (có thể nhấn vào nó).
           //hien nut home len goc trai cua actionbar
        getActionBar().setHomeButtonEnabled(true);
        //nhan nut home tra ve 1 level chu khong ve top level
        getActionBar().setDisplayHomeAsUpEnabled(true);
      17.   Bên ngoài hàm onCreate, override lên hàm onOptionsItemSelected để điều khiển các item của actionbar.
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    // TODO Auto-generated method stub
    if(drawertoggle.onOptionsItemSelected(item))
           return true;
   
    //....dieu kien cac action bar item khac
   
    return super.onOptionsItemSelected(item);
    }

Tạo fragment cho listview item

Tiếp theo ta xây fragment để khi click vào các listview item sẽ đổi fragment.
      18.   Tạo một layout mới cho fragment tên “fragment_layout.xml” trong thư mục “/res/layout/” như sau:
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:text="test" />
</LinearLayout>          
    19.   Tạo một file java mới tên CityFragment.java. Cho Class kế thừa từ Fragment, nhúng thư viện support.v4 . Trong class ta override lên onCreateView như sau:
public class CityFragment extends Fragment{

     @Override
     public View onCreateView(LayoutInflater inflater,
 ViewGroup container,Bundle savedInstanceState) {
           // TODO Auto-generated method stub
           return super.onCreateView(inflater, container, savedInstanceState);
     }
}
      20.   Trong hàm onCreate viết như sau:
  @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
           Bundle savedInstanceState) {
     // TODO Auto-generated method stub
    
     //lay doi so co key la "vitri" (ben ngoai truyen vo) chinh la item
     //tren listview duoc chon
     int vitri =getArguments().getInt("vitri");
     String [] dsthanhpho= getResources().getStringArray(R.array.thanhpho);
     View view=inflater.inflate(R.layout.fragment_layout,container, false);
     TextView tv=(TextView)view.findViewById(R.id.tv_content);
     tv.setText(dsthanhpho[vitri]);
     getActivity().getActionBar().setTitle(dsthanhpho[vitri]);
    
     return view;
} 
      21.   Quay về file java chính. Sửa MainActivity kế thừa từ FragmentActivity
public class MainActivity extends FragmentActivity {

      22.   Trong hàm onCreate cuối cùng bắt thêm sự kiện khi click vào mục con của listview như sau:
listview.setOnItemClickListener(new OnItemClickListener() {

     @Override
     public void onItemClick(AdapterView<?> arg0, View arg1, int position,
                long arg3) {
           // TODO Auto-generated method stub
          String [] dstp=getResources().getStringArray(R.array.thanhpho);
           title=dstp[position];
           CityFragment fragment=new CityFragment();
           Bundle data=new Bundle();
           data.putInt("vitri", position);
           fragment.setArguments(data);
          
           FragmentManager manager=getSupportFragmentManager();
           FragmentTransaction tran=manager.beginTransaction();
           tran.replace(R.id.content_frame, fragment);
           tran.commit();
          
           drawerlayout.closeDrawer(listview);
          
     }
});
      23.   Chạy chương trình, kéo drawer click vào các item để xem kết quả.




[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon