آموزش TabHost در کوتلین

سلام دوستان و توسعه دهندگان گرامی در این سری از آموزش برنامه نویسی اندروید به آموزش TabHost در کوتلین می پردازیم از TabHost به منظور ساخت یک container شامل چندین بخش یا tab استفاده می شود و در هر زمان امکان استفاده از یک container خاص وجود خواهد داشت در ادامه با ما همراه باشید.

در ادامه برخی از attribute های مربوط به Tabhost مورد بررسی قرار میدهیم.
android:id : برای تعیین یک آیدی منحصر به فرد برای view استفاده می شود.
android:padding : به منظور تعیین فاصله داخلی از اطراف استفاده می شود.
android:layoutAnimation : به منظور تعیین یک انیمیشن برای view مورد استفاده قرار می گیرد.

ابتدای کار یکسری رشته تعریف می کنیم برای اینکار فایل strings.xml را در مسیر res/values قرار دارد باز کرده و کدهای زیر را در آن قرار دهید.

<resources>
    <string name="app_name">TabHost</string>
    <string name="presented_by">Presented by Programchi.ir</string>
    <string name="no_image">No Image</string>
    <string name="profile">Profile</string>
    <string name="recent">Recent</string>
    <string name="home">Home</string>
</resources>

<string name="app_name">TabHost</string>

<string name="presented_by">Presented by Programchi.ir</string>

<string name="no_image">No Image</string>

<string name="profile">Profile</string>

<string name="recent">Recent</string>

</resources>

در بالا یکسری رشته ایجاد کردیم که در برنامه استفاده خواهد شد.
ما باید 3 اکتیویتی برای برنامه ایجاد کنیم که عبارتند از :
HomeActivity.kt و لایه آن برابر با activity_main.xml
RecentActivity.kt و لایه آن برابر با activity_recent.xml
ProfileActivity.kt و لایه آن برابر با activity_profile.xml

خب به ترتیب لایه ها و اکتیویتی ها را تعریف می کنیم.
ابتدا یک اکتیویتی از نوع کوتلین به نام HomeActivity.kt ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi.tabhost
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
class HomeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
    }
}

package ir.programchi.tabhost

import android.os.Bundle

import android.support.v7.app.AppCompatActivity

class HomeActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_home)

}

و layout آن که نام آن برابر با activity_home.xml است همانند زیر خواهد بود.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/holo_blue_dark"

android:gravity="center"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:text="@string/presented_by"

android:textColor="@android:color/white"

android:textSize="18sp"

android:textStyle="bold"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:contentDescription="@string/no_image"

android:src="@mipmap/ic_launcher"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/home"

android:textColor="@android:color/white"

android:textSize="17sp"/>

</LinearLayout>

اکتیویتی بعدی به نام RecentActivity.kt ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi.tabhost
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
class RecentActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_recent)
    }
}

package ir.programchi.tabhost

import android.os.Bundle

import android.support.v7.app.AppCompatActivity

class RecentActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_recent)

}

و layout آن که نام آن برابر با activity_recent.xml است و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_dark"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/txtMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/recent"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/holo_red_dark"

android:gravity="center"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:text="@string/presented_by"

android:textColor="@android:color/white"

android:textSize="18sp"

android:textStyle="bold"/>

<ImageView

android:id="@+id/imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:contentDescription="@string/no_image"

android:src="@mipmap/ic_launcher"/>

<TextView

android:id="@+id/txtMain"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/recent"

android:textColor="@android:color/white"

android:textSize="17sp"/>

</LinearLayout>

و در آخر اکتیویتی آخر ما که نام برابر با ProfileActivity.kt است و کدهای زیر را در آن قرار دهید.

package ir.programchi.tabhost
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
class ProfileActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_profile)
    }
}

package ir.programchi.tabhost

import android.os.Bundle

import android.support.v7.app.AppCompatActivity

class ProfileActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_profile)

}

و در نهایت activity_profile.xml آن همانند زیر خواهد بود.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_dark"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/profile"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/holo_green_dark"

android:gravity="center"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:text="@string/presented_by"

android:textColor="@android:color/white"

android:textSize="18sp"

android:textStyle="bold"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:contentDescription="@string/no_image"

android:src="@mipmap/ic_launcher"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/profile"

android:textColor="@android:color/white"

android:textSize="17sp"/>

</LinearLayout>

و برای اینکه یک تمامی کدها را به هم متصل کنیم باید یک اکتیویتی داشته باشیم تا آنها را به گونه به یک دیگر لینک کنیم برای اینکار یک اکتیویتی دیگر ایجاد می کنیم نام آن برابر با MainActivity.kt است و layout آن برابر با activity_main.xml خواهد بود.
در پایین کدهای زیر را در activity_main.xml قرار میدهیم.

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">
        </TabWidget>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@android:id/tabs">
        </FrameLayout>
    </RelativeLayout>
</TabHost>

<?xml version="1.0" encoding="utf-8"?>

<TabHost

android:id="@android:id/tabhost"

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true">

</TabWidget>

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_above="@android:id/tabs">

</FrameLayout>

</RelativeLayout>

</TabHost>

و در MainActivity.kt کدهای زیر را در آن قرار می دهیم.

package com.tutorialwing.tabhost
import android.app.TabActivity
import android.content.Intent
import android.os.Bundle
import android.widget.TabHost
import android.widget.Toast
class MainActivity : TabActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val tabHost = findViewById<TabHost>(android.R.id.tabhost)
        if (tabHost != null) {
            addTab(tabHost, getString(R.string.home), getString(R.string.home), HomeActivity::class.java)
            addTab(tabHost, getString(R.string.recent), getString(R.string.recent), RecentActivity::class.java)
            addTab(tabHost, getString(R.string.profile), getString(R.string.profile), ProfileActivity::class.java)
            tabHost.currentTab = 1
            tabHost.setOnTabChangedListener { tabId -> Toast.makeText(applicationContext, tabId, Toast.LENGTH_SHORT).show() }
        }
    }
    private fun addTab(tabHost: TabHost, name: String, indicator: String, className: Class<*>) {
        val tabSpec = tabHost.newTabSpec(name)
        tabSpec.setIndicator(indicator)
        val intent = Intent(this, className)
        tabSpec.setContent(intent)
        tabHost.addTab(tabSpec)
    }
}

package com.tutorialwing.tabhost

import android.app.TabActivity

import android.content.Intent

import android.os.Bundle

import android.widget.TabHost

import android.widget.Toast

class MainActivity : TabActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val tabHost = findViewById<TabHost>(android.R.id.tabhost)

if (tabHost != null) {

addTab(tabHost, getString(R.string.home), getString(R.string.home), HomeActivity::class.java)

addTab(tabHost, getString(R.string.recent), getString(R.string.recent), RecentActivity::class.java)

addTab(tabHost, getString(R.string.profile), getString(R.string.profile), ProfileActivity::class.java)

tabHost.currentTab = 1

tabHost.setOnTabChangedListener { tabId -> Toast.makeText(applicationContext, tabId, Toast.LENGTH_SHORT).show() }

}

private fun addTab(tabHost: TabHost, name: String, indicator: String, className: Class<*>) {

val tabSpec = tabHost.newTabSpec(name)

tabSpec.setIndicator(indicator)

val intent = Intent(this, className)

tabSpec.setContent(intent)

tabHost.addTab(tabSpec)

}

در بالا یک متود نوشته ایم که تعدادی ورودی دارد که برای هر tab مورد استفاده قرار میگیرد.
باید اکتیویتی هایی را که در برنامه قرار دادیم در AndroidManifest.xml تعریف کنیم پس همانند زیر فایل AndroidManifest.xml را ویرایش کنید.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="ir.programchi.tabhost"
		  xmlns:android="http://schemas.android.com/apk/res/android">
	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>
				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
		<activity
			android:name=".RecentActivity"
			android:label="@string/recent">
		</activity>
		<activity
			android:name=".HomeActivity"
			android:label="@string/home">
		</activity>
		<activity
			android:name=".ProfileActivity"
			android:label="@string/profile">
		</activity>
	</application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest package="ir.programchi.tabhost"

xmlns:android="http://schemas.android.com/apk/res/android">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

<activity

android:name=".RecentActivity"

android:label="@string/recent">

</activity>

<activity

android:name=".HomeActivity"

android:label="@string/home">

</activity>

<activity

android:name=".ProfileActivity"

android:label="@string/profile">

</activity>

</application>

</manifest>

این آموزش هم به پایان رسید.
موفق باشید.

مطالعه بیشتر

آموزش TabHost در کوتلین

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی