آموزش برنامه نویسی اندروید |
آموزش 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>
در بالا یکسری رشته ایجاد کردیم که در برنامه استفاده خواهد شد.
ما باید 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)
}
}
و 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>
اکتیویتی بعدی به نام 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)
}
}
و 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>
و در آخر اکتیویتی آخر ما که نام برابر با 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)
}
}
و در نهایت 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>
و برای اینکه یک تمامی کدها را به هم متصل کنیم باید یک اکتیویتی داشته باشیم تا آنها را به گونه به یک دیگر لینک کنیم برای اینکار یک اکتیویتی دیگر ایجاد می کنیم نام آن برابر با 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>
و در 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)
}
}
در بالا یک متود نوشته ایم که تعدادی ورودی دارد که برای هر 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>
این آموزش هم به پایان رسید.
موفق باشید.
