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 dahoan tat close
@Override
public void onDrawerClosed(View drawerView) {
// TODO Auto-generated method stub
super.onDrawerClosed(drawerView);
getActionBar().setTitle(title);
}
//goi khi drawer dahoan tat open
@Override
public void onDrawerOpened(View drawerView) {
// TODO Auto-generated method stub
super.onDrawerOpened(drawerView);
getActionBar().setTitle("chon thanh pho");
}
};
//co lenh nay moithuc 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 thaydoi can tao lai
//no se goionPrepareOptionsMenu
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 lengoc trai cua actionbar
getActionBar().setHomeButtonEnabled(true);
//nhan nut home tra ve 1 level chu khongve 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 cacaction 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 cokey la "vitri" (ben ngoai truyen vo) chinh la item
//tren listview duocchon
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 extendsFragmentActivity {
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ả.
.jpg)
No comments:
Post a Comment