بهینه سازی Bottom Navigation به سبک جدید گوگل (آموزشی)

پرسیده شده
فعالیت 1036 روز پیش
دیده شده 577 بار
7

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

 

چند وقتی هست که مزاحمتون نیستم دیگه ولی گفتم نیاز هست این مورد رو یادآور بشم.

 

اگه که به سمپل نویگیشن گوگل توی گیت‌هاب به این لینک مراجعه کرده باشید میدونین که تغییراتی صورت گرفته و چیزهایی که استاد توی این جلسه فرمودن تغییر کرده. در واقع گوگل باز هم یه سری مشکلات رو حل کرده و سعی کرده که برای تست پذیری نویگیشن کار رو راحت تر کنه.

 

داخل پروژه جدید ما فایلی به نام Navigation Extensions نداریم و فقط داخل MainActivity یکسری متد‌هایی نوشته شدن. قصد دارم به ترتیب پروژه خودمون رو طبق روش جدید گوگل پیاده سازی کنم برای دوستانی که شاید ندونن چیکار کنن.

 

مرحله اول: طبق چیزی که همیشه داریم لطفا سه لایبراری که مرتبط با Naviagtion Component هستن رو داخل build.gradle سطح اپ اضافه کنید. (مشاهده آخرین ورژن)

	//Navigation Library
    implementation "androidx.navigation:navigation-fragment-ktx:$navigation_version"
    implementation "androidx.navigation:navigation-ui-ktx:$navigation_version"
    implementation "androidx.navigation:navigation-runtime-ktx:$navigation_version"

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

 

مرحله سوم: داخل پوشه‌ی res دایرکتوری navigation رو اضافه کنید و سپس برای هر فرگمنت یک فایل نویگیشن بسازید (همون کاری که استاد انجام دادن).

 

مرحله چهارم: یک فایل برای نویگیشن اصلی بسازید و داخل اون به صورت زیر هر سه فایل نویگیشنی که دارید (home, cart, profile) رو مانند زیر include کنید. دقت داشته باشید که نویگیشن home رو Destination قرار بدید.

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/home">

    <include app:graph="@navigation/home" />
    <include app:graph="@navigation/cart" />
    <include app:graph="@navigation/profile" />

</navigation>

مرحله پنجم: داخل پوشه res یک پوشه menu بسازید و همانند آموزش استاد یک menu فایل برای نویگیشن خود ایجاد کنید. که در آخر به صورت زیر است:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />

    <item
        android:id="@+id/cart"
        android:icon="@drawable/ic_cart"
        android:title="@string/cart" />

    <item
        android:id="@+id/profile"
        android:icon="@drawable/ic_profile"
        android:title="@string/profile" />

</menu>

مرحله پنجم: سپس داخل فایل اکتیویتی که قرار هست bottom navigation view باشه که ما در این پروژه داخل activity_main هست، FragmentContainerView رو به صورت زیر اضافه کنید:

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/navigationContainer"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="56dp"
        app:navGraph="@navigation/nav_graph" />

مرحله ششم: در آخر داخل MainActivity به این صورت عمل می‌کنیم:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.navigation.NavController
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.navigateUp
import androidx.navigation.ui.setupWithNavController
import com.abproject.niky.R
import com.abproject.niky.databinding.ActivityMainBinding
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var navController: NavController
    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        setupBottomNavigationView()

    }

    private fun setupBottomNavigationView() {
        val navHostFragment = supportFragmentManager.findFragmentById(
            R.id.navigationContainer
        ) as NavHostFragment
        navController = navHostFragment.navController

        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.mainNavigationView)
        bottomNavigationView.setupWithNavController(navController)

        appBarConfiguration = AppBarConfiguration(
            setOf(R.id.homeFragment, R.id.cartFragment, R.id.profileFragment)
        )
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(appBarConfiguration)
    }
}

در واقع دیگر نیازی به عمل کردن به صورت استاد نیست و می‌تونید از روش جدیدی که خود گوگل اون رو ایجاد کرده استفاده کنید. این روش مانند روش قبلی با کد کمتر کار می‌کند.

 

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

 

اگه نیاز داشتید می‌تونید به لینک پروژه خودم هم به این آدرس مراجعه کنید. (این ریپازیتوری در روزهای آتی آپدیت میشه و با جلسات استاد منطبق میشه و همچنین با کامپوننت‌های متفاوت قراره پیاده سازی بشه)

 

موفق باشید..’

فایل پیوست

ابوالفضل رضایی
ابوالفضل رضایی

30 خرداد 00

1
حذف شده

(آپدیت) مطلبی مهم!

 

بعد از استفاده با روش بالا متوجه مشکلی شدم که همون مشکل نگه داشتن استیت بود.. گوگل فایل NavigationExtensions رو اصن برای همین موضوع نوشته بود. به پروژه سمپل گوگل داخل گیتهاب اگه نگاه بندازید متوجه میشید که ماه قبل طی یه کامیتی این فایل حذف شده.

 

اگه که آخر این گفتگو رو نگاه کنید دوستان گفتن که مرسی که نسخه جدید ریلیز شده و مشکلات رو حل کرده.. داخل مطلبی که بالا عرض کردم من از ورژن ۲.۳.۵ استفاده کرده بودم و این مشکل هنوز وجود داشت.. حتما چک کنید که موقع استفاده از آخرین ورژن که لینکش در مطلب بالا هست استفاده کنید تا مشکلی به وجود نیاد. 

 

نیاز دونستم بگم چون بعضی از دوستان هنوز از ورژن های قدیمی Bottom navigation view استفاده می کنند.

فایل پیوست

ابوالفضل رضایی

توسط

ابوالفضل رضایی

31 خرداد 00

حذف شده
سلام اقا ابوالفضل خسته نباشید ببخشید من از روش شما و استاد کار خودمو راه انداختم، ولی الان مشکلم وجود انیمیشن هاست! کد انیمیشن توی کدهایی که کپی پیست کردم نیست، ولی وقتی از یه فرگمنت میرم به فرگمنت دیگه انیمیشن داره!
ابوالفضل

10 مرداد 00