خب ما برنامه نویسا همیشه در برنامه نویسی موبایل مخصوصا اندروید یه چالش بزرگ و عجیب داریم به عنوان Responsive کردن المان های UI که به شدت چالش برانگیز و سخت هستش.
الان احتمالا میگید که خب این مساله تازه ای نیستش و خیلی راه حل ها داره و منم باید بگم دقیقا و کاملا حرف شما درسته اما یه موضوعی هست که همچنان کارو خراب میکنه که من به تازگی تونستم یه راه حل جالب پیدا کردم.
در فلاتر کتابخونه های زیادی هستش که کار Responsive کردن رو برامون خیلی آسون میکنن و همه ما فلاتر کارها غالبا ازشون استفاده میکنیم برای مثال sizer و flutter_screenutil.
این کتابخونه ها کاری میکنن این هستش که میان بر اساس ابعداد صفحه دیواسی که برنامه روش اجرا میشه سایز های استفاده شده در کدمونو ترجمه میکنن به یه قالب ثابت و تعیین شده بر اساس درصدی از رزولیشن صفحه برای مثال ما توی فلاتر یه عدد میدیم ۱۰۰ برای عرض و طول که ممکنه در یک دیوایسی بزرگ و یا در بعضی دیوایس ها کوچیک دیده شه ولی کتابخونه ای مثل flutter_screenutil میاد این ابعاد رد که به صورت 100.w و یا 100.h میدیم این اعداد رو بر اساس Design Size که تعریف میشه و به صورت پیش فرض Size(360,690) هستش به صورت درصدی و محاسباتی که انجام میده طراحی ما رو Responsive میکنه.
شاید الان براتون سوال شده که خب این که این کارو میکنه پس مشکل کجاس؟
خب اره داره انجام میده ولی یع سری المان ها توی تنظیمات اندروید هست که باعث میشن اینا بهم بریزن.
این تنظیمات چین؟ سادس اندازه فونت و سایز المان های دستگاه که تو بخش Display هستش.
خب بذارید یکم برگردم عقب که بدونیم داستان چیه اصلا. ببینید در دیوایس های اندرویدی ما کلی تنوع در اندازه صفحه های نمایش و حتی رزولیشن هاشون داریم که خود اندروید یه متودی داره که بر اساس اون تنظیماتی که گفتم بر روی صفحه تعاریف مختلفی از اون عدد ۱۰۰ داره و بر اسا اون تصمیم میگیره چند پیکسل رو روشن کنه. برای مثال دو تا دیوایس رو داریم :
دیوایس A : سایز صفحه ۶.۲ اینچ با ریزولیشن 1520 * 720 و تراکم پیکسلی تقریبا ۲۷۰
دیوایس B: سایز صفحه ۶.۲ اینچ با ریزولیشن 2340 * 1080 و تراکم پیکسلی تقریبا ۴۱۰
زمانی که شما میاید یک مربعی ایجاد میکنید که ابعادش ۱۰۰ در ۱۰۰ هستش در دیوایس A بزرگتر دیده میشه تا دیوایس B
من یکم تحقیق کردم و با یه سری متود ساده در حالت عادی و نرمال در تنظیمات به یه سری عدد رسیدم که برای دیوایس A عدد ۲ بود و برای دیوایس B عدد ۲.۷۵ رو دیدم این عددا چین؟ Device Pixel Ratio . این عدد تاثیر مستقیم داره روی ابعاد نمایش بر روی صفحه.
این کتابخونه ها به صورت اتوماتیک دارن این رو محاسبه میکنن و خود سیستم عامل هم انجام میده ولی مشکل کجا پیش میاد؟ ما یه کاربری داریم و میاد اندازه ها رو کوچیک میکنه توی تنظیمات سیستم عامل همه المان های ما توی اپلیکیشن کوچیک میشن و یا برعکس. فونت ها هم از این موضوع استثنا نیستن حواسون باشه. این یعنی بهم ریختگی و اگه تست کنید خیلی از برنامه های معروف هم این مشکل رو دارن خیلیا میگن خب تقصیره خودشه دیگه نمیشه همه رو در نظر گرفت که. خب آرههه ولی من به دلم نمیشینه و دنبال یه راهی بودم جلوشو بگیرم.
اولین کاری که کردم اومدم این کد رو تو چرخه حیاط برنامه اندروید نوشتم
این کد کاری که میکنه اینه که جلوی تغییرات تنظیمات سیستم عامل رو به کل میگیره و بر اساس عددی که ما تعریف کردیمو قرار میده اینجوری طراحی ما به صورت کامل ثابت میمونه.
مشکل این کد کجاس؟ اگه جهت نمایش برنامه عوض شه افقی به عمودی با بر عکس بهم ریختگی پیش میاد و همین طور به کاربر گفتیم اصلا مهم نیستی. پس من اینو کاملا باهاش مخالفم.
خب چیکار کردم که نتیجه گرفتم؟
اول از همه من از کتابخونه flutter_screenutil استفاده کردم بعد این تنظیمات رو براش انحام دادم
من چی کار کردم؟ جلوی Scale شدن سایز ها رو گرفتم خب شاید بگید که کلا این کتابخونه رو بی اثر کردی که. نه اینطوری نیستش همچنان داره اسکیل میکنه ولی نه به صورت کامل حالا تنظیمات ما اینجا تموم نمیشه یه کار نا تموم داریم هنوز باید اسکیل فونت رو خودمون محاسبه کنیم
اول از همه MediaQuery رو بدستش میارم و میام تغییرش میدم همون طور که میبینید مقدار devicePixelRatio رو برای devicePixelRatio قرار دادم و در قسمت textScaler دارم از طریق یک متودی با مقدار devicePixelRatio یه مقداری بهش میدم.
خب این متود چیکار میکنه؟
این متود یه TextScaler به صورت خطی میسازه که یه مقداری رو از متود getDynamicScaleFactor میگیره این متود getDynamicScaleFactor بر اساس DPR(Device Pixel Ratio) میاد و بر اساس مقادیری که برای من مناسب بودن به یه عددی بین ۰.۶۵ و ۱ میرسه
خب این عددا چین؟ یادتونه دیوایسایی که بالا مثال زدم؟ عدداشون ۲ و ۲.۷۵ بود خب TextScale برای دیوایس با عدد ۲.۷۵ مقدار ۰.۸ برای من خوب بود و برای دیوایس با عدد ۲ مثدار ۰.۷ خوب بود پس این محاسبه درستش شدش شما میتونید مقادیرو بر اساس مقادیر خودتون تغییر بدید که به نتایج خوب خودتون برسید این محاسبه و فرمول میاد بر اساس DPR و اون مقادیری که ما پیدا کردیم و مناسبمون هستش میاد یه عدد جدید برای Scale بدست میاره که همیشه مناسب و خوب دیده بشه متنامون حتی اگه تنظیمات سیستم عامل تغییر کرده باشه.
ممنونم از این که تا اینجا مقاله منو خوندید اگر سوالی داشتید بپرسید من حتما جواب میدم.
