نئومورفیسم (Neumorphism) در اندروید

من از اواخر سال گذشته چندین پست در مورد طراحی نئومورفیسم دیده‌ام. من شخصا به یک طرح جدید علاقمند هستم، بنابراین می‌خواستم آن را به اندروید انجام دهم. با این حال، من نمی‌توانستم کتابخانه را به خاطر محدودیت‌های پلتفرم پیدا کنم. پس من آن را ساده کردم. (پروژه گیت‌هاب)

من این مقاله را برای به اشتراک گذاشتن کتابخانه و دریافت بازخورد بیشتر نوشتم.

قبل از شروع، برخی از شما ممکن است با واژه نئومورفیسم ناآشنا باشید. این یک مفهوم رابط کاربری مانند متریال دیزان است و در ترسیم سایه‌ها متفاوت است. اگر می‌خواهید بیشتر در مورد نئومورفیسم بدانید، این مقاله را بخوانید.

در متریال دیزاین سطوح هنگامی که مانع نور می‌شوند، سایه ایجاد می‌کنند.

در نئومورفیسم، ابجکت ها از زیر پس‌زمینه بیرون آمدن و ظاهر می‌شوند.

چگونه از آن استفاده کنیم؟

استفاده کردن از آن ساده است. دو سایه در سمت چپ بالا و پایین بکشید. سایه باید به آرامی پخش شود. پس با استفاده ازRenderScript، سایه‌ها را محو کنید.

با این حال، صرفا به کار بردن آن باعث بروز مشکلات می‌شود. اگر شما سایه را در خارج از ناحیه دید رسم کنید، سایه قطع می‌شود.

ابتدا، من سعی کردم از android:clipChilderen="false" در root استفاده کنم. با این حال، بسته به نسخه سیستم‌عامل و یا در برخی از ViewGroup مانند RelativeLayout، ویژگی به درستی کار نمی‌کند، بنابراین مشکل به طور کامل حل نگردیده است.

پس در نهایت با استفاده از android:padding آن را حل کردم. برای جلب نظر این ویژگی در این منطقه، padding را به درستی تنظیم کنید.

افکت فشار دادن

مهم است که رابط کاربری سیار زیبا به نظر برسد. افکت فشار دادن مانند دادن دکمه هم مهم هستند. چگونه می‌توانم اثر فشار دکمه را در نئومورفیسم به دست بیاورم؟

اولین چیزی که به ذهن می‌رسد این است که چگونه شکل را به طور متفاوت با توجه به رویداد نشان دهد. این در واقع روشی است که برخی از مردم پیشنهاد کرده‌اند. متاسفانه، تعاملات در این روش به اندازه کافی طبیعی نیستند.

override fun onTouchEvent(event: MotionEvent): Boolean {
 when (event.action) {
        MotionEvent.ACTION_DOWN ->
            setShapeType(ShapeType.PRESSED)
        MotionEvent.ACTION_UP ->
            setShapeType(ShapeType.FLAT)
    }
   return super.onTouchEvent(event)
}

استفاده از StateListAnimator مثل دکمه متریال است؟ اگر سایه را با توجه بهTranslationZ حرکت دهید، اثر فشار دکمه به طور طبیعی نشان داده خواهد شد.

شروع به کار

من با توجه به آنچه تا کنون درباره آن صحبت کرده ایم یک کتابخانه ساختم. این روش اجزای نمایش مانند CardView، Button و ImageView را ارائه می‌دهد.

نحوه استفاده از کتابخانه:

<soup.neumorphism.NeumorphCardView
    style=&quot@style/Widget.Neumorph.CardView&quot>    <ConstraintLayout>
        ...
    </ConstraintLayout></soup.neumorphism.NeumorphCardView>

انجام شد! (از XML استفاده کنید بهتر است)

بعد از آن اجازه دهید ببینیم که ویجت‌ها چه خصوصیاتی فراهم می‌کند.

سایه

شما می‌توانید رنگ و ارتفاع سایه را تنظیم کنید.

<soup.neumorphism.NeumorphCardView
 app:neumorph_shadowElevation=&quot6dp&quot
 app:neumorph_shadowColorLight=&quot@color/light_color&quot
 app:neumorph_shadowColorDark=&quot@color/dark_color&quot />

شکل

شما می‌توانید شکل سطح و گوشه‌ها را تغییر دهید.

<soup.neumorphism.NeumorphCardView
    app:neumorph_shapeType=&quot{flat|pressed|basin}&quot
    app:neumorph_shapeAppearance=&quot@style/ShapeAppearance&quot /><style name=&quotShapeAppearance&quot>
    <item name=&quotneumorph_cornerFamily&quot>{rounded|oval}</item>
    <item name=&quotneumorph_cornerSize&quot>32dp</item>
</style>

رنگ

شما می‌توانید پس‌زمینه و رنگ مرزی این نما را مشخص کنید.

<soup.neumorphism.NeumorphCardView
 app:neumorph_backgroundColor=&quot@color/background_color&quot
 app:neumorph_strokeColor=&quot@color/stroke_color&quot
 app:neumorph_strokeWidth=&quot@dimen/stroke_width&quot />

Padding

در اخر، ویژگی padding برای جلوگیری از بریده شدن سایه پشتیبانی می‌شود. این ویژگی به صورت پیش فرض دارای مقدار 12 است.

<soup.neumorphism.NeumorphCardView
 android:padding=&quot12dp&quot />

البته، همه ویژگی‌ها را می توان به صورت دستی تغییر داد.

و در پیاده‌سازی Drawable نوشته شده ‌است. به همین راحتی می توان همان عملکرد را به چندین نمایش اعمال کرد. بنابراین به راحتی می توان آن را به CustomView اعمال کرد.

ما دیده‌ایم که چگونه می توانیم نئومورفیسم را بر روی پلتفرم اندروید اجرا کنیم و چگونه از کتابخانه آن استفاده کنیم.

من فکر می‌کنم، طراحی جدید یک ایده جالب برای توسعه دهندگان است. نئومورفیسم احساس جدیدی به من می‌دهد و اجرای آن نیز سرگرم‌ کننده است.

با این حال، در مقایسه با متریال دیزاین، نئومورفیسم حوزه‌های بسیاری دارد که در آن اصول طراحی واضح نیستند. به عبارت دیگر، اگر چه اجرا شد، من فکر می‌کنم هنوز هم برای تولید آن کافی نیست.

بنابراین اگر شما به نئومورفیسم علاقمند هستید، سعی کنید از کتابخانه به عنوان آزمایشی استفاده کنید. لطفا در مورد هر چیزی در کتابخانه توضیح دهید. (به این ویژگی خوش آمدید!) برای رسیدن به سطح مطلوب، نظرات مختلفی مورد نیاز است.

شما می توانید اصل این مقاله رو در اینجا مطالعه کنید. من فقط مقاله رو ترجمه کردم و اینجا در اختیار شما قرار دادم