Tabhost trong Android
Tabhost trong android là một dạng giao diện điều khiển bằng thẻ tab cho phép người dùng có thể chuyển đổi các khung hình khác nhau trong cùng một giao diện Activity.
TabHost code trong XML :
<?xml version="1.0" encoding="UTF-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" /> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="-4dp" android:layout_weight="0" /> </LinearLayout> </TabHost> Một Tabhost Layout gồm có 3 phần: TabHost, TabWidget và FrameLayout.
- TabHost: là mục chính chưa các Tab button và Tab nội dung.
- TabWidget: Để định dạng cho các Tab button.
- FrameLayout: là mục chứa các layout cho Tab nội dung. Ta chỉ có thể dùng FrameLayout cho Tab contents, không thể dùng các loại Layout khác. Nếu bạn thắc mắc tại vì sao lại là FrameLayout mà không phải là các Layout khác? thì Tôi chỉ nói đơn giản thế này: Cho dù bạn có nhấn vào các Tab nào đi nữa thì layout tương ứng với mỗi Tab mà bạn vừa nhấn vào cũng chỉ xuất hiện cùng một chỗ trên màn hình điện thoại, điều này chỉ có FrameLayout mới giải quyết được.
Các phương thức quan trong của TabSpec
1. setIndicator(CharSequence label): Phương thức này được sử dụng để thiết lập chuỗi nhãn lên trên tab.
2. setIndicator(CharSequence label,Drawable icon): Phương thức này được sử dụng để thiết lập chuỗi nhãn và một icon lên trên tab.
Ví dụ sau chúng ta thiết lập một chuỗi nhãn “Tab 1” và một icon cho tab
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host tabSpec.setIndicator("Tab 1",getResources().getDrawable(R.drawable.ic_launcher)); // set the label and icon an indicator for a tab 3. setContent(Intent intent): Phương thức này thường được sử dụng mở một Activity. Click người sử dụng click vào tab sử dụng phương thức này nó sẽ mở một Activity để hiển.
Ví dụ sau chúng ta mở một acvitity bằng phương thức setContent
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host tabSpec.setIndicator(view); // set the "Tab 1" as an indicator Intent intent = new Intent(this, MyActivity.class); tabSpec.setContent(intent); // specify an intent to use to launch an activity as the tab content Một số phương thức quan trọng của Tabhost
1. addTab(TabSpec tabSpec): Phương thức này được sử dụng để thêm một tab mới cho một tab widget.
Ví dụ sau chúng ta xác định một tab bằng cách sử dụng lớp TabSpec và sau đó thêm tab đó vào tabhost bằng cách sử dụng phương thứ addTab.
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host tabSpec.setIndicator(view); // set the "Tab 1" as an indicator Intent intent = new Intent(this, MyActivity.class); tabSpec.setContent(intent); // specify an intent to use to launch an activity as the tab content tabHost.addTab(tabSpec); // add a tab in Tab widget 2. clearAllTabs(): Phương thức này được sử dụng xóa tất cả các tab trên TabHost
Ví dụ sau bước đầu tiên chúng ta thêm 2 tabs , bước tiếp theo chúng ta xóa các tab này
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host tabSpec.setIndicator("Tab 1"); // set the "Tab 1" as an indicator Intent intent = new Intent(this, MyActivity.class); tabSpec.setContent(intent); TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("tab2"); // Create a new TabSpec using tab host tabSpec1.setIndicator("Tab 2"); // set the "Tab 2" as an indicator Intent intent1 = new Intent(this, MyActivity.class); tabSpec1.setContent(intent1); // specify an intent to use to launch an activity as the tab content tabHost.addTab(tabSpec); // add first tab in Tab widget tabHost.addTab(tabSpec1); // add second tab in Tab widget tabHost.clearAllTabs(); // clear all the tabs from tab widget 3. setCurrentTab(int index): Phương thức này được sử dụng để thiết lập tab được chọn. Mặc định trong TabHost tab đầu tiên là tab hiện tại.
Ví dụ sau chúng ta thêm 2 tabs, sau đó thiết lập tab được chọn là tab thứ 2
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host tabSpec.setIndicator("Tab 1"); // set the "Tab 1" as an indicator Intent intent = new Intent(this, MyActivity.class); tabSpec.setContent(intent); TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("tab2"); // Create a new TabSpec using tab host tabSpec1.setIndicator("Tab 2"); // set the "Tab 2" as an indicator Intent intent1 = new Intent(this, MyActivity.class); tabSpec1.setContent(intent1); // specify an intent to use to launch an activity as the tab content tabHost.addTab(tabSpec); // add first tab in Tab widget tabHost.addTab(tabSpec1); // add second tab in Tab widget tabHost.setCurrentTab(1); // set second tab as current selected tab 4. setOnTabChangedListener(OnTabChangeListenerl): Phương thức này được sử dụng khi một tab thay đổi
// perform set on tab changed listener on tab host tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // Add code Here } }); Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có 1 TabHost bằng cách sử dụng Tab Widget và FrameLayout, sau đó chúng ta hiển thị 3 tab: home, contact and about bằng cách sử dụng TabHost.TabSpec. Chúng ta cũng thiết lập sự kiện implement setOnTabChangeListener, khi tab thay đổi và hiển thị chúng thông qua đối tượng Toast. 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à TabHost: 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.
<?xml version="1.0" encoding="UTF-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" /> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="-4dp" android:layout_weight="0" /> </LinearLayout> </TabHost> Bước 3: Bước này tạo 3 Activity và 3 layout cho 3 tab:
HomeActivity.class
package hiepsiit.com.tabhost; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class AboutActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_about); } } ContactActivity.class
package hiepsiit.com.tabhost; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class ContactActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_contact); } } AboutActivity.class
package hiepsiit.com.tabhost; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class HomeActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); } } Bước 5: Thêm code vào 3 layout activity_home, activity_contact and activity_about:
activity_home.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.tabhost.HomeActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="25sp" android:textColor="#f00" android:textStyle="bold" android:text="Home Activity" /> </RelativeLayout> activity_contact.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.tabhost.ContactActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Contact Activity" android:textColor="#00f" android:textSize="25sp" android:textStyle="bold" /> </RelativeLayout> activity_about.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.tabhost.AboutActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="25sp" android:textColor="#0f0" android:textStyle="bold" android:text="About Activity" /> </RelativeLayout> Bước 6: Mở src -> package -> MainActivity.java
Trong bước này chúng ta khởi tạo TabHost và thêm 2 tab home, contact và about bằng cách sử dụng TabHost.TabSpec. Chúng ta cũng thiết lập sự kiện implement setOnTabChangeListener, khi tab thay đổi và hiển thị chúng thông qua đối tượng Toast.
package hiepsiit.com.tabhost; import android.app.Activity; import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.TabHost; import android.widget.TabHost.TabSpec; import android.widget.Toast; public class MainActivity extends TabActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost TabHost.TabSpec spec; // Reusable TabSpec for each tab Intent intent; // Reusable Intent for each tab spec = tabHost.newTabSpec("home"); // Create a new TabSpec using tab host spec.setIndicator("HOME"); // set the "HOME" as an indicator // Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent(this, HomeActivity.class); spec.setContent(intent); tabHost.addTab(spec); // Do the same for the other tabs spec = tabHost.newTabSpec("Contact"); // Create a new TabSpec using tab host spec.setIndicator("CONTACT"); // set the "CONTACT" as an indicator // Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent(this, ContactActivity.class); spec.setContent(intent); tabHost.addTab(spec); spec = tabHost.newTabSpec("About"); // Create a new TabSpec using tab host spec.setIndicator("ABOUT"); // set the "ABOUT" as an indicator // Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent(this, AboutActivity.class); spec.setContent(intent); tabHost.addTab(spec); //set tab which one you want to open first time 0 or 1 or 2 tabHost.setCurrentTab(1); tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // display the name of the tab whenever a tab is changed Toast.makeText(getApplicationContext(), tabId, Toast.LENGTH_SHORT).show(); } }); } } Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 15 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
