Login App + Navigation Drawer Đơn Giản

Demo:

 

 

 

Trước khi bắt đầu làm, Bạn hãy xem kỹ demo ở trên, phải biết “sơ” qua về Fragment. Đọc kỹ những phần mình comment dưới code.

Mọi thắc mắc bạn có thể comment bên dưới.
Bước 1: Tạo project và thiết kế giao diện trang Login cho main activity (đây là màn hình đăng nhập)
File main.java
(Các view bạn tự ánh xạ).
Sự kiện click cho button Login:

<br />Intent i = new Intent(MainActivity.this, DrawerActivity.class); // class DrawerActivity sẽ tạo ở phần sau.
i.putExtra("username", etUser.getText().toString()); // lấy tên nhập trong username và truyền cho DrawerActivity, ở đây tôi chưa kiểm tra tính đúng sai của user/pass.
startActivity(i);

Bước 2: Thêm vào build.gradle:

 

compile ‘it.neokree:MaterialNavigationDrawer:1.3.3’
Bước 3: Tạo một Class mới tên “DrawerActivity” có nội dung như sau: (khai báo activity này luôn trong Manifest cho khỏi quên).

 

<br />public class DrawerActivity extends MaterialNavigationDrawer {
private TextView tv;
// textView bạn khai báo trong một file layout xml có tên "custom_drawer.xml", có thêm một ImageView nhưng tôi đã set cứng tấm ảnh ngoài xml.
// Vì vậy tôi chỉ ánh xạ TextView để hiện tên người dùng thôi.

@Override
public void init(Bundle savedInstanceState) { // trong DrawerActivity sẽ không có hàm onCreate như thông thường.
View view = LayoutInflater.from(this).inflate(R.layout.custom_drawer,null);
//file custom layout này thiết kế tùy sở thích của bạn, giống như làm custom listview nó cũng cần một file custom cho từng dòng mà bạn từng làm đấy.
setDrawerHeaderCustom(view);

tv = (TextView)findViewById(R.id.tvUsername);

MaterialSection frag1 = newSection("Hello Fragment", new Frag()); // bạn tự tạo một class Frag extends Fragment.
addSection(frag1); // thêm menu này vào Drawer của chúng ta.

// Tất nhiên là bạn có thể tạo và thêm nhiều fragment vào drawer.

Intent i = getIntent(); // lấy dữ liệu là username người dùng nhập từ main activity.
tv.setText("Hello " + i.getStringExtra("username"));
}
}

Bước 4: Vào Res – Values – Styles. Thêm vào:

<br />

Chạy thử xem, nếu có vấn đề, bạn có thể comment bên dưới.
Thanks!

 

 

 

 

Advertisements

One thought on “Login App + Navigation Drawer Đơn Giản

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s