رنگ ها (Colors)، در برنامه نویسی اندروید

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. تعریف یک یا چند رنگ (color) در پروژه اندروید و استفاده از آنها برای عناصر مختلف در برنامه اندروید
  2. به کار بردن یک کد رنگ دلخواه (مثلا #00ff00) برای تعیین رنگ در روش setBackgroundColor ، با استفاده از روش Color.parseColor ، در برنامه نویسی اندروید
  3. راهنما برای یافتن کد متناظر با یک لایه نیمه شفاف (رنگی به صورت نیمه شفاف)، بر اساس انتخاب رنگ و همچنین میزان شفافیت، در برنامه نویسی اندروید



منبع: kelidestan
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تعریف یک یا چند رنگ (color) در پروژه اندروید و استفاده از آنها برای عناصر مختلف در برنامه اندروید

تعریف یک یا چند رنگ (color) در پروژه اندروید و استفاده از آنها برای عناصر مختلف در برنامه اندروید

قبلا در مباحثی دیگر، چگونگی تعیین رنگ برای عناصر مختلف در برنامه اندروید را شرح دادیم، در آن مباحث، هنگام تعریف یک عنصر، کد مربوط به رنگ را برای آن مشخص می کردیم، اما این روش یک اشکال دارد و آن این است که مثلا اگر 100 عنصر در برنامه را بخواهیم به یک رنگ خاص دربیاوریم، باید برای آن 100 عنصر، کد رنگ را در هنگام تعریف آنها، بنویسیم، اما فرض کنید که ناگهان به این نتیجه برسیم که رنگ انتخاب شده مناسب نیست و بخواهیم رنگ آن 100 عنصر را به رنگی دیگر تغییر بدهیم. بنابراین این نوع تعریف رنگ برای عناصر مختلف برنامه اندروید، دردسرهای زیادی دارد. در این مبحث می خواهیم که راه حل این مشکل را بیان کنیم تا شما بتوانید در یک فایل مشخص، تعدادی رنگ تعریف کنید و سپس برای عناصر مختلف برنامه اندروید، تنها به نام آن رنگ ها ارجاع بدهید و هر زمان هم که بخواهید، تنها با ویرایش آن فایل، می توانید رنگ تمامی عناصری که به آن رنگ ارجاع داده اند را تغییر بدهید.
برای تعریف یک یا چند رنگ در برنامه اندروید، ابتدا باید در پوشه بندی پروژه اندروید، در پوشه values ، یک فایل xml با نام colors.xml بسازید :

android-250.jpg

سپس در فایل colors.xml ، کدهای زیر را می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<?[/COLOR]xml version[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"1.0"[/COLOR] encoding[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"utf-8"[/COLOR][COLOR=#339933]?>[/COLOR]
[COLOR=#339933]<[/COLOR]resources[COLOR=#339933]>[/COLOR]
    [COLOR=#339933]<[/COLOR]color name[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"red_1"[/COLOR][COLOR=#339933]>[/COLOR]#ffff0000[COLOR=#339933]</[/COLOR]color[COLOR=#339933]>[/COLOR]
    [COLOR=#339933]<[/COLOR]color name[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"red_2"[/COLOR][COLOR=#339933]>[/COLOR]#ffa00000[COLOR=#339933]</[/COLOR]color[COLOR=#339933]>[/COLOR]
[COLOR=#339933]</[/COLOR]resources[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
مشاهده می کنید که دو رنگ با نام های red_1 و red_2 تعریف کرده ایم. هر دو، به رنگ قرمز می باشند، اما دومی تیره تر است.

اکنون فرض کنید که بخواهیم رنگ پس زمینه یک عنصر را به صورت رنگ red_1 تعیین کنیم، برای این منظور، در فایل xml ای که آن عنصر تعریف شده است، در میان کدهای تعریف آن عنصر، کد زیر را می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]android[COLOR=#339933]:[/COLOR]background[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@color/red_1"[/COLOR][/FONT]
[/FONT][/COLOR]
یا اگر بخواهیم که با کدهای java ، به رنگ red_1 ارجاع بدهیم، باید کدهای زیر را بنویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]getResources[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]getColor[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]color[/COLOR].[COLOR=#006633]red_1[/COLOR][COLOR=#009900])[/COLOR][/FONT]
[/FONT][/COLOR]
به عنوان مثال، فرض کنید که یک TextView با id برابر textView1 داریم و می خواهیم که رنگ متن نمایش داده شده در آن، برابر رنگ red_1 تعیین شود، برای این منظور، در میان کدهای java ، کدهای زیر را می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]TextView tv [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]TextView[COLOR=#009900])[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]textView1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
tv.[COLOR=#006633]setTextColor[/COLOR][COLOR=#009900]([/COLOR]getResources[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]getColor[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]color[/COLOR].[COLOR=#006633]red_1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
به کار بردن یک کد رنگ دلخواه (مثلا #00ff00) برای تعیین رنگ در روش setBackgroundColor ، با استفاده از روش Color.parseColor

به کار بردن یک کد رنگ دلخواه (مثلا #00ff00) برای تعیین رنگ در روش setBackgroundColor ، با استفاده از روش Color.parseColor

گاهی روش setBackgroundColor را به صورت زیر به کار می بریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]setBackgroundColor[COLOR=#009900]([/COLOR][COLOR=#003399]Color[/COLOR].[COLOR=#006633]RED[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]
اما کد بالا تنها برای رنگ های از پیش تعیین شده مفید است، اما شاید ما بخواهیم که یک کد رنگ دلخواه (مثلا#00ff00) را برای تعیین رنگ به کار ببریم (بنابراین آزادی عمل بسیار زیادی برای انتخاب رنگ خواهیم داشت)، برای این منظور، باید روش Color.parseColor را به کار ببریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]setBackgroundColor[COLOR=#009900]([/COLOR][COLOR=#003399]Color[/COLOR].[COLOR=#006633]parseColor[/COLOR][COLOR=#009900]([/COLOR][COLOR=#0000FF]"#00ff00"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
راهنما برای یافتن کد متناظر با یک لایه نیمه شفاف (رنگی به صورت نیمه شفاف)، بر اساس انتخاب رنگ و همچنین میزان شفافیت

راهنما برای یافتن کد متناظر با یک لایه نیمه شفاف (رنگی به صورت نیمه شفاف)، بر اساس انتخاب رنگ و همچنین میزان شفافیت

در مواردی زیادی، نیاز به یک لایه نیمه شفاف (رنگی به صورت نیمه شفاف ) داریم، مثل لایه نیمه شفاف قرار رفته بر روی یکی از item های ListView موجود در عکس زیر :


1319.jpg



در عکس بالا، کد رنگ متناظر با لایه نیمه شفاف، عبارت است از :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]#[COLOR=#CC66CC]40000000[/COLOR][/FONT]
[/FONT][/COLOR]
که رنگ سیاه با 25 درصد نمایش می باشد.

ما باید کد متناظر با لایه نیمه شفاف (به صورت کد رنگ) دلخواه خود را داشته باشیم. شاید اولین راه که به نظرتان می آید این است که در اینترنت و کدهای دیگران، به دنبال نمونه هایی از این کدها باشیم، ولی این راه حل برای کسی که به دنبال لایه نیمه شفاف با یک رنگ خاص و یک درصد خاص از شفافیت است، مناسب نمی باشد.

در واقع قصد داریم به شما یاد بدهیم که چگونه کد رنگ متناظر با لایه نیمه شفاف را بر اساس رنگ و همچنین میزان شفافیت مورد نظرتان بسازید. یعنی مثلا می گوییم که رنگ سیاه انتخاب شود و میزان نمایش آن هم برابر 25 درصد باشد، بنابراین بر اساس همین دو انتخاب، باید بتوانیم کد متناظر را برای این لایه نیمه شفاف به دست آوریم.

مرحله اول :

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

در جدول زیر می توانید کد مربوط به رنگ دلخواه خود برای طراحی قسمت های مختلف وب سایت را بیابید :


#000000#000033#000066#000099#0000CC#0000FF
#003300#003333#003366#003399#0033CC#0033FF
#006600#006633#006666#006699#0066CC#0066FF
#009900#009933#009966#009999#0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000#330033#330066#330099#3300CC#3300FF
#333300#333333#333366#333399#3333CC#3333FF
#336600#336633#336666#336699#3366CC#3366FF
#339900#339933#339966#339999#3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000#660033#660066#660099#6600CC#6600FF
#663300#663333#663366#663399#6633CC#6633FF
#666600#666633#666666#666699#6666CC#6666FF
#669900#669933#669966#669999#6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000#990033#990066#990099#9900CC#9900FF
#993300#993333#993366#993399#9933CC#9933FF
#996600#996633#996666#996699#9966CC#9966FF
#999900#999933#999966#999999#9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF



(فعلا علامت # را در کد رنگ ها لحاظ نکنید و تنها یک عدد 6 رقمی مربوط به رنگ مورد نظرتان را بیابید). مثلا برای رنگ سیاه، کد 6 رقمی زیر را داریم :

کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]000000[/FONT]
[/FONT][/COLOR]
مرحله دوم :

باید کد 2 رقمی متناظر با درصد نمایش رنگ (که مکمل آن، برابر میزان شفافیت خواهد بود) را بیابیم. برای این منظور، کدهای 2 رقمی متناظر با درصدهای مختلف را نمایش داده ایم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#CC66CC]100[/COLOR][COLOR=#339933]%[/COLOR]  [COLOR=#339933]-->[/COLOR]  FF
[COLOR=#CC66CC]95[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  F2
[COLOR=#CC66CC]90[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  E6
[COLOR=#CC66CC]85[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  D9
[COLOR=#CC66CC]80[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  CC
[COLOR=#CC66CC]75[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  BF
[COLOR=#CC66CC]70[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  B3
[COLOR=#CC66CC]65[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  A6
[COLOR=#CC66CC]60[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]99[/COLOR]
[COLOR=#CC66CC]55[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  8C
[COLOR=#CC66CC]50[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]80[/COLOR]
[COLOR=#CC66CC]45[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]73[/COLOR]
[COLOR=#CC66CC]40[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]66[/COLOR]
[COLOR=#CC66CC]35[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]59[/COLOR]
[COLOR=#CC66CC]30[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  4D
[COLOR=#CC66CC]25[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]40[/COLOR]
[COLOR=#CC66CC]20[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]33[/COLOR]
[COLOR=#CC66CC]15[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  [COLOR=#CC66CC]26[/COLOR]
[COLOR=#CC66CC]10[/COLOR][COLOR=#339933]%[/COLOR]   [COLOR=#339933]-->[/COLOR]  1A
[COLOR=#CC66CC]5[/COLOR][COLOR=#339933]%[/COLOR]    [COLOR=#339933]-->[/COLOR]  0D
[COLOR=#CC66CC]0[/COLOR][COLOR=#339933]%[/COLOR]    [COLOR=#339933]-->[/COLOR]  00[/FONT]
[/FONT][/COLOR]
اگر 100 درصد را انتخاب کنیم، رنگ مورد نظر به طور کامل،صفحه را می پوشاند و هیچگونه شفافیتی نخواهیم داشت و اگر 0 درصد را انتخاب کنیم، لایه به صرت کاملا شفاف خواهد بود و هیچ اثری از رنگ مشاهده نمی شود. بنابراین ما باید مقادیری بین این دو را انتخاب نماییم (بر اساس میزان شفافیت مورد نظرمان).

ما کد 2 رقمی مربوط به 25 درصد را انتخاب می کنیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#CC66CC]40[/COLOR][/FONT]
[/FONT][/COLOR]
مرحله سوم :

اکنون کد نهایی را بر اساس دو کد 6 رقمی و 2 رقمی به دست آمده را بر اساس الگوی زیر می سازیم :

کد 6 رقمی مربوط به رنگ + کد 2 رقمی مربوط به درصد + علامت #


به عنوان مثال، برای رنگ سیاه با 25 درصد نمایش، کد به صورت زیر ساخته می شود :

#40000000


یعنی برای رنگ سیاه با 25 درصد نمایش، کد زیر را خواهیم داشت :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]#[COLOR=#CC66CC]40000000[/COLOR][/FONT]
[/FONT][/COLOR]
نکته :

به کد 6 رقمی متناظر با رنگ ها، RGB گفته می شود که هر یک از 2 رقم های آن، مربوط به یکی از رنگ های Red و Green و Blue می باشد :

RGB ---> Red Green Blue


000000


و به کد 8 رقمی به دست آمده، ARGB گفته می شود (که Alpha میزان شفافیت را تعیین می کند) :

ARGB ---> Alpha Red Green Blue


40000000



 
بالا