مسیر ایجاد دمو برای ویوهای تازه متولد شده

اخیرا قرار بر این بود که به اپلیکیشن شرکت ظاهر متفاوتی بدیم. در همین راستا تیم دیزاین یه سری طرح برای ویوها ایجاد کرد تا با کاستوم کردن اونها بتونیم ازشون استفاده کنیم.

تیم ما (تیم اندروید) هم تصمیم گرفت از این فرصت نهایت استفاده رو بکنه و صفحاتی که اکثرا توسط xml طراحی شده بودند رو ببره روی jetpack compose که در July 2021 رسما معرفی شده بود.

کار به این صورت شکسته شد که ابتدا میبایست design systemهای بیسیک (چیزی که بهش میگفتیم atomic views) زده میشد و بعد از اونها برای پیاده سازی ویوهای پیچیده تر استفاده میکردیم. برای این کار اول یه ماژول بهش اختصاص دادیم به اسم widgets که پیش از این هم برای نگهداری custom viewهایی که داخل اپ اومده بودن ازش استفاده میکردیم. برای هر دیزاین یه composable function ایجادکردیم و تمام حالت هایی که ممکن بود ویوی مدنظر(disable, bordered و ...) بگیره رو داخلش لحاظ کردیم.

مسـأله ای که حالا تیممون درگیرش بود این بود که سیستمی پیاده کنیم که هم بتونیم به کمکش پرفورمنس functionهایی که نوشتیم رو خیلی سریع بررسی کنیم، هم چیزی داشته باشیم برای انجام ui test و هم برای داکیومنت کردن فعالیتمون در راستای بهبود ظاهر اپ رو داکیومنت کرده باشیم. ضمنا وقتی نیروی جدیدی بهمون اضافه شه به کمک این قابلیت میتونه چک کنه که این چیزی که داخل طرح از سمت تیم ui اومده رو قبلا داشتیم یا باید اون هم پیاده سازی بشه

با بررسی ریپوی now in android (که به نظرم میتونه یه مرجع قوی برای پیداکردن به روزترین روش برای هر مسـأله ای باشه) متوجه شدیم دقیقا روشی برای پیاده سازی دموی ui اونجا پیاده سازی شده. پس وقتش بود ما هم دست به کار بشیم. ?

ابتدا نیاز بود یه ماژول ساخته بشه که دیپندنسی داره با ماژول widgets (که گفتیم تمام آیتم های design system رو اونجا پیاده سازی کردیم). کار خیلی ساده است. اسم ماژولمون شد app-view-catalog و کتابخونه های مرتبط با compose هم داخلش اد شد.برای اینکه به اندروید استودیو هم بگیم که قرار هست اینجا ما از ماژول widget استفاده کنیم کافی بود داخل build.gradle ماژول app-view-catalog این خط رو داشته باشیم:

dependencies {
    implementation project(':widgets')
    // add other dependencies like compose
}

برای قرار دادن ویوهای جدید اول داخل ماژولمون فایلی به نام catalog ساخته شد. داخل این فایل یه LazyColumn انداختیم تا بعدا با اسکرول کردن روی گوشی های ضعیف تر به صورت چشمی تا حدی متوجه جاهایی که لگ داره بشیم. از ابتدای widget شروع کردیم و ویوهارو با حالت های مختلف استفاده کردیم. از ویوهای خیلی کوچکتر گرفته (مثل دکمه ها) تا چیزهای پیچیده تر (مشابه bottom sheet)

حالا وقت استفاده از این فایل بود! برای همین اول باید ماژولمون رو وارد لیست وابستگی های ماژول app کنیم. مشابه قسمت قبل داخل بلاک dependencies در build.src ماژول app خواهیم داشت:

implementation project(':app-view-catalog')

حالا کافیه از فایل catalog تو برنامه استفاده کنیم مشابه اینجا:

Scaffold {
    ApplicationTheme {
        Surface {
            Catalog()
        }
    }
}

درنهایت نتیجه همچین چیزی شد:

شرط نمایش با توجه به build variant

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

برای این کار کافیه داخل ماژول اپتون productFlavor تعریف کنید:

productFlavors {
    flavorDimensions 'releasee'
    production {
        dimension 'releases'
        versionNameSuffix '-prod'
    }
    test {
        dimension 'releases'
        versionNameSuffix '-test'
    }
}

حالا که flavorهای مختلف داریم و میتونیم در حالت های مختلف تست بگیریم میتونیم یه پارامتر هم داخل flavor قرار بدیم تا با چک کردن اون بررسی کنیم آیا قرار هست ویوی مربوطه رو نشون بدیم یا نه. برای این کار خط زیر رو داخل حالتی که قرار هست catalog نشون بدیم میذاریم

 resValue 'bool', 'show_app_catalog', 'true'

و داخل بقیه اونها:

 resValue 'bool', 'show_app_catalog', 'false'

درواقع در مثال بالا حالا همچین کدی خواهیم داشت:

productFlavors {
    flavorDimensions 'releases'
    production {
        dimension 'releases'
        versionNameSuffix '-prod'
        resValue 'bool','show_app_catalog', 'false'
    }
    releaseTest {
        dimension 'releases'
        versionNameSuffix '-test'
        resValue 'bool', 'show_app_catalog', 'true'
    }
}

این تیکه کد براتون یه boolean میسازه که با استفاده از اون چه داخل xml و چه داخل compose میتونین برای چک کردن شرطتون از کد زیر استفاده کنین.

روش استفاده در کد کامپوز:

val showAppCatalog = booleanResource(R.bool.show_app_catalog)
if (showAppCatalog) {
    // show view
} else {
    // do sth
}

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

android:visibility='@{@bool/show_app_catalog ? View.VISIBLE : View.GONE}'

فقط یادتون باشه باید View رو import کنین داخل xml:

<data>

    <import type='android.view.View' />
    ...
</data>

درنهایت ممنون از اینکه وقت گذاشتین و تا انتها خوندین. از اونجایی که این اولین مطلب من در حوزه تخصصی بود ممنون میشم ازتون اگه پیشنهاد یا نقدی دارین بگین که در آینده بتونم مطالبم رو بهتر کنم. ?