دیگه واسه Gradient از shape استفاده نکن

دیگه واسه Gradient از shape استفاده نکن
اندروید

دیگه واسه Gradient از shape استفاده نکن

Gradient جز طرح‌های ترند سال 2021 هستش.

ممکنه بخواین از این نوع طراحی هم توی اپلیکیشن‌های خودتون استفاده کنید.

قبل از اینکه بریم سراغ آموزش بهتره بدونید که Gradient (گِرَدیَنت) به چه نوع طرح‎‌هایی میگن.

Gradient چیه ؟

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

برای ساختن اَشکال Gradient (در اندروید) رایج‌ترین روش ساخت این اَشکال، توسط کدهای XML هستش.

ولی اگه بخواین تعداد زیادی از این اَشکال رو بسازین روش XML خیلی روش خوبی نیستش.

اولا زمانبر هستش، دوما از نظر کارایی و Performance هم یه خورده برای سیستم سنگین‌تر هستش.

پس بهتره که از روشی استفاده کنیم که هم بهینه‌تر هستش و هم سرعت بالایی داره.

ثبت‌نام رایگان در دوره کاتلین
رایگان

دوره مقدماتی کاتلین برای برنامه نویسان اندروید

4.5/5
(4 امتیاز)
20 درس
مبتدی
آنچه یاد خواهید گرفت
آموزش از صفر برنامه نویسی کاتلین

توی این پست می‌خوام یاد بدم که چطور این اَشکال رو با با کاتلین به صورت dynamic (پویا) درست کنیم.

ساخت Gradient با روش XML :

برای اینکار باید توی پوشه res/drawable یه فایل جدیدی رو درست کنید و کدی رو مشابه کد زیر داخلش قرار بدین :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient android:startColor="@color/lightOrange"
        android:centerColor="@color/lightYellow"
        android:endColor="@color/lightGreen"
        android:angle="0"/>

</shape>

برای استفاده از طیف رنگی بالا در قالب پس‌زمینه یک ویو، هم می‌تونید از کد زیر استفاده کنید:

<TextView
    android:id="@+id/gradientUi_txt1"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:background="@drawable/bg_gradient"
    android:gravity="center"
    android:text="With XML"
    android:textColor="@color/white"
    android:textSize="30sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

نتیجه کد بالا :

همانطور که می‌بینید ما یک مستطیل درست کردیم و داخل اون از طیف‌های رنگی نارنجی، زرد و سبز استفاده کردیم و داخل یک TextView هم نمایش دادیم.

ولی خب همانطور که گفتم روش بالایی روش خیلی خوب و بهینه‌ای نیستش.

برای اینکار بهتره که از روش پایین استفاده کنیم.

ساخت Gradient به صورت پویا با کدهای کاتلین :

با توجه به سناریو قبلی یک TextView رو داخل لایه قرار میدیم.

مثال :

<TextView
    android:id="@+id/gradientUi_txt2"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:gravity="center"
    android:text="Dynamically"
    android:textColor="@color/white"
    android:textSize="30sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/gradientUi_txt1" />

اگه توجه کنید متوجه میشید که من توی روش دوم از خاصیت background استفاده نکردم.

چون قصد دارم این بخش رو به صورت پویا با کدهای کاتلین درست کنم.

برای اینکار کدهای زیر رو به صورت کاتلین توی ActivityFragmentAdapter به طور کلی توی کلاس خودتون بنویسید.

کد کاتلین :

val gradientDrawable = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
intArrayOf(
    0XFFD98880.toInt(),
    0XFFF4D03F.toInt(),
    0XFF48C9B0.toInt()
))

با این کد Gradient ما ساخته شد.

با این تیکه کد زیر میتونی جهت طیف رنگی گردینت رو مشخص کنی.

GradientDrawable.Orientation.LEFT_RIGHT

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

توضیحات خصوصیات
تشکیل طیف رنگی از بالا به پایین TOP_BOTTOM
تشکیل طیف رنگی از بالا راست به پایین چپ TR_BL
تشکیل طیف رنگی از راست به چپ RIGHT_LEFT
تشکیل طیف رنگی از پایین راست به بالا چپ BR_TL
تشکیل طیف رنگی از پایین به بالا BOTTOM_TOP
تشکیل طیف رنگی از پایین چپ به بالا راست BL_TR
تشکیل طیف رنگی از چپ به راست LEFT_RIGHT
تشکیل طیف رنگی از بالا چپ به پایین راست TL_BR

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

و اما چرا کد رنگ ها رو به صورت 0XFF قرار دادم ؟!

یادتون باشه هرجا 0X رو دیدین یعنی قرار هستش که بعد از اون از کدهای هِگز (هگزا دسیمال) استفاده بشه.

پس 0X رو قرار میدیم که اندروید متوجه بشه که بعدش می‌خوایم از کدهای هگز برای رنگ‌ها استفاده کنیم. (کد شش رقمی رنگ‌ها درواقع از کدهای هگز پیروی میکنن)

FF بعدی هم درجه شفافیت یا Opacity رو مشخص میکنن.

00 یعنی کلا شفاف و FF هم کلا مات.

برای تعیین درجه شفافیت توی اندروید می‌تونی از کدهای زیر استفاده کنی.

کد درجه شفافیت درصد درجه شفافیت
FF 100%
F2 95%
E6 90%
D9 85%
CC 80%
BF 75%
B3 70%
A6 65%
 99  60%
 8C  55%
 80  50%
 73  45%
 66  40%
59  35%
 4D  30%
 40  25%
 33  20%
 26  15%
 1A  10%
 0D 5%
 00  0%

مثلا می‌خوایم بگیم که 80درصد کد رنگی که بالا استفاده کردیم نمایش داده بشه، کدش اینطوری میشه : 0XCCD98880

درنهایت برای ست کردنش هم فقط کافیه که از کد زیر استفاده کنید:

gradientUi_txt2.background = gradientDrawable
نمایش ویدیو فارسی آموزش بالا با جزئیات کامل و دقیق و با کیفیت Full HD (نهایت کیفیت) :

 

برای استفاده از گردیت از چه روش‌های استفاده میکنی؟ تا حالا با روش دوم کار کرده بودی؟

دیدگاه خود را اینجا قرار دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • Custom attributes
  • زمینه های دلخواه
مقایسه
لیست علاقه مندی ها 0