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();              }          });  	}    }

Download ví dụ

Ứ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

Pages

Thứ Ba, 18 tháng 6, 2019

TabHost

Tabhost trong Android

TabHost code trong XML :