طریقه ایجاد فایلهای layout منابع
در زمان اجرا یک برنامه فایلهای متعددی در پسزمینه دستگاه اندرویدی اجرا میشوند تا یک اکتیویتی بنمایش درآید. در این درس به بررسی این فایلها و همچنین نحوه اعمال تغییرات در آنها میپردازیم.
فهرست مطالب آموزش
نحوه عملکرد layout در اندروید استودیو
وقتی کاربر آیکن راهانداز یا launcher در صفحه نمایش را لمس میکند، یک برنامه راهاندازی میشود، ولی یک عالمه اتفاق در background میافتد. یک زنجیره کامل از اتفاقاتی که میافتد وجود دارد، مثلاً تعیین اینکه کدام اکتیویتی بارگذاری شود یعنی محتویات لایوت مربوط به کدام اکتیویتی روی صفحه نمایش نشان داده شود. نحوه کار این فرآیند اینجا، است.
من در پروژهای با نام Layout XML کار میکنم، با manifest برنامه شروع میکنم.
وقتی شما برنامهای را نصب میکنید، اکتیویتیهای مربوط به آن برنامه را ثبت میکنید.
و یکی از این اکتیویتیها عموماً به عنوان اکتیویتی launcher است.
سلسله مراتب در فایلهای پروژه اندرویدی
بنابراین وقتی کاربر با لمس لانچر روی صفحه نمایش برنامه را انتخاب میکند، این همان اکتیویتی یا صفحهای است که بارگذاری میشود.
به علاوه یک اکتیویتی شامل کلاس جاوا مربوطه هم است، در این مورد نام کلاس جاوا مربوطه Main Activity است.
به علاوه در اکتیویتی، یک متد با نام on Create به صورت خودکار توسط فریم ورک برنامه ساخته میشود. این یکی از متدهای چرخه حیات اکتیویتی است و من بعداً این را در درسهای بعدی توضیح خواهم داد.
یکی از مهمترین task ها در متد on Create انتخاب ارتباط با لایوت اکتیویتی است. و این اتصال با متدی با نام set ContentView انجام میشود و بعد دادن آیدی لایوت مربوطه به عنوان پارامتر ورودی به این متد.
که اینجا R.layout.activity_ main است و به فایل activity_main.xml برمیگردد.
و میتوانید با فشار دادن کلید کنترل یا کامند و کلیک روی آیدی وارد این فایل شوید.
در واقع این دستور تصمیم میگیرد کدام لایوت مربوط به این فایل جاوا میشود. ولی بعدها، درکار با قالبهایی با اندروید استودیو، یک لایوت ثانویه نیز به نام لایوت nested یا تودرتو وجود دارد و آنرا هم شامل میشود در واقع آنجا جایی است که عموماً کارهای سفارشی را انجام میدهید.
تگ include اینجا به فایل XML دیگر، یعنی content_main.xml. اشاره دارد و باز با فشار دادن کنترل یا کامند و کلیک کردن به فایل مربوطه میروم.
این فایل یک relative layout و یک جز nested TextView در داخل آن دارد.
و این Text View متن Hello World را نشان میدهد.
خب به دستگاه برمیگردم، خب میبینید که رشته Hello World اینجا نمایش داده شده است.
اعمال تغییرات از فایل content_main.xml
اگر بخواهم این مقدار را تغییر بدهم، باید اینکار را در فایل content_main.xml انجام بدهم.
این رشته فقط یک string است و نه یک منبع رشتهای پس میتوانم آنرا اینجا تغییر بدهم.
متن را به This is my custom text تغییر میدهم.
و یک فونت بزرگتر هم برای آن تعریف میکنم، با اضافه کردن ویژگی با نام text Size و تنظیم آن روی مقدار 24sp.
در مورد واحدهای اندازهگیری بعداً توضیح میدهم، فعلاً کافی است بدانید که sp واحد اندازهگیری است که سایز متن را در صفحه نمایش تغییر میدهد. بعد از این تغییرات، دوباره از برنامه اجرا میگیرم.
و وقتی برنامه بارگذاری شد؛ آن، متن سفارشی منو را در سایز بزرگ نشان میدهد.
حالا میتوانید با لایوت خود هر کاری که خواستید کنید.
پیشنهاد من این است که، اگر با این قالبهای جدید کار میکنید که در اندروید استودیو است، بهتر است لایوتهای خود را از از اول درست کنید و یک کپی از فایل لایوتی که قبلاً کار کردید بگیرید. در واقع این ویژگیهای خاصی دارد که باعث میشود context رفتارهایی درست مثل لایوت پدر داشته باشد، به خصوص این لایوت پدر Coordinator Layout.
خب میخواهم به فولدر لایوت بروم و میخواهم یک کپی از فایل content_main.xml بگیرم.
من آنرا کپی میکنم و بعد در فولدر لایوت کلیک راست میکنم و پاست.
اسم آنرا میگذارم new_layout.xml.
در این فایل لایوت جدید، هنوز یک تگ روت به نام Relative Layout دارم.
میخواهم Relative Layout را به Linear Layout تغییر بدهم.
یک Linear Layout میتواند یک پشته یا لیست از object های بالا به پایین باشد یا از چپ به راست، یا حتی راست به چپ.
برای کنترل اینکه کدام جهت باشد اینکار را میکنم.
یک ویژگی با نام orientation اضافه میکنم، و مقدار آنرا روی horizontal تنظیم میکنم.
پس شیءها را از چپ به راست تنظیم کردم. حالا میخواهم کد را ریفرمت کنم.
با فشار دادن ctrl + alt + l در ویندوز و cmd + opt + l در مک. اینکار را براحتی انجام میدهم و آن همه ویژگیها و پشتهها را ثبت میکند و خواندن آنها الان خیلی راحت است.
طراحی فرم در اندروید استودیو
حالا میخواهم چند تا component به لایوت اضافه کنم.
به Design mode میروم.
از قبل یک کامپوننت Text View داشتم. این ارر را میبندم و بعداً به آن رسیدگی میکنم.
الان با استفاده از اسکرول ماوس در لیست palette کمی پایینتر میآیم و Plain Text که یک فیلد متنی است را انتخاب میکنم و آنرا تا صفحه دراگ میکنم.
در ابتدا چیزی دیده نمیشود، ولی اگر به Text mode بروم، component، Edit Text را میبینم که اینجا قرار گرفته است.
برای اینکه دیدن آن کمی راحتتر شود، مقدار Text View را به Name: تغییر میدهم، که مثلاً این یک برچسب است برای Edit Text و کاربر میتواند مقداری را در آن component تایپ کند.
به Design mode برمیگردم ویک شیء Button هم در صفحه دراگ میکنم.
باز هم چیزی در Preview mode نمیبینیم ولی آنرا در Text View میبینم و مطمئنم که وجود دارد.
توجه داشته باشید که این لایوت هنوز در برنامه من بکار نرفته پس برای فراخوانی آن در لایوت اکتیویتی پدر، به activity_ main میروم و در دستور include، content_main.xml را به new_layout.xml تغییر میدهم.
نیاز به .xml نیست چون شما به این فایل با resource ID آن ارجاع دادید، نه با نام فایل فیزیکی آن. من این تغییرات را سیو میکنم و برنامه را روی دستگاه اجرا میکنم و این نتیجه است. میبینیم که یک Text View با مقدار Name و روبرو آن یک باکس برای ورود متن و یک باتن وجود دارد.
و اگر باکس ورود متن را لمس کنم کیبورد دستگاه بالا میآید و میتوانم متن دلخواه را تایپ کنم.
جمع بندی
خب، راههای زیادی برای کنترل سایز و نحوه قرارگیری این اشیاء وجود دارد که لایوت شکیلتر و ظریفتر به نظر آید.
ولی چیز مهمتر این است که اینجا در پروژه میتوانید بیشتر از یک فایل لایوت داشته باشید و تعیین کنید که در زمان اجرا کدام لایوت بارگذاری شود.
یا، در کلاس جاوا با فراخوانی set ContentView، و یا با تعریف لایوت فرزند دیگری در تگ include در لایوت پدر.