نمایش رنگ با استفاده از hexadecimal دراندروید
چهارشنبه 1 اردیبهشت 1395در این مقاله قصد داریم یک هگزادسیمال را یک EditText وارد نماییم، زمانی که این را وارد کردیم با زدن دکمه ی ok رنگ مورد نظر ما را داخل یک Imageview قرار بدهد.
داخل صفحه ی مورد نظر خود از یک 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 به صورت پیش نمایش نشان داده می شود.
خروجی به صورت زیر خواهد بود:
- Android
- 1k بازدید
- 1 تشکر