رفتن به مطلب
انجمن اندروید ایران | آموزش برنامه نویسی اندروید و موبایل
  • android.png.1fab383bc8500cd93127cebc65b1dcab.png

آموزش نمایش درست عناصر در صفحه نمایش های مختلف


پست های پیشنهاد شده

[align=center]سلام به دوستای گلم[/align]

[align=center]اگه تاحالا حد عقل یه برنامه با اندروید ساخته باشید که دارای عناصر زیادی در layout باشه متوجه این میشید که برنامتون یه مشکل کوچیک اما مهم داره...[/align]

[align=center]بله برنامتون در گوشی های مختلف با سایز های مختلفی روبرو میشه که این ممکن میشه تا اجزاء برنامه هرکدوم به یه سمت کشیده بشن و خلاصه چهره برنامتون داغون میشه دیگه:D[/align]

[align=center]حالا من میخام تو این آموزش یه راه براتون بزارم تا در گوشی های مختلف بتون ظاهر UI رو به درستی نمایش بدین[/align]

[align=center]:::خب، میریم سراغ آموزش:::[/align]

[align=center]اول از همه به این عکس زیر یک نیگاهی بندازید[/align]

[align=center]kqp1w4nqo1e6cjwojof8.png[/align]

[align=center]خوب، همین طور که تو شکل :rolleyes: دیدید در شاخه res  چهار تا فولدر جدید با نام های :[/align]

[align=center] Layout-large[/align]

[align=center]Layuot-xlarge[/align]

[align=center]Layout-small[/align]

[align=center]Layout-v14[/align]

[align=center]ایجاد کردیم.[/align]

[align=center]به صورت پیش فرض وقتی پروژه اندروید رو ایجاد میکنیم فقط یک فولدر با نام layout وجود داره که اون لایوت برای گوشی هایی با سایز متوسط ساخته شده.[/align]

[align=center]اما این پوشه های جدید هر کدام به این صورت هستند[/align]

[align=center]Layout-large برای گوشی هایی با صفحه نمایش بزرگ[/align]

[align=center]Layout-xlarge برای گوشی هایی با صفحه نمایش خیلی بزرگ[/align]

[align=center]Layout-small برای گوشی هایی با صفحه نمایش کوچک [/align]

[align=center]Layout-v14 برای گوشی های v14[/align]

[align=center]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::[/align]

[align=center]وقتی این پوشه هارو ایجاد میکنیم اکلیپس تشخیص میده که ما میخایم برای سایز های مختلف گوشی ها لایوت های مختلفی ایجاد مکنیم.[/align]

[align=center]حالا همون لایوتی که در پوشه layout ایجاد کردیم رو در پوشه های جدید کپی و پیست میکنیم...:D[/align]

[align=center]حالا موقعیت عنصر هارو در هر لایوت تنظیم میکنیم(مثلا اگر صفحه نمایش بزرگ باشد به یک شکل عناصر رو بچینید و در سایز کوچک هم به همان شکلی که دوست دارید لایوت رو ویرایش کنید)[/align]

[align=center]این پایه کاری بود که باید میکردید الان میشه گفت ظاهر برنامتون رو در سایز های مختلف ویرایش کردید تا برنامه در سایز های نختلف دچار مشکل نشه ...[/align]

[align=center]اما اینجا یک چیز دیگر هم برنامه مارا مورد حدف خودش قرار میده تا ظاهر برنامه رو خراب کنه[/align]

[align=center]اونم حالت های افقی و عمودی برنامه هست که UI اپ مارو حدف گرفته :دی[/align]

[align=center]خوب برای این  مشکل هم راه حلی داریم[/align]

[align=center]این پوشه هایی که تا به حال  ساختید برای نمایش برنامه در حالت عمودی هم استفاده میشه و مشکلی نیست اما برای حالت افقی کافیه چند تا پوشه برای  این حالت برنامه طراحی کنید تا برناتون در حالت افقی هم درست نمایش داده بشه[/align]

[align=center]برای این کار باید چهار پوشه دیگر (با نام های زیر) به برنامتون اضافه کنید.[/align]

[align=center]layout-xlarge-land[/align]

[align=center]layout-large-land[/align]

[align=center]layout-small-land[/align]

[align=center]layout-land[/align]

[align=center]e6jld28cue695p3e65yk.png[/align]

[align=center]land در این پوشه ها به معنیه (landscape) یا همون حالت افقی هست که میتونید در سایز های مختلف حالت افقی یک استال خاص بدید[/align]

[align=center]برای این هم مانند پوشه های قبلی لایوت اصلی را کپی و در این پوشه ها پیست میکنیم و ویرایش های دلخواه خودمون رو در اون فایل ها اعمال میکنید...[/align]

[align=center]به همین راحتی میتونید برنامتون رو پر بازدید تر کنید چون یکی از عناصر پیشرفت یک برنامه ضاهر یا UI برنامتون هست که باید طوری باشه که کاربر جذب بشه... : p[/align]

[align=center]بنابراین برای لایه گرافیکی Activity ، در هر کدوم از پوشه ها، یک فایل xml قرار می دیم (مثلا ابتدا یکی رو میسازیم و بعد آن را در بقیه کپی میکنیم). معمولا توسعه دهنده ها، اول برای یک دسته (معمولا در پوشه layout که پیش فرض است)، یک فایل xml می سازند و تمامی عناصر آن را طراحی می کنند و عملکرد کدهای java مربوط به Activity را هم تست می کنند و در آخر که خیالشون از همه چیز راحت شد، فایل xml را در بقیه پوشه ها کپی کرده و سپس آونها رو تک تک باز می کنند و از طریق برنامه eclipse که این امکان را می دهد که ظاهر گرافیکی فایل xml را ببینیم، نحوه چیدمان عنصرها را تنظیم می کنند.[/align]

[align=center]حالا یک سری چیزای دیگه هم میگم تا در چیدمان عناصرتون کاربرد داشته باشه و نمایش اون هارو بهتر کنه::idea:[/align]

[align=center]نکته: همیشه در برنامه هاتون واحد dp را برای اندازه عناصر گرافیکی و واحد sp را برای متن به کار ببرید (واحد sp برای اندازه خود متن، نه برای اندازه TextView یا عناصری که حاوی متن هستند).[/align]

[align=center]نکته:  بهتره که برای عکس هایی که در برنامه قرار میدی سایز های مختلفی از اون هارو درست کنی و در پوشه های مربوط به سایز خودشون قرار بدید...[/align]

[align=center]3cldni8qeyq7e7p9fl54.png[/align]

[align=center]نکته:  هر فایل xml که برای یک دسته از گوشی ها با ((اندازه صفحه نمایش)) مشخص به کار می بریم، در واقع برای یک دسته از گوشی ها است که اندازه صفحه نمایش آنها، در یک بازه مشخص قرار می گیرد (اندازه آنها دقیقا یکسان نیست). بنابراین بهتر است عناصر به گونه ای تعریف شوند که در همین بازه نیز تغییرات چندانی نداشته باشیم.[/align]

[align=center]نکته:  یه سری از دوستا یه مشکلی براشون به وجود میاد مثلا:[/align]

[align=center]یه برنا مه ای طراحی کردن که یه Text View دارن و داخل این متن خلی بلندی گذاشتن[/align]

[align=center]بعد مشکلی که براشون به وجود میاد اینه که در صفحه های بزرگ متن کامل دیده میشه اما در صفحه های کوچک فقط قسمتی از متن دیده میشه[/align]

[align=center]خوب برای حل این مشکل از روش بالا نباد استفاده کنید باید برای برنامتون یه اسکرول طراحی کنید و اون Text View رو در اون اسکرول قرار بدید تا در صورت کوچک بودن صفحه کاربر بتونه به پایین بره و ادامه متن رو مشاهده کنه...[/align]

[align=center]حالا غیر از این روش ها یه روش دیگه هم هست که برای برنامه هایی استفاده میشه که موقعیت عناصر خیلی خیلی باید دقیق باشه.[/align]

[align=center]این روش هم به این صورت هست که تعداد پیکسی های کوشی کاربر رو دریافت میکنه و بر طبق پیکسل عناصر برنامه رو میچینه[/align]

[align=center]البته من این روش رو هنوز یاد ندارم ولی اگه یاد گرفتم حتما میزارمش[/align]

[align=center]این روش خیلی خیلی دقیق هست اما برنامه نویسان ارشد این روش رو توصیه نمیکنند مگر در برنامه های خاص.....[/align]

[align=center]خوب...[/align]

[align=center]این بود آموزش ما[/align]

[align=center]:::امید وارم بتونم بخشی از مشکلاتتون رو حل کرده باشم:::[/align]

[align=center]بازم سوالی داشتید بپرسید در خدمتم[/align]

[align=center]در آخرم یه نصیحت میکنم:P[/align]

[align=center]روی ظاهر برنامتون خیلی کار کنید تا کاربر پسند باشه[/align]

[align=center]باور کنید این خیلی تو بهتر شدن برنامه کمک میکنه:blush:[/align]

[align=center]تا آموزش های بعدی....   بودورود:heart:[/align]

لینک ارسال
به اشتراک گذاری در سایت های دیگر

سلام،

اگه onConfigurationChanged رو بازنویسی کرده باشیم که با هر بار تغییر روتیشن برنامه از اول لود نشه؛ چه شکلی میشه از این روش برای نمایش لایوت های مختلف استفاده کرد؟

لینک ارسال
به اشتراک گذاری در سایت های دیگر

سلام،

اگه onConfigurationChanged رو بازنویسی کرده باشیم که با هر بار تغییر روتیشن برنامه از اول لود نشه؛ چه شکلی میشه از این روش برای نمایش لایوت های مختلف استفاده کرد؟

سلام

خوب به جای این که از onConfigurationChanged  در کد های جاواتون استفاده کنید از این خط کد در activity لایه هاتون که در مین فیست هست استفاده کنید:

[shcode=xml]android:configChanges="keyboardHidden|orientation|screenSize"[/shcode]

یعنی کد های اون activity تون به این شکل در بیاد

[shcode=xml]

       

            android:name="com.test.appname.MainActivity"

            android:label="@string/app_name" 

            android:configChanges="keyboardHidden|orientation|screenSize"

            android:theme="@style/Theme.Transparent">

   

[/shcode]

لینک ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...