Android`də Responsive Design
Əvvəlcə Responsive Design anlayışı ilə tanış olaq: Responsive Design dedikdə, program/web səhifə/mobile app və s. software məhsullarının onların işlədikləri bütün cihazlara ölçüsündən asılı olmayaraq uyğunlaşması, kontentin aydın təsviri, düzgün görünməsi nəzərdə tutulur.
Sizə bir sirr açım:) Responsive Design tələbi bəzən ən peşəkar developerlər üçün belə böyük problemə çevrilə bilər. Təsəvvür edin, 11,000+ Android cihazı var və biz tətbiqimizin bütün bu cihazlara uyğun olub-olmamasını necə müəyyənləşdirə bilərik? Əgər Responsive Dizayna sahib tətbiq yaradırsınızsa, xoşbəxtlikdən, tətbiqinizi bütün bu cihazlarda yoxlamağa ehtiyac yoxdur. Məqaləmin davamında `Responsive UI dizaynı üçün istifadə olunan əsas qaydalardan bəhs edəcəm və tətbiq yollarını aydınlaşdıracam. Necə deyərlər: “Let’s get started:)”.
Ümumi anlayışlar:
Android studioda elementlərin ölçülərini təyin etmək üçün xüsusi vahidlər mövcuddur. Bunların hər biri ilə ayrılıqda tanış olaq:
· dp: Density Independent Pixel, ekran sıxlığına (piksellərin sayına) əsasən elementləri yerləşdirir. Məsələn, 160dp ekranda 1dp = 1 piksel bərabərliyi doğrudur.
· dip: dip == dp. Android studionun ilkin versiyalarında dp “dip” kimi istifadə olunurdu.
· sp: Scale Independent Pixel, yazı ölçüləri üçün mütləq şəkildə sp vahidindən istifadə olunmalıdır.
· px: piksel
· in: inches fiziki ekran ölçüsünə cavabdehdir.
· mm: millimetr, ekranın fiziki ölçüsünə cavabdehdir.
· pt: inch-in 1/72 hissəsinə barəbərdir.
Ölçü vahidlərinin müxtəlifliyinə baxmayaraq, yazılar istisna hər zaman `dp istifadə edilməlidir. Yazılar üçün isə sp standart qəbul olunub. Bu iki vahid androiddə responsiv görüntü əldə etmək üçün xüsusi olaraq yaradılıb. Lakin, bununla barəbər standart (fixed) ölçü işlətmək professional sayılmır. Misal üçün, bir cihazda 24dp ölçülü element digəri üçün uyğun ölçüdə olmaya bilər.
Lakin bəzən sabit ölçülərdən istifadə qaçılmaz olur. Bu zaman istifadə edilə biləcək alternativ üsullar və variantlarla tanış olaq:
Android Resource faylları:
Responsive UI dedikdə, cihaz ekranında lazım olan anda əlçatan sahəyə reaksiya verən, onu düzgün əhatələməyi bacaran UI nəzərdə tutulur.
Android Resource System mövcud sahəyə əsasən alternativ resurslar təmin etməyə imkan verir. Resources android kodun istifadə etdiyi əlavə content, məsələn: bitmaps, layout definitions, app-də istifadə olunan stringlər, animation təlimatları və s. məlumatların saxlandığı xüsusi fayllardır. Müxtəlif cihazlara əsasən istifadə olunmalı olan faylları hər zaman təmin etmək gərəklidir. Belə ki, runtime vaxtı android cihazın ekran ölçüsünə əsasən avtomatik lazım olan fayldakı resursu istifadə edir. Məsələn, ekrana əsasən müxtəlif ölçüdə UI layoutları təmin edə bilərik. Resource fayllarındakı content-dən istifadə etmək üçün sadəcə resource ID-dən (Hansıki, proyektin R klasında saxlanır) istifadə kifayətdir.
Müxtəlif ekran ölçüləri və cihaz konfiqurasıyalarına əsasən resource fayllarını təmin etmək üçün: 1) res/ directoriyası altında <resources_name>-<config_qualifier> şəklində fayl yaradın. Burada <resources_name> default resurslara cavab verecek faylın adı, <qualifier> isə induvidual konfiqurasiya fayllarını təmin edir.
Məsələn aşağıdakı fayl ardıcıllıqlarına diqqət edin: Burada hdpi spesifikasiyası High-Density (Yüksək piksel sıxlıqlı) cihaz ekranları üçündür.
res/
drawable/
icon.png
background.png
drawable-hdpi/
icon.png
background.png
Ümümiyyətlə, mdpi (medium), hdpi (high), xhdpi (extra-high) və xxhdpi (extra-extra) kimi ölçülər mövcuddur və bu ölçülər arası keçidlər (nə zaman hansının istifadə olunması) xüsusi break-point (sərhəd qiyməti) qiyməti ilə müəyyən olunur. Aşağıdakı şəkildə bu keçidləri aydın görə bilərik:
Responsive UI yolunda ən yeni köməkçimiz: ConstraintLayout
ConstraintLayout düz iyerarxiyaya malik olan, (iç-içə view grouplara sahib olmayan) geniş və kompleks layout yaratmağa imkan verir. Əslində, bizim bildiyimiz RelativeLayout-a çox bənzərdir, lakin bir növ onun inkişaf etdirilmiş, dinamik funksiyaları olan versiyası kimi qəbul etmək olar.
ConstraintLayout-un bütün möcüzəsi onun Layout Editor-un vizual xüsusiyyətləri ilə asanlıqla istifadə oluna bilməsidir. Yəni, ConstraintLayout istifadə edərkən “drag-and-dropping” üsulu ilə dizaynı qururuq. XML kodları isə avtomatik tənzimlənir.
Necə tətbiq etməli?
1. Palette pəncərəsindən istifadə edəcəyiniz elementi tutub ekrana sürükləyin.
Bu zaman düzbucaqlı şəklində təsvir olunan elementin hər küncündə ölçünü nizamlayacaq nöqtələr və hər tərəfində contraint əlavə edə biləcəyiniz tutacaqlar görəcəksiniz.
2. View-u seçmək üçün üzərinə klikləyin.
3. View-un olacağı mövqeni təyin etmək və constraint-ləri əlavə etmək üçün drag-and-dropping və tutacaqlardan istifadə edə və ya Attributes pəncərəsindəki
işarəsinə klikləyə bilərsiniz.
Hər hansı bir elementi drag-and droping ilə ekrana gətirdikdə, onu qoyduğumuz yerdə dayanır. Lakin, əgər biz ona constraint əlavə etməsək runtime vaxtı o ekranda [0;0] pozisiyasına sürüşəcək. Bu baxımdan constraint-ləri əlavə etmək vacibdir. Ümumiyyətlə, hər bir view üçün minimum 1 üfüqi və 1 şaquli constraint tənzimləmək tələb olunur.
Şəkil 1-də nümunəyə diqqət edək. Burada C adlı view A ilə horizontal (üfüqi) əlaqəyə malikdir. Editorda bu düzgün görünsə də, runtime vaxtı ekranın yuxarı hissəsinə irəliləyə bilər. Lakin əgər Şəkil 2-də göstərildiyi kimi A ilə vertical (şaquli) əlaqə qursaq, problem aradan qalxacaq.
Diqqət etsəniz atributlar pəncərəsində aşağıdakı şəkildə göstərilən görüntü inspektoru var.
Görüntünün bütün tərəflərində göstərilən aşağıdakı simvolların mənasını aydınlaşdıraq:
Fixed: Spesifik ölçü təyin etmək üçün istifadə olunur. Yəni təyin edilən ölçü artıq ekranın ölçüsündən asılı olmayaraq sabit qalır.
· Wrap Content: View ona lazım olan qədər (öz content-ini əhatələyəcək şəkildə) sahə tutur.
· Match Constraints: View digər constraint-ləri əhatələyəcək və onlara uyğunlaşacaq qədər genişlənir.
Qeyd: ConstraintLayout-da match_parent istifadə olunmur. Onun yerinə match_constraints (0dp) atributu əlavə olunub.
Hər şeyin təzəsi, layoutun köhnəsi: LinearLayout!
LinearLayout elementləri ekranda xətti şəkildə, horizontal və ya vertical ardıcıllıqla təsvir etməyə imkan verir. Yuxarıda qeyd etdiyimiz kimi bacardıqca standart ölçülərdən qaçmaq lazımdır. Nisbətlərlə işləmək fikri isə, deyəsən, elə bizə lazım olan şeydir!:)
LinearLayout element ölçülərini bir-birinə nisbət şəklində təsvirini təmin edən weight xüsusiyyətinə malikdir. Bunun üçün iç-içə layoutlardan istifadə etmək lazımdır.
Root layout-a android:weightSum=”100" atributu əlavə edib, daha sonra bu layout-un hər bir child layout-unu 100-ün nisbəti şəklində göstərə bilərik. Məsələn, android:layout_weight=”70" və android:layout_weight=”30" göstərsək, onda elementləri ekranda 3:7 nisbətində təsvir etmiş olarıq. Beləliklə də, bu nisbət hər bir ekrana əsasən dinamik şəkildə uyğunlaşacaq. Aşağıdakı nümunədə bunu aydın görmək mümkündür.
Qeyd: Elementləri vertical olaraq təsvir edərkən, layout_weight atributunu olan hər bir child layout-da android:layout_height=”0dp” atributunu istifadə etməyimiz zəruri şərtdir. Əksinə, horizontal orientasiya istifadə olunursa android:layout_width=”0dp” olmalıdır.
Portrait yoxsa Landscape?
Android tətbiqlərdə responsivliklə bağlı ən böyük problemlər elə portrait-dən landscape-ə keçid zamanı baş verir. Bir çox tətbiqlərdə rast gəlinən bu problemi aradan qaldırmaq üçün hətta landscape modunu bağlayırlar. Əlbəttə, biz problemdən qaçmaq yerinə onun həllinin tərəfdarıyıq:)
Portrait high(hündürlüyün) width(endən) böyük, Landscape isə high(hündürlüyün) width(endən) kiçik halıdır. Belə ki, biz landscape formasına keçid edərkən belə əslində portrait orientasiyasında ola bilərik. Yəni layout_high və layout_width ölçülərinin yerini dəyişsək bir çox halda problem həll oluna bilər. Bu məntiqlə irəliləsək yuxarda qeyd etdiyim resource fayllarından effektiv istifadə etməklə portrait-landscape keçidlərini dinamik idarə etmək olar.
Dinamik layoutlar:
Android tətbiq yaradarkən ekran layoutlarını 4 fərqli ölçüdə (small, normal, large, x-large) yarada bilərsiniz. Bunun üçün aşağıdakı kimi res/ direktoriyasında layout/ faylında rightclick=>new=>Layout resource file bölməsinə daxil oluruq.
Açılan dialoq pəncərəsində size bölməsinə keçid edərək >> işarəsinə klikləyirik. Açılan yeni pəncərədə small, normal, large və x-large ölçülərindən birini seçərək layout faylını yarada bilərik.
Transformasiya:
Tranformasiya məntiqi dedikdə, hansı elementlərin göstərilməsi deyil, hansı formatda göstərilməsi nəzərdə tutulur. Ən sadə misal kimi showAsAction=”ifRoom” atributuna malik menu göstərilə bilər. Əgər mövcud sahə olarsa overflow menyu ilə text formatından icon formasına keçidi təmin edirik.
Transformasiyaya digər bir nümunə kimi məlumatları hansı formada göstərməsi misal ola bilər. Məsələn, kiçik ekran üçün ListView istifadə ediriksə, böyük ekranlar üçün GridView istifadə oluna bilər. Burada əsas məsələ mövcud sahədən mümkün qədər effektiv istifadə etməklə məlumatların təsviridir.
Necə tətbiq etməli?
RecyclerView-un layoutManager atributundan istifadə etməklə LinearLayoutManager-dən GridLayoutManager-ə keçə bilərik. (onCreateViewHolder() hissəsində)
Hissələrə ayırmaq:
Ekranı hissələrə ayırmaq məntiqini istifadə edərkən əslində mövcud sahəni daha effektiv istifadə etmiş oluruq. Misalçün, kiçik ekranda scroll funksiyası ilə elementleri list-də təsvir ediriksə böyük tablet ekranlarında boş qalan sahəyə elementleri xüsusi bölmələr şəklində yerləşdirmək olar. Aşağıdakı nümunəyə baxaq:
Diqqət etsəniz, burada əsas məntiq kiçik ekran üçün vertical görüntü, böyük ekran üçün isə horizontal görüntü yaratmaqdır. Beləliklə, əlçatan sahəni daha düzgün şəkildə istifadə etmiş oluruq.
Necə tətbiq etməli?
Əgər dinamik dizaynınız varsa, XML faylında sütunların sayını dəyişdirmək üçün StaggeredGridLayoutManager və app:spanCount və ya setSpanCount() istifadə edin.
Expand:
Bəzən, bütün ehtiyacın olan şey əslində kiçik dəyişiliklər olur. Məsələn, mövcud sahəni genişləndirmək və ya margin əlavə etmək.
Necə tətbiq etməli?
Bunun tətbiq edilməsi, əslində, xeyli asandır. Yuxarda qeyd edildiyi kimi uyğun resource faylları istifadə etmək əsas şərtdir. Belə ki, kiçik ekran üçün margin-i 0dp, böyük ekran üçün 24dp kimi qəbul edə bilərik. Digər bir yol isə Percent Support Library istifadə edilməsidir ki, layout_widthPercent vasitəsilə 100%-dən 80%-ə dəyişə bilərik.
Düzgün pozisiya işlədilməsi:
Ekrandakı View-ların düzgün yerləşdirilməsi hər zaman önəm kəsb edir. Məsələn, FloatingActionButton (FAB)-ı nəzərdən keçirək. Bu düymə hər zaman mühim bir əməliyyat yerinə yetirlə bilər. Bu da onun yerləşdirildiyi yerə daha çox diqqət etməyimizi tələb edir. Bu düymə adətən sağ aşağı küncdə yerləşir. Lakin planşet kimi böyük ekranlarda onun yerini dəyişə bilərik:
Necə tətbiq etməli?
CoordinatorLayout içərisində layout_gravity=”bottom|end” atributu ilə FloatingActionButton istifadə edirik. layout_anchor və layout_anchorGravity=”bottom|end” atributlari ilə müxtəlif pozisiyalarda FAB-ı AppBarLayout-a bağlaya bilərik.
Responsive tətbiqin yaradılması bəzən illərin təcrübəsi və uzun zaman ərzində qazanılmış vərdişlər sayəsində təmin edilə bilər. Android cihazlar, həqiqətən, saysız müxtəlif ölçüyə malikdir və bunların hər birində responsivliyi təmin etmək üçün konkret qayda mövcud deyil.
Adətən, təcrübəsinə əsasən hər bir developerin özünəməxsus üsulları olur. Biz bugünki məqaləmizdə gözlənilməsi zəruri olan əsas qaydalardan, istifadə edilə biləcək basic üsullardan qısaca bəhs etməyə çalışdıq. Daha uğurlu nəticələr üçün məqalədə qeyd olunan hər bir punktu ayrıca araşdırmağınız məsləhət görülür.
İstifadə olunmuş resurslar:
· https://medium.com/google-developers/building-a-responsive-ui-in-android-7dc7e4efcbb3
· https://developer.android.com/guide/topics/resources/more-resources#Dimension
· https://developer.android.com/training/constraint-layout/https://developer.android.com/guide/topics/resources/providing-resources?utm_campaign=android_series_responsive_ui_051016&utm_source=medium&utm_medium=blog
