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

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

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


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

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

Android TabHost 1

 

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

Android TabHost 2 Android TabHost 3

ساخت 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 : اضافه کردن تب ساخته شده به تب هاست

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

Android TabHost 1_1

 

درس بعدی (نمایش تصویر در تب)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

cp-codfk

نظرات ثبت شده 4 دیدگاه

    1. حمید رضا کاربر مهمان گفت:

      سلام اگه بخواهیم به هر کدوم از تب ها یک دکمه اضافه کنیم چه طور میتونیم این کارو کنیم ؟؟؟با تشکر

      00
      1. هادی اکبرزاده مدیر سایت گفت:

        مثل TextView ها که اضافه شدند این کارو انجام بدید.
        ولی بهتره از TabWidget استفاده کنیم.

        
        
                
        
                    
        
                        
                        
        
        
        
        
                        
        
                            
         
                                    
                            
                                
        
        
                            
         
                                    
                            
                                
                               
                              
         
                                    
                            
                                
                       
                         
                    
                
            
        
    2. محمدحسین کاربر مهمان گفت:

      سلام
      تشکر بابت مطلب بسیار خوبتون
      tab1.setIndicator(“One”));
      این خط یک پرانتز اضافی دارین

      00
      1. هادی اکبرزاده مدیر سایت گفت:

        ممنون دوست عزیزم
        اصلاح شد

توضیحات پیشنهادی نظرات اشتراک