SlidingDrawer trong Android
SlidingDrawer là đối tượng sẽ tạo cho chúng ta một hiệu ứng trượt rèm màn hình, giống như keo cửa sắt cuộn của nhà kho, cửa hàng, phân xưởng….Màn hình có thể trượt từ dưới lên hoặc từ phải sang trái
Một số điểm quan trọng của SlidingDrawer
- SlidingDrawer nên được sử dụng bên trong layout.
- Kích thước nội dung phải bằng với kích thước của SlidingDrawer. Do đó, chiều cao, chiều rộng của SlidingDrawer thường dùng với thuộc tính match_parent
- id của content và của handle phải được khai báo bên trong SlidingDrawer
SlidingDrawer Code trong XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <SlidingDrawer android:id="@+id/simpleSlidingDrawer" android:layout_width="fill_parent" android:layout_height="wrap_content" android:content="@+id/content" android:handle="@+id/handle" android:orientation="horizontal" android:rotation="180"> <!-- Button for the handle of SlidingDrawer --> <Button android:id="@id/handle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#0f0" android:rotation="270" android:text="Open" android:textColor="#fff" /> <!-- layout for the content of the SLidingDrawer --> <LinearLayout android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:rotation="180"> <!-- DEFINE ALL YOUR CONTENT,WIDGETS HERE WHICH YOU WANT TO ADD IN SLIDING DRAWER LAYOUT. --> <ListView android:id="@+id/simpleListView" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> </SlidingDrawer> </LinearLayout> Các phương thức quan trọng của SlidingDrawer
1. open(): Phương thức này được sử dụng để mở Drawer. Đôi khi chúng ta cũng có thể mở drawer bằng cách click lên view (Button, TextView v.v.)
Ví dụ sau chúng ta mở một SlidingDrawer
SlidingDrawer simpleSlidingDrawer =(SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.open(); // open the Sliding Drawer 2. close(): Phương thức này được sử dụng để đóng Drawer. Đôi khi chúng ta cũng có thể đóng drawer bằng cách click lên view (Button, TextView v.v.)
Ví dụ sau chúng ta đóng một SlidingDrawer.
lidingDrawer simpleSlidingDrawer =(SlidingDrawer)findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.close(); // close the Sliding Drawer 3. animateOpen(): Phương thức này được sử dụng để mở Drawer có hiệu ứng.
Ví dụ sau chúng ta mở một SlidingDrawer có hiệu ứng.
SlidingDrawer simpleSlidingDrawer =(SlidingDrawer)findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.animateOpen(); // open the Sliding Drawer with an animation 4. animateClose(): Phương thức này được sử dụng để đóng Drawer có hiệu ứng.
Ví dụ sau chúng ta mở một SlidingDrawer có hiệu ứng.
SlidingDrawer simpleSlidingDrawer =(SlidingDrawer)findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.animateOpen(); // close the Sliding Drawer with an animation 5. isOpened(): Phương thức này kiểm tra một Drawer có mở hay không. Nếu giá trị trả về là true là Drawer được mở.
Ví dụ sau chúng ta kiểm tra xem một Drawer có mở hay không
SlidingDrawer simpleSlidingDrawer =(SlidingDrawer)findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer Boolean isSliderOpen= simpleSlidingDrawer.isOpened(); // check whether the slider is opened or not 6. lock(): Phương thức này khóa SliderDrawer khi đó sự kiện touch không còn tác dụng
Ví dụ sau được sử dụng để khóa Drawer để ngăn sự kiện touch
SlidingDrawer simpleSlidingDrawer = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.lock(); // lock the sliderDrawer so that touch event are disabled 7. unlock(): Phương thức này bỏ khóa Drawer (unlock) cho phép sử dụng sự kiện touch. Phương thức này được sử dụng khi Drawer đang trong tình trạng unlock
Ví dụ sau được sử dụng bỏ khóa Drawer ho phép sử dụng sự kiện touch.
SlidingDrawer simpleSlidingDrawer = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.unlock(); // unlock the sliderDrawer so that touch event are processed 8. setOnDrawerCloseListener(OnDrawerCloseListeneronDrawerCloseListener): Phương thức này được thiết lập lắng nghe một thông báo trước khi drawer trước khi đóng
Ví dụ sau thiết lập sự kiện setOnDrawerOpenListener()
SlidingDrawer simpleSlidingDrawer = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() { @Override public void onDrawerOpened() { // add code here for the Drawer Opened Event } }); 10. setOnDrawerScrollListener(OnDrawerScrollListeneronDrawerScrollListener): Phương thức này được thiết lập lắng nghe một thông báo trước khi drawer trước khi bắt đầu cuộn và kết thúc cuộn.
Ví dụ sau thiết lập sự kiện setOnDrawerScrollListener
SlidingDrawer simpleSlidingDrawer = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer simpleSlidingDrawer.setOnDrawerScrollListener(new SlidingDrawer.OnDrawerScrollListener() { @Override public void onScrollStarted() { // add code here for the scroll started. } @Override public void onScrollEnded() { // add code here for the scroll ended. } }); Thuộc tính thường dùng của SlidingDrawer
1. android:id: Là thuộc tính duy nhất của SlidingDrawer. Xem ví dụ sau:
<SlidingDrawer android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:handle="@+id/handle" android:content="@+id/content"> <!--Define Views Here--> </SlidingDrawer> Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:
SlidingDrawer simpleSlidingDrawer = (SlidingDrawer ) findViewById(R.id.simpleSlidingDrawer); 2. android:handle: là một graphic nhỏ để hiển thị một indicate cho phép điều khiển mở đóng nội dung
<SlidingDrawer android:id="@+id/drawer" android:layout_width="fill_parent" android:layout_height="wrap_content" android:content="@+id/content" android:orientation="horizontal" android:rotation="180" android:handle="@+id/handleImageView"> <!-- set the Id of the handle (ImageView) --> <!-- create a ImageView for handle the content of DrawerLayout --> <ImageView android:id="@id/handleImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:rotation="270" android:src="@drawable/ic_launcher" /> <!-- layout for the content of the SLidingDrawer --> <LinearLayout android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:rotation="180"> <!-- DEFINE ALL YOUR CONTENT,WIDGETS HERE WHICH YOU WANT TO ADD IN SLIDING DRAWER LAYOUT. --> </LinearLayout> </SlidingDrawer> 
3.android:content: Thuộc tính này sẽ được chứa trong một vài kiểu container
4. android:orientation: Thuộc tính này được thiết lập hiển thị theo chiền ngang, hay chiều thẳng đứng. Trong SliderDrawer mặc định hiển thị theo chiều thẳng đứng.
5. android:rotation: Thuộc tính này được sử dụng quay các views theo góc độ .
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có 1 SlidingDrawer, 1 Button để điều khiển SlidingDrawer, 1 ListView để hiển thị nội dung của SlidingDrawer. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là SlidingDrawer: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng SlidingDrawer, Buton và ListView trong Relative Layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <SlidingDrawer android:id="@+id/simpleSlidingDrawer" android:layout_width="fill_parent" android:layout_height="wrap_content" android:content="@+id/content" android:handle="@+id/handle" android:orientation="horizontal" android:rotation="180"> <!-- Button for the handle of SlidingDrawer --> <Button android:id="@id/handle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#0f0" android:rotation="270" android:text="Open" android:textColor="#fff" /> <!-- layout for the content of the SLidingDrawer --> <LinearLayout android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:rotation="180"> <!-- DEFINE ALL YOUR CONTENT,WIDGETS HERE WHICH YOU WANT TO ADD IN SLIDING DRAWER LAYOUT. --> <ListView android:id="@+id/simpleListView" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> </SlidingDrawer> </LinearLayout> Bước 3: Tạo một tin Layout res-> right click trên layout -> New -> Activity -> Blank Activity và tạo list_item
<?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="wrap_content" android:orientation="vertical"> <!-- TextView for the list item --> <TextView android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dp" android:textColor="#0f0" /> </LinearLayout> Bước 4: Mở src -> package -> MainActivity.java
Trong bước này chúng ta khởi tạo ListView, SlidingDrawer và Button. Tiếp theo, chúng ta tạo 1 mảng dữ liệu và kết nối ListView thông qua đối tượng ArrayAdapter. Cuối cùng là thiết lập sự kiện cho setOnDrawerOpenListener và setOnDrawerCloseListener thay đổi nhãn trên button điều khiển.
package hiepsiit.com.slidingdrawer; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ListView; import android.widget.SlidingDrawer; public class MainActivity extends Activity { String[] nameArray = {"Aestro", "Blender", "Cupcake", "Donut", "Eclair", "Froyo", "GingerBread", "HoneyComb", "IceCream Sandwich", "JelliBean", "KitKat", "Lollipop", "MarshMallow"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SlidingDrawer simpleSlidingDrawer = (SlidingDrawer) findViewById(R.id.simpleSlidingDrawer); // initiate the SlidingDrawer final Button handleButton = (Button) findViewById(R.id.handle); // inititate a Button which is used for handling the content of SlidingDrawer ListView simpleListView = (ListView) findViewById(R.id.simpleListView); // initiate the ListView that is used for content of Sl.idingDrawer // adapter for the list view ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(getApplicationContext(), R.layout.list_item, R.id.name, nameArray); // set an adapter to fill the data in the ListView simpleListView.setAdapter(arrayAdapter); // implement setOnDrawerOpenListener event simpleSlidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() { @Override public void onDrawerOpened() { handleButton.setText("Close"); } }); // implement setOnDrawerCloseListener event simpleSlidingDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() { @Override public void onDrawerClosed() { // change the handle button text handleButton.setText("Open"); } }); } } Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
