آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

طراحی UI (نسخه جدید برنامه)

Hajhosseini  11 سال پیش  11 سال پیش
+9 0

لطفا نسخه جدید رو دانلود کنید و نظرتون رو بگید. هنوز یکسری باگ داره، از هر گونه نظر در مورد UX,UI ، نرم کار کردن انیمیشن ها و ... استقبال میشه. پیشاپیش ممنون از نظراتتون دوستان عزیز
لینک نسخه جدید
سلام دوستان
در زیر لینک برنامه ایه که من چند روزه دارم طراحی میکنم.
این برنامه شامل یک Actionbar هست که سایزش با اسکرول تغییر میکنه.
سناریو برنامه به صورتی هست که کاربر وقتی متن رو اسکرول میکنه برای این که فضای بیشتری برای خوندن متن داشته باشه Actionbar کوچک میشه.
تنها مشکلی که 2 راه حل براش دارم ولی نمیدونم کدوم اصولی تره زمانیه که کاربر صفحه اول رو اسکرول میکنه و میره به صفحه دومه، در این صورت بالای صفحه دوم خالی میمونه، کاری که من میخوام بکنم شبیه GooglePlayGames هست (روی یک بازی که کلیک میکنید صفحه مورد نظر رو میبینید)، توی گوگل پلی گیمز 3 عدد Fragment وجود داره که وقتی جابجا میشن اسکرول به طور کامل Handle میشه.
.
راه حل هایی که به فکرم رسیده:
1: مانند گوگل پلی ViewPager رو ببرم بالا
2: اسکرول شدن رو هندل کنم(کار خیلی سخت و زمان بریه و با کوچکترین تغییر در آینده همه چی نابود میشه)

مشکلات روش ها:
روش اول: قبلا لیست ویو رو جابجا کردم و برنامه شدیدا Lag گرفت، اگر ویو پیجر رو جابجا کنم Lag نداره؟ به هر حال کسی که این کار رو کرده گوگل هست و میتونن از خیلی چیزا استفاده کرده باشن.
روش دوم: اگر یک لیست از لیستنر ها تعریف کنم و در کلاس UiMoveHelper که جابجایی هارو انجام میدم با اسکرول شدن بگم همه لیست ویو هایی که onViewCreated برمیگردونه رو ببر بالا 2 تا مشکل داره، 1 اینکه فقط باید به اندازه Actionbar بره بالا، 2 اینکه Fragment شماره 3 که ساخته نشده که نمیره بالا.
خلاصه شرمنده که سرتون رو درد اوردم.ممنون میشم برنامه رو دانلود کنید و مشکلم رو ببینید.

0 0
روش اول تست شد، به دلیل اختلال توی اسکرول شدن RecycleView و جابجایی ویوپیجر پرش ایجاد میشه، گوگل پلی هم ویو پیجر رو نمیبرد بالا. دوستان لطفا یک نگاهی به برنامه بندازید حداقل نظرتون رو بگید. 30 نفر این تاپیک رو دیدن و هیچی؟ (11 سال پیش)
+1 0
سلام - نظرم اینه که واقعاْ زیباست D: - اغلبمون باید یادبگیریم از شما :) - به شخصه تا با یه مشکل برخورد مستقیم نداشته باشم نمیتونم راه حلی هم ارائه بدم (البته نه همه مشکلات مال شما خاصه). (11 سال پیش)
0 0
سلام - نظرم اینه که واقعاْ زیباست D: - اغلبمون باید یادبگیریم از شما :) - به شخصه تا با یه مشکل برخورد مستقیم نداشته باشم نمیتونم راه حلی هم ارائه بدم (البته نه همه مشکلات مال شما خاصه). (11 سال پیش)
0 0
مرسی که چک کردی اسپریت جان، من هنوز خیلی جا دارم که به کسی چیزی یاد بدم.مساله اینجاست که این ارتباط های اکتیویتی، فرگمنت، کلاس ها، لیستنر ها و ... انقدر داره پیچیده میشه که اصلا خودمم نمیفهمم چی مینویسم. (11 سال پیش)
0 0
حاجی حسینی جان :) این UI ات واقعا محشر بود .مخصوصا اون آیکون کتابه و انیمیشن ها و ... در موردش بیشتر توضیح میدی . نحوه پیاده سازیش... تشکر (11 سال پیش)
+1 0
وای چقد معرکست. خداییش عالیه ایول شرمنده که از لحاظ فنی نظری نمیتونم بدم. فقط از لحاظ بصری نظرمو گفتم :) (11 سال پیش)
0 0
مرسی امیر جان، لطف دارید شما.اگر ایده ای برای بهتر شدن برنامه دارید هم استقبال میشه (11 سال پیش)
0 0
راستشو بخوای من اصلا سر در نیاوردم چی به چی هست. حتی مشکلتم نفهمیدم چیه :| گفتم که من از نظر فنی نمیتونم هیچ نظر و ایده ای بدم . فقط از لحاظ بصری عالیه :) (11 سال پیش)
0 0
از نظر فنی نه، برای بهتر و زیبا تر شدن برنامه ایده ای داری امیر جان؟ این برنامه قراره یک قالب بشه، که بشه هر نوع کتاب، مطالب آموزشی و برنامه هایی که محتوی محور هستند رو در در خودش جا بده (11 سال پیش)
+1 0
با اینکه با برنامه های محتوی محور میونه خوبی ندارم ولی پیشنهادم برای بهتر شدن : به نظر من از رنگ سفید کمتر استفاده بشه بهتره. اگه رنگ ها به تیره تر شدن مایل بشن مثل همین سایت خودمون ... خیلی عالی میشه و خوندن مطالب برای کاربر لذت بخش تر میشه. البته باید رنگ بندی رعایت بشه و یه ترکیب خوشگل مثل الان که سفید و صورتی پر رنگ استفاده کردی بدست بیاد. ولی بهت تبریک میگم که دنبال یه شیوه ی جدید از برنامه های محتوی محور رفتی که اگه به ناچار مجبور شدی از محتوا استفاده کنی به این زیبایی باشه و کاربر رو جذب کنه. خیلی خوبه :) موفق باشی رفیق (11 سال پیش)
0 0
ممنون از همه دوستانی که برنامه رو دانلود کردن یا این پست رو مطالعه کردن، نسخه جدید آماده شده، لطفا دانلود کنید و نظراتتون رو در قالب نظر و یا پاسخ درج کنید، ممنون (11 سال پیش)
+1 0
بازم عالی. اون مشکلاتی که گفته بودی رو رفع کردی الان؟ اون آیکون کتاب بعضی وقتا که برمیگردیم بالای صفه میاد بالا بعضی وقتا نمیاد ولی. چجوریه؟ باید پایین بمونه یا بیاد بالا؟ صفحه ی دو هم مث قبله هنوز ( متن میاد پایین به جای قسمت صورتی رنگ : لینک. ( البته نمیدونم تا چه حد این موارد مهمه. ولی دیگه در حد دانش سه ماهه خودم میخوام لطفت رو جبران کنم:) ... ) (11 سال پیش)
+1 0
من آخر نفهمیدم چطوری لینک میذارین اینجا :D لینک : لینک (11 سال پیش)
0 0
فهمیدم :| :D (11 سال پیش)
0 0
مشکل این عکسی که گذاشتید رو رفع کردم، اون کتاب رو به احتمال زیاد روش جابجاییش رو عوض کنم، روی کتاب کار نکردم چون باید کلا عوض بشه، ولی مشکلات دیگه ای که گفته بودم به طور کامل برطرف شد (11 سال پیش)
+1 0
خب این عکس مال نسخه ی جدیده ها . همین الان گرفتم. صفحه ی دو هنوز مونده. خب پس من دیگه بیش از این چیزی به ذهنم نمیرسه. موفق باشید :) (11 سال پیش)
+1 0
کاملا درسته، بعد از ارسال نسخه یکی از دوستان در وایبر به من این باگ رو گزارش کرد، حدود نیم ساعتی وقت من رو گرفت تا مشکل رو پیدا کنم. (11 سال پیش)
+1 0
آها. موفق باشی :) چه چیز های دیگه ای قراره اضافه کنی به این؟ از آبجکت انیمیتور استفاده کردی برای اون کتابه؟ (11 سال پیش)
+1 0
بله از ObjectAnimator استفاده کردم، خیلی چیزا قراره اضافه بشه، این فقط یک سمپل برای پیاده سازی یک قالب هست. این قالب قراره ماژولار بشه، یعنی اگر در هر برنامه ای بخوایم یک اکشن بار به این صورت داشته باشیم، این ماژول رو اضافه میکنیم و تمام. در آینده نزدیک فیچر های زیبایی به این برنامه اضافه میشه. (11 سال پیش)
0 0
علی جان سلام. ببخشید یه سوال: استاد استفاده از Fragment رو گفتن توی آموزش ها یا خیر؟ (11 سال پیش)
0 0
خیر استاد فرگمنت هارو آموزش ندادند، کار باهاشون مانند اکتیویتیه، البته یکسری تفاوت ها هم داره. (11 سال پیش)
 برای این سوال 2 پاسخ وجود دارد.
پاسخ به سوال 
Hajhosseini  11 سال پیش
+6 0

javac جان من دارم طرح گوگل رو پیاده سازی میکنم. البته اون آیکون کتاب ایده خودم بود و پیاده سازیش خیلی برام سخت بود.گوگل هم یک نمونه ساده از این رو ساخته ولی فقط از پایین صفحه کمی میاد بالا و بعد دوباره میره پایین
روش ساخت اکشن بار به این صورت هست که من یک اکشن بار 2 لایه دارم که لایه هارو با انجام اسکرول روی RecycleView بالا میبرم.اون اعداد که گوگل بهشون میگه Tab یک Indicator هستند که اون هم با اسکرول بالا میره.انیمیشن ها هم با ObjectAnimator ست شدن و آیتم ها هم توی CardView خود گوگل هستن.
ویو پیجر زیرش نمیتونه حرکت کنه چون حرکتش باعث Lag میشه پس ViewPager رو بزرگتر ساختم و در آداپتر RecycleView یک type خالی تعریف کردم که آیتم های RecycleView از ابتدا نشون داده بشن.
اینا فقط قسمت Layout ها و طراحی ظاهری بود.در مورد کد هم میتونم بگم همه چیز داینامیکه
من یک کلاس UiMoveHelper دارم که زمانی که از فرگمنت میخوام چیزی رو جابجا کنم باید از اکتیویتی مورد نظر View ها رو بگیرم و بعد دوباره به همون اکتیویتی بگم که به UiMoveHelper دستور بده که عملیات جابجایی رو انجام بده.
شرمنده اگر یکم پیچیده توضیح دادم خودمم یکم هنگ کردم.

+1 0
درکل نفهمیدم چی شد :| اما دمت گرم سعی میکنم خودمم بگردم ببینم چی گیر میارم .فعلا اینو دارم دنبال میکنم لینک (11 سال پیش)
+2 0
material design حرف نداره، منم بیشتر استاندارد هاشو رعایت کردم.برای نمونه هم میتونی App های گوگل باز کنی و با زدن ShowLayoutBoundaries توی developer options گوشیت کل layout های برنامه های گوگل رو ببینی. خیلی بهت کمک میکنه (11 سال پیش)
0 0
آره متریال دیزاین فوق العاده هست . این انیمیشن ها و مثلا اون floating button یا سایر چیزا جزو اندروید compatibility 7 هست که باید اضافه کنیم به پروژه و خودش تمام اکشن ها و انیمیشن ها رو داره و فقط باید کاستوم و استفاده کنیم ؟ اون سمپل گوگل که گفتی (در مورد باز شدن لیست ویو ) پیدا نکردم ، اگر لینکش رو بدی ممنون میشم :) (11 سال پیش)
+2 0
اینم یه سری example شاید به کار بقیه هم بیاد لینک (11 سال پیش)
+1 0
سمپل منظورم خود برنامه GoogleGames بود، گوگل این چیزا رو سمپل نمیده به کسی این انیمیشن هم چیز آماده ای نداره، از Scale Animation استفاده کردم، ObjectAnimator عین همون انیمیشن هایی هست که استاد آموزش دادن ولی خیلی نرم و روون تر و به قول گوگل Optimize شدست، البته یکسری قابلیت های اضافه هم داره. (11 سال پیش)
+1 0
علی جان یک سوال داشتم، با توجه به اینکه Recycler View عملکردی مشابه لیست ویو الواری که استاد آموزش دادن داره(تا اونجایی که میدونم کارش همونه) پس چرا از لیست ویو استفاده نکردی؟ (11 سال پیش)
+1 0
به 2 دلیل حسین جان، اول اینکه RecyclerView به گفته گوگل Optimize تر عمل میکنه، دوم به این دلیل که متدی داره که به طور دقیق بهت میگه چه مقدار اسکرول انجام شده، در صورتی که لیست ویو این قابلیت رو ساپورت نمیکنه و مجبوریم از روش های دیگه استفاده کنیم، مثلا محاسبه کردن مقدار اسکرول بر اساس آیتم هایی که لود میشن.کلا من ترجیح میدم از جدیدترین SDK گوگل استفاده کنم چون قابلیت های خیلی زیادی در اختیار ما قرار میده. (11 سال پیش)
پاسخ به سوال 
Hajhosseini  11 سال پیش
+6 0

زمانی که از ViewPager استفاده میکنیم، نمیتونیم به فرگمنت ها تگ اختصاص بدیم چون خود ViewPager به صورت اتوماتیک اینکار رو انجام میده.البته حتما باید آداپتر فرگمنت از نوع FragmentPagerAdapter باشه وگرنه تگ درست نمیشه و null برمیگردونه.

این روش برای کسانی به درد میخوره که میخوان با کلیک بر یک دکمه در همه فرگمنت ها تغییر ایجاد کنن.(من میخوام با اسکرول شدن یک RecyclerView همه RecyclerView ها اسکرول بشن)

مرحله اول: ارسال فرگمنت جاری به اکتیویتی :
برای ارسال یک متد پابلیک در اکتیویتی ایجاد میکنیم که فقط و فقط یک ورودی از نوع Fragment که در ایمپورت ها باید import android.support.v4.app.Fragment; باشد میگیریم و از توی فرگمنت اون رو Call میکنیم.
مشکل من توی مقایسه تگ ها این بود که من یک FragmentMain میگرفتم. (FragmentMain نام کلاس فرگمنت من بود)

مرحله دوم:ارسال فرگمنت ها و ذخیره آنها:
زمانی که از FragmentPagerAdapter  استفاده میکنیم همه فرگمنت ها توی استک ذخیره میشن و حذف نمیشن، پس ما یک لیست از فرگمنت ها داریم که کم نمیشن.
توی اکتیویتی یک از ArrayList از فرگمنت ها درست میکنیم و یک متد مینویسیم که ورودی Fragment بگیره و به لیست اضافه کنه.
توی onViewCreated در کلاس فرگمنتمون میایم این تابع رو کال میکنیم که فرگمنتی که ساخته شده در این لیست اضافه بشه.
(حتما باید چک کنیم که قبلا توی لیست نبوده باشه مگرنه فاجعه رخ میده(در پایین طریقه تشخیص گفته میشه))

مرحله سوم: مقایسه فرگمنت ها:
من خیلی سرچ کردم ولی راهی براش پیدا نکردم، پس یک راه جدید میسازیم.
در صورتی که فرگمنت های ما تعدادشون کمتر از 10 عدد باشن همیشه آخرین کاراکتر تگ میشه ایندکس فرگمنت.
ایندکس فرگمنت جاری رو هم میشه از ViewPager دریافت کرد.
پس در اکتیویتی متدی که بالا نوشتیم رو کامل میکنیم. یک حلقه درست میکنیم که به تعداد ArrayList ی که ساختیم دونه دونه تگ فرگمنت های ArrayList رو با فرگمنتی که به متد ارسال شده مقایسه میکنیم، اگر True برگردوند یک متغیر که خارج از حلقه تعریف کردیم رو مساوی i یا همون شمارنده قرار میدیم.
اینجا ما تونستیم id فرگمنت جاری رو بگیریم، پس میگیم فرگمنت بعدی و قبلی اون عمل اسکرول رو انجام بدن، و فرگمنت های بعدی هم در onCreateView باید مقدار اسکرول شده رو بگیرن و خودشون رو تطبیق بدن.
توضیح: زمانی که اسکرول میشد همه فرگمنت ها میومدن اسکرول میکردن و RecyclerView میترکید.برای همین ما باید فرگمنتی که داره اسکرول میکنه پیدا کنیم و بعد بگیم بعدی و قبلیش عمل اسکرول رو انجام بدن.

اگر هر بخشی از کد هارو خواستید میتونم در اختیارتون بذارم دوستان، ولی کل پروژه 
رو، چون در شرکت ایران اپز نوشته شده نمیتونم ارسال کنم، لطفا همچین چیزی ازم نخواید

+1 0
علی جان با اینکه چیز زیادی حالیم نشد اما مطمئنم این کاری که کردی ( گذاشتن جواب مشکل و توضیح کاملی که دادی ) بعد ها واقعا بدردم خواهد خورد. خدا خیرت بده. ایشالله منم بتونم اون ویوی اختصای رو درست کنم و مثل تو جوابش رو بذارم که بقیه بتونن استفاده کنن. الان ویوپیجر رو میتونم بذارم اما چند تا مشکل هست. یکیش همینه که اصن نمیدونم فرگمنت چی هست ! میخوام از یه آموزش کامل مث آموزشای استاد بفهمم چیه که بعد بتونم روش با سرچ کردن مانور بدم. دوم اینکه ویو پیجر ۳ تا آیتم رو میتونه نشون بده اگه اشتباه نکنم. اگه بخوام ۵ تا داخل صفحه باشه که یکیش انتخاب شده هم نمیدونم تو کلاسش چجوری باید تغییر ایجاد کنم. ( البته هنوز اینایی که میگمو کامل تست نکردم و نمیدونم این چیزی که تو ذهنمه چه شکلی میشه اصلا . فقط وقت کردم آموزش رو ببینم ) (11 سال پیش)
+1 0
خیلی خوشحالم که تونستم با این تاپیک کمکی کرده باشم. برای استفاده از ViewPager از Library : ViewPagerIndicator استفاده کنید، خیلی حالت های خوبی داره، و البته خیلی هم کار باهاش سادست. ولی شما باید اول با Fragment ها آشنایی پیدا کنید. (11 سال پیش)
+1 0
روی گوشی من نصب نمیشه.. گوشی من 2.3 هست. مشکل از ورژنمه یا اینکه از پکیج شماست ؟! (11 سال پیش)
0 0
خطایی هم که میده parse error هست. (11 سال پیش)
0 0
بله روی اندروید پایین تر از 3 نصب نمیشه. (11 سال پیش)
0 0
به زودی این برنامه منتشر میشه. (11 سال پیش)
+1 0
مرسی از معرفی کتابخونه اما فکر نمیکنم با اینم بشه اونجوری که میخوام پیاده کردش.فرگمنت ها رو هم توی سایتا برسی کردم اما تا یه مثال کاربردی ( مثل مثال های استاد ) انجام ندم هیچی نمیفهمم ازش و اصلا نمیدونم چجور میشه تو این قضیه ازش استفاده کرد. فعلا دارم جاهای دیگه برنامه رو تکمیل میکنم و به همون رادیو گراپ و اسکرول ویو افقی بسنده کردم (11 سال پیش)
+1 0
این کتابخونه ای که گفتم، تقریبا همه ی مدل های ویو پیجر رو ساپرت میکنه و پیاده سازیش بسیار سادست. Sample های توی کتابخونه رو دانلود کنید خیلی کمک میکنه. (11 سال پیش)
0 0
این کتابخونه ای که گفتم، تقریبا همه ی مدل های ویو پیجر رو ساپرت میکنه و پیاده سازیش بسیار سادست. Sample های توی کتابخونه رو دانلود کنید خیلی کمک میکنه. (11 سال پیش)
+1 0
چشم. ایشالله میرم سراغش ببینم چجوریه. اگه بتونم پیاده سازی کنم واقعا عالی میشه و از این به بعد ازش خیلی استفاده ها میکنم چون یه چیز خیلی کاربردی و جذابه . بازم مرسی از معرفی :) (11 سال پیش)

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .