Trang chủ > Android > Lập trình Android – Tạo Navigation Bar

Lập trình Android – Tạo Navigation Bar


Chào các bạn, hôm nay mình xin được tiếp tục giới thiệu với các bạn một custom UI Component nữa trong Android đó là NavigationBar hay Toolbar thì tùy cách gọi của các bạn. Nhớ lại lúc mới bắt đầu làm với Android, loay hoay mãi mà không biết phải tạo cái component này như thế nào vì trước đó làm với iPhone thì Apple đã cung cấp sẵn component này, chỉ kéo thả phát là xong.

Component mà chúng ta sẽ tạo trong bài đọc này sẽ là một thanh bar nằm ngang màn hình, thanh bar này chứa các Button, khi ta bấm lên mỗi Button thì chức năng tương ứng sẽ được gọi. Dưới đây là hình ảnh custom NavigationBar của chúng ta sau khi đã hoàn thành:



Để có được component như trên chúng ta phải làm những thao tác sau đây:

1. Tạo Layout,  Color, Drawable cho NavigationBar.

2. Tạo một NavigationBar class extends từ một layout class có sẵn của Android.

3. Tạo MainActivity để gọi và hiển thị NavigationBar.

Và bây giờ chúng ta sẽ đi vào từng thao tác cụ thể:

1. Tạo Layout, Color, Drawable cho NavigationBar

Trong thư mục layout, tạo một file đặt tên là navigation_bar.xml với nội dung như sau:

<merge

xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”>

<Button android:id=”@+id/add_btn”

android:layout_height=”50dip”

android:layout_width=”wrap_content”

android:clickable=”true”

android:focusable=”true”

android:background=”@drawable/background_states”

android:drawableTop=”@android:drawable/ic_menu_add”

android:gravity=”center”

android:layout_weight=”1″/>

<Button android:id=”@+id/cancel_btn”

android:layout_height=”50dip”

android:layout_width=”wrap_content”

android:clickable=”true”

android:focusable=”true”

android:background=”@drawable/background_states”

android:drawableTop=”@android:drawable/ic_menu_close_clear_cancel”

android:gravity=”center”

android:layout_weight=”1″/>

<Button android:id=”@+id/help_btn”

android:layout_height=”50dip”

android:layout_width=”wrap_content”

android:clickable=”true”

android:focusable=”true”

android:background=”@drawable/background_states”

android:drawableTop=”@android:drawable/ic_menu_help”

android:gravity=”center”

android:layout_weight=”1″/>

</LinearLayout>

</merge>

Có thể các bạn sẽ thấy file layout này hơi khác so với những file layout mà các bạn vẫn thường viết, thậm chí còn không có cả dòng xml declaration. Bạn có thể tìm hiểu trong phần layout tips and tricks của google tại đây.
Các bạn thấy trong phần layout cho các Button, mình sử dụng background cũng là một custom drawable có tên là background_states. Trong thư mục drawable, các bạn tạo một file có tên là background_states.xml với nội dung sau:

<?xml version=”1.0″ encoding=”utf-8″?>

<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

   <item android:state_focused=”true”

           android:state_pressed=”true”

           android:drawable=”@android:color/darker_gray”/>

   <item android:state_focused=”true”

           android:state_pressed=”false”

           android:drawable=”@android:color/darker_gray”/>

   <item android:state_focused=”false”

           android:state_pressed=”true”

           android:drawable=”@android:color/darker_gray”/>          

</selector>

Tương ứng với mỗi trạng thái của nút bấm chúng ta định nghĩa một màu, tuy nhiên ở đây mình chỉ chọn một màu duy nhất là darker_gray đã được định nghĩa sẵn trong thư viện của Android. Mình chọn 3 trạng thái để đặt màu này và không định nghĩa trạng thái sau:

<item android:state_focused=”false”

android:state_pressed=”false”/>

đây chính là trạng thái mà chúng ta không thao tác gì với nút bấm, vì thế khi không định nghĩa trạng thái này chúng ta sẽ lấy background măc định là background mà chúng ta sẽ set cho NavigationBar khi khởi tạo trong constructor của nó. Ở mục 2 chúng ta sẽ thực hiện công việc này. Với việc set background cho 3 trạng thái ở trên thì khi ta bấm lên một button bất kỳ trong NavigationBar, màu nền của button đó sẽ chuyển sang darker_gray.
Tiếp theo, chúng ta sẽ định nghĩa một vài màu riêng để sử dụng trong ví dụ của bài đọc này như màu nền mặc định của NavigationBar, màu của Text trong ví dụ này. Trong thư mục values, tạo file colors.xml như sau:

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

      <color name=”bgcolor”>#292A2B</color>    

      <color name=”text_color”>#1843C4</color>

      <color name=”white”>#ffffff</color>

</resources>
Tất nhiên các bạn hoàn toàn có thể bỏ file này đi mà dùng cách set trực tiếp các giá trị màu ở trong phần layout đó là tùy các bạn.
Bây giờ ta tạo main layout trong đó có chứa NavigationBar như là các thành phần UI khác trong Android, main.xml sẽ cho các bạn thấy cách chúng ta sử dụng NavigationBar của chúng ta, mở file main.xml và sửa lại như sau:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

       android:orientation=”vertical”

    android:layout_width=”fill_parent”

    android:layout_height=”fill_parent”

    android:background=”@color/white”>         

      <TextView 

          android:layout_width=”fill_parent”

          android:layout_height=”fill_parent”       

          android:textSize=”16sp”  

          android:layout_weight=”1″

          android:gravity=”center”

          android:textStyle=”bold”

          android:textColor=”@color/text_color”

          android:text=”@string/mainpage_text”/>     

       <net.danchanvit.example.android.NavigationBar

            android:id=”@+id/my_navbar” android:layout_width=”fill_parent”

            android:layout_height=”wrap_content”/>

</LinearLayout>
Chú ý rằng nếu bạn build project tại thời điểm này thì project của bạn sẽ bị báo lỗi trong file main.xml vì trình biên dịch chưa tìm thấy NavigationBar class của bạn đâu, đơn giản là bạn chưa viết nó😀. Chúng ta sẽ viết NavigationBar class trong mục 2 dưới đây.

2.Tạo NavigationBar class extends từ một layout có sẵn của Android

Chúng ta tạo class cho NavigationBar và set các thuộc tính cho component của chúng ta như orientation, background color… thông qua constuctor. Dưới đây là source code của file NavigationBar.java:

public class NavigationBar extends LinearLayout{
/*
* Declare some buttons as instance variables so that later
* we can access these buttons and set OnclickListener to them
*/
public Button add_btn, cancel_btn, help_btn;

public NavigationBar(Context context){
super(context);
}
/*
* Constructor to initialize NavigationBar’s view and attribute sets
* here i don’t use any attribute sets
*/
public NavigationBar(Context context, AttributeSet attrs){
super(context, attrs);
setOrientation(HORIZONTAL);

// set default background color for NavigationBar setBackgroundColor(getResources().getColor(R.color.bgcolor));
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.navigation_bar, this);

// initialize all buttons the navigation bar contains
add_btn = (Button) findViewById(R.id.add_btn);
cancel_btn = (Button) findViewById(R.id.cancel_btn);
help_btn = (Button) findViewById(R.id.help_btn);
}
}

3.Tạo MainActivity để gọi và hiển thị NavigationBar.

Công việc cuối cùng của chúng ta là tạo một Activity để gọi và hiển thị NavigationBar mà chúng ta vừa tạo. Dưới đây là source code của MainActivity:

public class MainActivity extends Activity implements View.OnClickListener{

/* Declare some buttons then we will assign all buttons those NavigationBar contains
* to them therefore we can set OnclickListener to them
*/
Button add_btn, cancel_btn, help_btn;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// we can declare and initialize our custom NavigationBar like other UI Components in Android
NavigationBar navBar = (NavigationBar) findViewById(R.id.my_navbar);
// initialize and set OnclickListener to all buttons
add_btn = navBar.add_btn;
add_btn.setOnClickListener(this);
cancel_btn = navBar.cancel_btn;
cancel_btn.setOnClickListener(this);
help_btn = navBar.help_btn;
help_btn.setOnClickListener(this);

}

@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.add_btn:
Toast.makeText(this, “ADD button clicked”, Toast.LENGTH_SHORT).show();
break;
case R.id.cancel_btn:
Toast.makeText(this, “CANCEL button clicked”, Toast.LENGTH_SHORT).show();
break;
case R.id.help_btn:
Toast.makeText(this, “HELP button clicked”, Toast.LENGTH_SHORT).show();
break;
default:
break;
}

}
}

Vậy là chúng ta đã hoàn thành custom NavigationBar, một UI Component chỉ cần hai thao tác kéo và thả trong iOS là đã có thể sử dụng được, tuy nhiên lại tốn khá nhiều thao tác để có được nó trong Android. Chúc mừng các bạn. Ở đây nói thế không phải mình so sánh iPhone và Android bởi vì mỗi loại có một đặc điểm riêng. Android có hard key menu, còn iPhone thì không, có lẽ đó chính là lý do mà google không muốn lãng phí Screen cho một thanh Navigation bar. Để đỡ  mất thời gian ngồi code, các bạn có thể download toàn bộ source code của bài đọc này ở đây chạy thử luôn. Rất mong các bạn đóng góp ý kiến và chia sẻ kinh nghiệm. Chúc các bạn lập trình vui vẻ! Hẹn gặp lại.

Chuyên mục:Android
  1. sdf
    02/02/2016 lúc 7:14 chiều

    If you desire to improve your knowledge only keep
    visiting this website and be updated with the most up-to-date news posted here.

  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: