PDA

View Full Version : مشکل در طراحی رابط کاربری اندروید



mamadcity
چهارشنبه 26 شهریور 1393, 10:46 صبح
سلام خدمت دوستان و اساتید عزیز بنده تو طراحی رابط کاربری برنامه اندرویدیم به مشکل برخوردم
من تو فتوشاپ یه عکس طراحی کردم حالا اونو تکه تکه کردم و می خوام بیارم تو برنامه و کنار هم قرارم بدم و به بعضی ها هم خاصیت کلیک بدم
ولی مشکل اینجاست که این عکسا کناره هم قرار نمیگیرین در واقع میشه با خاصیت absolutelayout اینکار رو کرد ولی تو رزولوشن های مختلف کامل به هم میریزه
یه نمونه عکس گذاشتم که تو این عکس از LinearLayout استفاده کردم ولی مشکل فاصله داره که تو عکس معلومه
از دوستان عزیز خواهشمندم اکه راه حلی برای این کار دارن اعلام کنن ممنون

عکس نمونه (http://s6.uplod.ir/i/00423/sr1wc0ig9jfd.png)

Amin-rz
چهارشنبه 26 شهریور 1393, 12:35 عصر
xml این قسمت رو بذار تا ببینیم چی کردی.
بعلاوه این 3تا عکس رو هم آپلود کن.

mamadcity
چهارشنبه 26 شهریور 1393, 12:36 عصر
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#22A7F0"
android:gravity="center"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:background="@drawable/shape"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/bazoleft" >

</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/circle" >

</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/bazoright" >

</FrameLayout>

</LinearLayout>

</LinearLayout>

momayyezi_m
چهارشنبه 26 شهریور 1393, 12:47 عصر
باید از متد های زیر موقعیت ایتم رو نسبت به بقیه میسنجی



android:layout_toLeftOf
android:layout_toRightOf
android:below

و با این کد ها فاصله ها رو تعیین میکنی ...فاصله ها رو نسبت به ایتم های داخل صفحه تعیین کن و نه با گوشه های صفحه



android:layout_marginaLeft
android:layout_marginRight



یاعلی

mamadcity
چهارشنبه 26 شهریور 1393, 12:53 عصر
باید از متد های زیر موقعیت ایتم رو نسبت به بقیه میسنجی



android:layout_toLeftOf
android:layout_toRightOf
android:below

و با این کد ها فاصله ها رو تعیین میکنی ...فاصله ها رو نسبت به ایتم های داخل صفحه تعیین کن و نه با گوشه های صفحه



android:layout_marginaLeft
android:layout_marginRight



یاعلی

ممنون بابت راهنمایی ولی اگه نمونه عکس رو دیده باشین من می خوام او فضای خالی رو خیلی کم کنم و نزدیک به دایره وسط باشه
که مشکل بنده وجود یه سری مرز بندی بین لایه ها هست که وقتی با اون کد هایی که شما گذاشتین تست می کنم کل لایه های داخل جابه جا میشم من می خوان لایه دایره سرجاش باشه و لایه های کناری بیان کنارش و یه خورایی میان روی دایره

Amin-rz
چهارشنبه 26 شهریور 1393, 12:54 عصر
عدد 170dp که تو کد هست رو کم و زیاد کن تا جاگیری عکس ها درست بشه.
بعلاوه تو فایل xml حتما برای عکس ها سایز بذار بر حسب dp که تو صفحه نمایش های مختلف مشکل به وجود نیاد.




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#22A7F0"
android:gravity="center"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass} " >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:background="@drawable/shape"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<FrameLayout
android:layout_width="170dp"
android:layout_height="wrap_content" >


<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/circle" >
</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="@drawable/bazoleft" >
</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="@drawable/bazoright" >
</FrameLayout>



</FrameLayout>

</LinearLayout>

</LinearLayout>

mamadcity
چهارشنبه 26 شهریور 1393, 12:58 عصر
عدد 170dp که تو کد هست رو کم و زیاد کن تا جاگیری عکس ها درست بشه.
بعلاوه تو فایل xml حتما برای عکس ها سایز بذار بر حسب dp که تو صفحه نمایش های مختلف مشکل به وجود نیاد.




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#22A7F0"
android:gravity="center"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass} " >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:background="@drawable/shape"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<FrameLayout
android:layout_width="170dp"
android:layout_height="wrap_content" >


<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/pink" >
</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="@drawable/purple" >
</FrameLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="@drawable/purple" >
</FrameLayout>



</FrameLayout>

</LinearLayout>

</LinearLayout>


بازم مشکل حل نشد این تصویر رو ببینید

123602

Amin-rz
چهارشنبه 26 شهریور 1393, 13:02 عصر
عدد 170 رو کمتر کن.
کد اصلاح شد.:)

mamadcity
چهارشنبه 26 شهریور 1393, 13:10 عصر
چیزی تغییر نکرد :ناراحت:

Amin-rz
چهارشنبه 26 شهریور 1393, 13:33 عصر
همین الان دارم تست می کنم جواب میده.
با فتوشاپ عکس تو به 3عکس تقسیم کردم.
بعد با کم و زیاد کردن عدد 170 کاملا سر جایی که می خوای قرار می گیرن.
مثلا برای من روی 250dp درست شد چون سایز عکس هام فرق می کنه.

الان همین xml منو بدون هیچ کد اضافه ای کپی کن تو برنامه و اعداد 50dp,100dp,200dp,300dp رو بزن ببین فاصله کم و زیاد میشه یا نه!

mamadcity
چهارشنبه 26 شهریور 1393, 16:02 عصر
ببینید همچین عکسی رو می خوام به صورت تکه تکه بزارم و اون نقاط قرمز می خواد Button باشه
http://www.xum.ir/images/2014/09/17/Untitled-1-Recovered.png