تب هاست در اندروید – ایجاد یک تب هاست ساده

تب هاست در اندروید
ایجاد یک تب هاست ساده

یکی از پرکاربردترین کامپوننت‌های اندروید، TabHost (تب‌هاست) است که در خیلی از برنامه‌ها هم به چشم می‌خورد و به طور خیلی خلاصه، کامپوننتی است که می‌تواند شامل چند قسمت مختلف با محتوای مختلفی باشد. در واقع، تب‌هاست، اکتیوتی شما را به چند بخش مختلف تقسیم بندی می‌کند که هربخش درون یک تب قرار دارد.

استفاده از تب‌هاست، در مقایسه با سایر ابزارها کمی متفاوت است و پیچیدگی‌های خاص خود را دارد که در این آموزش و آموزش‌های دیگر، به توضیح تمامی ویژگی‌های آن خواهیم پرداخت.
تصویر زیر، تصویر یک تب هاست ساده با سه بخش مختلف می‌باشد:

یک تب هاست دیگر که کمی شکل و شمایل متفاوت تری دارد:

ساخت Layout + تب هاست

یک Layout ایجاد کرده و کد زیر را درون آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+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" >

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
         />

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >

        <TextView
            android:id="@+id/page1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Page One!" >

        </TextView>

        <TextView
            android:id="@+id/page2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Page Two" >
        </TextView>

        <TextView
            android:id="@+id/page3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="and Page Three" >
        </TextView>
    </FrameLayout>
</LinearLayout>
</TabHost>

سه قسمت اصلی کد بالا:

• TabHost
  بدنه‌ی کلی فایل xml را مشخص می‌کند و بیان کننده‌ی این است که می‌خواهیم صفحه‌ای چند بخشی متشکل از تب ها داشته باشیم.
• TabWidget
  ویجب مربوط به تب هاست ، تب‌ها به این ویجت اضافه شده و نمایش داده می شوند.
• FrameLayout
  پدر صفحاتی است که می‌خواهیم در برنامه داشته باشیم.
  فرزندان FrameLayout هر کدام محتوای یک تب را مشخص می‌سازند.
  در این مثال سه TextView داریم که هر کدام در یک تب نمایش داده خواهند شد.

کد جاوا

برای نمایش درست، نیاز داریم چند خط کد جاوا بنویسیم. کد مربوط به Activity این برنامه به صورت زیر خواهد بود:

// FullKade.Com

import android.os.Bundle;
import android.app.Activity;
import android.widget.TabHost;

public class ActivityMain extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		TabHost tabs = (TabHost) findViewById(R.id.tabhost);

		tabs.setup();

		/*** تب اول ***/
		TabHost.TabSpec tab1 = tabs.newTabSpec("tag 1");
		tab1.setIndicator("One");
		tab1.setContent(R.id.page1);
		tabs.addTab(tab1);

		/*** تب دوم ***/
		TabHost.TabSpec tab2 = tabs.newTabSpec("tag 2");
		tab2.setIndicator("Two");
		tab2.setContent(R.id.page2);
		tabs.addTab(tab2);

		/*** تب سوم ***/
		TabHost.TabSpec tab3 = tabs.newTabSpec("tag 3");
		tab3.setIndicator("Three");
		tab3.setContent(R.id.page3);
		tabs.addTab(tab3);
	}
}

شرح کد:

• TabHost ایجاد شده در سمت XML را داخل یک آبجکتی از جنس TabHost قرار می‌دهیم.
•  متد Setup : امکان تغییر تب هاست را فراهم می‌سازد.
• از کلاس TabSpec برای ساخت تب‌ها استفاده می‌کنیم.
  • ورودی متد سازنده : تگ تب
  • متد setIndicator : مشخصکردن نام تب
  • متد setContent : مشخص کردن محتوای تب
• متد addTab : اضافه کردن تب ساخته شده به تب هاست

نتیجه‌ی کد بالا: