fragment در اندروید kotlin

 fragmnet  در kotlin چیست ؟ و موارد کاربردش چیست ؟

فرگمنت یک امکان اندوید استدیو می باشد که شما می توانید در آن از چند activity و یا sub activity استفاده نمایید و روال آن دقیقا همانند روال معمولی می باشد در واقع هر activity یک layout , d و یک فایل کد به زبان کاتلین دارد و فرگمنت به تنهایی قابلیتی ندارد و قدرت آن به هنگام تعویض activity ها می باشد .

موارد کاربرد بسیار بالایی دارد ولی از عمده موارد کاربرد آن در استفاده از منوهای پایینب می باشد (‌bottom navigation menu )  همانند استارتاپهای بزرگ مانند بهشت و یا دیوار .

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

متدهای fragment

()onAttach : این متد هنگامی که فرگمنت به اکتیویتی اضافه شده خوانده می شود.
()onCreate : این متد برای مقداردهی در هنگام ساخت فرگمنت فراخوانی می شود.
()onCreateView : این متد زمانی فراخوانده می شود که فرگمنت ایجاد شده و آماده ساخت واسط کاربری (UI) است. در اکتیویتی این وظیفه بر عهده onCreate() بود.
()onActivityCreated : این متد در زمانی فراخوانده می شود که اکتیویتی میزبان فرگمنت اجرا شده است.
()onStart : این متد زمانی فراخوانده می شود که رابط کاربری فرگمنت آماده نمایش است.
()onResume : در این زمان فرگمنت فعال است.
()onPause و ()onStop : این متد در زمان پایان فعالیت فرگمنت اجرا می شود و اگر لازم است چیزی ذخیره شود در این مرحله باید انجام داد.
()onDestroyView : این متد زمانی فراخوانده می شود که UI فرگمنت از اکتیویتی حذف می شود.
()onDestroy : در زمان انتهای حیات فرگمنت این متد اجرا می شود.
()onDetach : زمانی فراخوانده می شود که فرگمنت به طور کامل از اکتیویتی میزبان خود جدا شده است.
از مفاهیم فاصله گرفته و با ذکر مثالهایی، آموزش را ادامه می دهم.

پروژه ساخت برنامه bottom navigation menu

پیشنیازها

• Android Studio ۳٫۰ or higher
• Kotlin plugin ۱٫۱٫۵۱ or higher

گام اول ساخت پروژه kotlin

یک پروژه جدید در اندروید استدیو بسازید :

همانگونه که مشاهده می نمایید شما می بایست تیک پشتیباانی از کاتلین را بزتید .

پس از ساخت پروژه جدید نیاز است که شما امکان کاتلین را فراهم سازید .

در گام بعد محتوای فایل res/layout/activlty_main.xml که شما اصلی برنامه می باشد به صوزت زیر در می آوزیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.chikeandroid.bottomnavigationdemo.MainActivity">
 
    <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation"/>
 
</android.support.constraint.ConstraintLayout>

ساخت منو در کاتلین

پس از آن نیاز است فایل منویمان را بسازیم در آدرس :res/menu/navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
            android:id="@+id/navigation_songs"
            android:icon="@drawable/ic_music_note"
            android:title="Songs"/>
 
    <item
            android:id="@+id/navigation_albums"
            android:icon="@drawable/ic_album"
            android:title="Albums"/>
 
    <item
            android:id="@+id/navigation_artists"
            android:icon="@drawable/ic_person"
            android:title="Artists"/>
 
</menu>

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

در گام بعدی نیاز است شما محتوای اضلی منو را به هم در فایل MainActivity.kt. وصل نماید :

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    lateinit var toolbar: ActionBar
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        toolbar = supportActionBar!!
        val bottomNavigation: BottomNavigationView = findViewById(R.id.navigationView)
    }
}

تست برنامه:

مدیریت رویدادها در کاتلین

به منظور استفاده از منو ها باید آنها را در بذنه اصلی فایل MainActivity.kt. به صورت زیر تعریف نمایید :

// ...
    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_songs -> {
                 
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_albums -> {
              
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_artists -> {
                 
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }
     
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
// ...

در این قطعه کد معرفی می نماییم که در صورت انتخاب هر متو چه اتفاقی بیافتد که در این کد فقط گزینه هایمان هوض می شود ولی شما می توانید activity های متفاوت تعریف نمایید و آنهای را برای هر منو صدا بزنید.

ساخت صفحات در کاتلین

به منظور ساخت یک صفحه یا به اصطلاح فرگمنت fragment دوفایل زیر را با محتوای مشحص شده می سازیم:

SongsFragment.kt:

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
 
class SongsFragment : Fragment() {
 
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_songs, container, false)
 
    companion object {
        fun newInstance(): SongsFragment = SongsFragment()
    }
}

R.layout.fragment_songs

<?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:orientation="vertical">
 
    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Songs"
            android:gravity="center_vertical|center_horizontal"/>
 
</LinearLayout>

بهتر است فایلهای فرگمنت دیگری بسازید و در انتها محتویات فایل اصلی در همان جایی که منو ها را تعریف نمودیم تغییرات زیر را بدهیم:

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_songs -> {
            toolbar.title = "Songs"
            val songsFragment = SongsFragment.newInstance()
            openFragment(songsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_albums -> {
            toolbar.title = "Albums"
            val albumsFragment = AlbumsFragment.newInstance()
            openFragment(albumsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_artists -> {
            toolbar.title = "Artists"
            val artistsFragment = ArtistsFragment.newInstance()
            openFragment(artistsFragment)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}
 
private fun openFragment(fragment: Fragment) {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.container, fragment)
    transaction.addToBackStack(null)
    transaction.commit()
}

اجرای برنامه :

امیدواریم از آموزش ما لدت برده باشید بزودی آموزش تصویری کامل کاتلین در وب سایت piero.it قرار می دهیم .

منبع:https://code.tutsplus.com

نویسنده م ومترجم: پیروز جنابی

نوشته ای از ویکی پدیا فارسی