نمایش رنگ با استفاده از hexadecimal دراندروید

چهارشنبه 1 اردیبهشت 1395

در این مقاله قصد داریم یک هگزادسیمال را یک EditText وارد نماییم، زمانی که این را وارد کردیم با زدن دکمه ی ok رنگ مورد نظر ما را داخل یک Imageview قرار بدهد.

نمایش رنگ با استفاده از hexadecimal دراندروید

داخل صفحه ی مورد نظر خود از یک EditText و یک Imageview استفاده می شود زمانی که داخل EditText یک کاراکتری بین 0تا9 و حروف AتاF را وارد نمایید .

داخل activity مورد نطر از یک edittext استفاده می نماییم، و برای آن دو صفت به صورت زیر تعریف نمایید:

<!-- ..... -->  
<EditText  
    android:inputType="textCapCharacters|textNoSuggestions|textVisiblePassword"  
    android:maxLength="8" />  
<!-- ..... --> 

اولین مقدار نسبت داده شده به خصوصیت android:inputType است که این صفت برای ما صفحه کلید ها را نمایش می دهد.

ویژگی دوم برای زمانی است که شما نمی خواهید از پیشنهاد های صفحه کلید خودتون استفاده کنید، و خصوصیت سوم برای زمانی استفاده می شود که عددی که وارد می نمایید قابل مشاهده باشد داخل کد یک maxLength استفاده شده است که ما اینجا از 8 استفاده کرده ایم که حداکثر کاراکتر مجاز را داخل edittext برای ما مشخص می نماید، برای نمایش رنگ ها باید از 8 کاراکتر هگزادسیمال استفاده خواهد شد.

برای پیش نمایش ما از یک رنگ سفید استفاده می نماییم زمانی که برنامه را اجرا نمایید داخل edittext کد هگزادسیمال رنگ سفید قرار خواهد گرفت.

زمانی که شما یک کد هگزادسیمال وارد نمایید با کد رنگ سفید با هم ضرب می شود و عددی که به صورت هگزادسیمال به دست می آید رنگ مورد نظر را داخل Imageview نمایش می دهد.

کد به صورت زیر است:

import android.os.Bundle;  
import android.app.Activity;  
import android.graphics.PorterDuff;  
import android.text.Editable;  
import android.text.TextWatcher;  
import android.view.Menu;  
import android.view.MenuItem;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.WindowManager;  
import android.widget.Button;  
import android.widget.EditText;  
import android.widget.ImageView;  
import android.widget.Toast;  
  
public class MainActivity extends Activity   
{  
    //The ImageView that displays the hexadecimal color  
    private ImageView iv_colorpreview;  
    //The EditText field, that receives a hexadecimal color as input  
    private EditText et_hexColorInput;  
    //A button to confirm any color changes  
    private Button bt_ok;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState)   
    {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //Inflate the three previous Views with the information found at the 'activity_main.xml' file   
        this.iv_colorpreview = (ImageView) this.findViewById(R.id.iv_colorpreview);  
        this.et_hexColorInput = (EditText) this.findViewById(R.id.et_hexcolor);  
        this.bt_ok = (Button) this.findViewById(R.id.bt_ok);  
  
        //This prevents the EditText View from automatically receiving focus on Activity startup   
        this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);  
  
        //Assign a TextWatcher to the EditText  
        this.et_hexColorInput.addTextChangedListener(new TextWatcher()   
        {  
            @Override  
            public void onTextChanged(CharSequence s, int start, int before, int count){}  
  
            @Override  
            public void beforeTextChanged(CharSequence s, int start, int count,int after){}  
  
            //Right after the text is changed  
            @Override  
            public void afterTextChanged(Editable s)   
            {  
                //Store the text on a String  
                String text = s.toString();  
  
                //Get the length of the String  
                int length = s.length();  
  
                /*If the String length is bigger than zero and it's not 
                composed only by the following characters: A to F and/or 0 to 9 */  
                if(!text.matches("[a-fA-F0-9]+") && length > 0)  
                {  
                    //Delete the last character  
                    s.delete(length - 1, length);  
                }  
            }  
        });  
  
        //Set what the OK Button should do, when pressed  
        this.bt_ok.setOnClickListener(new OnClickListener()   
        {  
            @Override  
            public void onClick(View v)   
            {  
                //Create and initialize the int 'color' with the white color.   
                int color = 0xFFFFFFFF;  
  
                try   
                {  
                    //Get the text at the EditText field and save it in a String  
                    String colorValue = et_hexColorInput.getText().toString();  
  
                    /*Convert the String into a Color ARGB hexadecimal integer.*/  
                    color = Integer.parseInt(colorValue.substring(2), 16) +   
                            (Integer.parseInt(colorValue.substring(0,2), 16) << 24);  
                }  
                catch (Exception e) //Something went wrong while parsing the String into an Integer  
                {  
                    //Reset the EditText field to white  
                    MainActivity.this.et_hexColorInput.setText("FFFFFFFF");  
                    //Display a toast message  
                    Toast.makeText(MainActivity.this, "Invalid color!", Toast.LENGTH_SHORT).show();  
                }  
  
                /*Get the Drawable displayed by the Image View (in this case, the 1x1 PNG opaque white image). 
                  Clear any ColorFilters previously applied to it*/  
                MainActivity.this.iv_colorpreview.getDrawable().clearColorFilter();  
                //Multiply the white image with the hexadecimal color passed at the EditText field  
                MainActivity.this.iv_colorpreview.getDrawable().setColorFilter(color, PorterDuff.Mode.MULTIPLY);  
                //Invalidate the ImageView, forcing it to be re-rendered.  
                MainActivity.this.iv_colorpreview.invalidate();  
            }  
        });       
    }  
  
    @Override  
    public boolean onCreateOptionsMenu(Menu menu)   
    {  
        // Inflate the menu. This adds items to the action bar if it is present.  
        getMenuInflater().inflate(R.menu.main, menu);  
        return true;  
    }  
  
    @Override  
    public boolean onOptionsItemSelected(MenuItem item)   
    {  
        switch (item.getItemId())   
        {  
            //If the only button at this options menu is pressed  
            case R.id.menu_settings:  
            {  
                //Remove any kind of color filter  
                this.iv_colorpreview.getDrawable().clearColorFilter();  
                //Render the ImageView again  
                this.iv_colorpreview.invalidate();  
  
                //Reset the color to its initial value (White = 0xFFFFFFFF)  
                this.et_hexColorInput.setText("FFFFFFFF");  
  
                return true;  
            }  
            default:  
            {  
                return super.onOptionsItemSelected(item);  
            }  
        }  
    }  
}

داخل کلاس بالا که تعریف کرده ایم 3 متغییر تعریف شده است یک Imageview و یک EditText و یک دکمه این متغییر ها داخل متد oncreate مقدار دهی شده اند.

داخل همان کد ما از یک TextWatcher استفاده کرده ایم، Textwatcher یک واسط است زمانی که متد صدا زده شود متن در edittext تغییر می کند، در اینجا ما از متد afterTextChanged استفاده می نماییم همان طور که از نام آن پیداست دنباله و مجموعه ای از کاراکترها را در یک ویرایش متنی پشت سر هم می آورد، که این منطق اجازه می دهد که مجموعه ای محدود از کاراکترها در ویرایش متن قرار بگیرد.

داخل روش بالا متن در یک ویرایش گر متنی به عنوان یک رشته ذخیره خواهد شد، طول این رشته داخل یک طول متغییر ذخیره می شود، edittext مورد نظر را چک می کنیم اگر بزرگتر از 0 باشد و کاراکتری که پاس می دهیم با آن match نباشد یک پیغام خطا می دهد و یا اگر داخل edittext کاراکترهای از A تا F و از 0 تا 9 نداشته باشد.

حالا برای رویداد دکمه باید هنگامی که دکمه فشار داده شد ویرایش متنی باید به یک عدد هگزادسیمال تجزیه شود و با رنگ سفید رنگ با هم ضرب شود و رنگ انتخاب شده داخل imageview مورد نظر نمایش داده شود، برای این کار باید از یک متغییر صحیحی استفاده شود.

برای تجزیه کردن رشته به integer باید از متد integer.parseint استفاده کرد، از آنجا که همیشه این متد با موفقیت انجام نخواهد شد بنابر این باید از یک try/catch استفاده شود، رایج ترین متدی که می توانیم استفاده کنیم Integer.parseint در متد NumberFormatException است به عنوان مثال کاراکتر H بخشی از Hex نیست بنابر این متد ParseInt به خطا مواجه خواهد شد.

در بلوک کد بالا متن تایپ شده در ویرایش متن رنگ تازه ای به صورت یک رشته ذخیره می شود، بعد از آن مقدار hex color به صورت یک عدد صحیح ذخیره می شود.

color = Integer.parseInt(colorValue.substring(2), 16) +   
    (Integer.parseInt(colorValue.substring(0,2), 16) << 24); 

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

هم چنین روش Integer.ParseInt از دو آرگومان استفاده می شود، یکی رشته ای که نیاز به یک عدد صحیح تبدیل شود، دومی یک عدد صحیح به نام ریشه است مبنا از 10 را به رشته به عدد صحیح با استفاده از یک پایه دهدهی تجزیه می نماید.

رنگ سیاه و سفید را با ضرب 0xFF000000 می آید، بخش آلفا از رشته ی FF است آلفا زمانی که می خواهید رنگ اصلی را نمایش دهید این بیت ها جا به جا خواهد شد، و FF ها به سمت چپ منتقل می شوند

و نتایج در متغییر رنگ ذخیره می شود.

زمانی که عدد مقدار وارد شده اشتباه باشد یک try و catch اجرا می شود و یک خطا تولید می نماید در حالی که تجزیه ی مقدار رنگ اشتباه باشد یک پیغام toast به کاربر می فرستد که ورودی تایپ نا معتبر است.

داخل متد oncreate پیش نمایش رنگی که قرار است با اولین اجرا نمایش داده شود داخل یک تصویر 1*1 به صورت یک drawable ذخیره شده است و با متد getdrawable نمایش داده می شود.

حالا ترسیم پیش نمایش رنگ است که باید محاسبات برای نمایش رنگ انجام شود و داخل همان تصویر که رنگ پیش فرض قرار گرفته رنگ محاسبه شده باشد، با استفاده فراخوانی متد setcolorfilter رنگ مورد نظر را داخل همان تصویر نمایش می دهد.

در آخر رنگ مورد نظر با رنگ سفید در هم ضرب می شود و رنگ نهایی در داخل ویرایش گر متن نمایش داده می شود و تصویر رنگ مورد نظر هم داخل imageview به صورت پیش نمایش نشان داده می شود.

خروجی به صورت زیر خواهد بود:

فایل های ضمیمه

برنامه نویسان

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

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید