طريقة اضافة ColorPicker الى برنامجك

في هذه المقالة ساشرح طريقة اضافة Color Picker الى مشروعك , يوجد عدد كبير من المكتبات التي تساعدك في ذلك ولكني ساشرح طريقة التعامل مع مكتبة HoloColorPicker  .

في البداية قم بتحميل المكتبة من الرابط الرسمي لها وبعد ذلك قم باضافتها الى مشروعك كمكتبة , قد تواجه مشكلة في المكتبة عند استيرادها لذلك الحل قم بالضغط على اسم المشروع Right Click – Android Tools – Add support Library واتبع الاجراءات التي تظهر لك.

في مشروعك قم بانشاء Layout جديد وقم بتسميته مثلا color_picker “سنتعامل مع هذه layout كـ Dialog لاحقا” بعد ذلك قم باضافة التالي:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"</span>

<span style="font-family: 'times new roman', times;">android:layout_width="match_parent"</span>
<span style="font-family: 'times new roman', times;">android:layout_height="match_parent"</span>
<span style="font-family: 'times new roman', times;">android:gravity="center"</span>
<span style="font-family: 'times new roman', times;">android:orientation="vertical" ></span>

<span style="font-family: 'times new roman', times;"><com.larswerkman.holocolorpicker.ColorPicker</span>
<span style="font-family: 'times new roman', times;">android:id="@+id/picker"</span>
<span style="font-family: 'times new roman', times;">android:layout_width="wrap_content"</span>
<span style="font-family: 'times new roman', times;">android:layout_height="wrap_content"/></span>

<span style="font-family: 'times new roman', times;"><Button</span>
<span style="font-family: 'times new roman', times;">android:id="@+id/done"</span>
<span style="font-family: 'times new roman', times;">android:layout_width="wrap_content"</span>
<span style="font-family: 'times new roman', times;">android:layout_height="wrap_content"</span>
<span style="font-family: 'times new roman', times;">android:text="Done" /></span>

<span style="font-family: 'times new roman', times;"></LinearLayout>

 

 قم بفتح الكود الخاص بـ Activity الذي تريد اضافة الـ Color Picker له وقم باضافة متغير Integer على مستوى الكلاس ,هذا المتغيير سيحمل قيمة اللون الذي سنسترجعه من الـ color picker , مثال:

static int color=0;

لنفرض الان  ان لديك Button  و  TextView في هذا الـ Activity وتريد عند الضغط عليه يظهر الـ Color Picker ومن ثم يختار المستخدم اللون الذي يرغبه , بعد ذلك يقوم البرنامج تلقائيا بتغيير لون نص الـ TextView باللون الذي اختاره المستخدم , هذه العملية تتم بالكود التالي:

public class MainActivity extends Activity {</span>
<span style="font-family: 'times new roman', times;">static int color = 0;</span>

<span style="font-family: 'times new roman', times;">@Override</span>
<span style="font-family: 'times new roman', times;">protected void onCreate(Bundle savedInstanceState) {</span>
<span style="font-family: 'times new roman', times;">super.onCreate(savedInstanceState);</span>
<span style="font-family: 'times new roman', times;">setContentView(R.layout.activity_main);</span>
<span style="font-family: 'times new roman', times;">Button button = (Button) findViewById(R.id.button);</span>
<span style="font-family: 'times new roman', times;">final TextView text = (TextView) findViewById(R.id.textt);</span>
<span style="font-family: 'times new roman', times;">button.setOnClickListener(new OnClickListener() {</span>
<span style="font-family: 'times new roman', times;">@Override</span>
<span style="font-family: 'times new roman', times;">public void onClick(View v) {</span>
<span style="font-family: 'times new roman', times;">final Dialog dialog = new Dialog(MainActivity.this);</span>
<span style="font-family: 'times new roman', times;">// Include dialog.xml file</span>
<span style="font-family: 'times new roman', times;">dialog.setContentView(R.layout.color_picker);</span>
<span style="font-family: 'times new roman', times;">// Set dialog title</span>
<span style="font-family: 'times new roman', times;">dialog.setTitle("Color Picker");</span>
<span style="font-family: 'times new roman', times;">dialog.show();</span>
<span style="font-family: 'times new roman', times;">Button done = (Button) dialog.findViewById(R.id.done);</span>
<span style="font-family: 'times new roman', times;">final ColorPicker picker = (ColorPicker) dialog</span>
<span style="font-family: 'times new roman', times;">.findViewById(R.id.picker);</span>
<span style="font-family: 'times new roman', times;">picker.setColor(color);// To set the old selected color</span>
<span style="font-family: 'times new roman', times;">picker.setOldCenterColor(color);</span>
<span style="font-family: 'times new roman', times;">done.setOnClickListener(new OnClickListener() {</span>

<span style="font-family: 'times new roman', times;">@Override</span>
<span style="font-family: 'times new roman', times;">public void onClick(View v) {</span>
<span style="font-family: 'times new roman', times;">color = picker.getColor();// To get the color</span>
<span style="font-family: 'times new roman', times;">text.setTextColor(color);// Change text color</span>
<span style="font-family: 'times new roman', times;">dialog.dismiss(); // Close the dialog</span>

<span style="font-family: 'times new roman', times;">}</span>
<span style="font-family: 'times new roman', times;">});</span>

<span style="font-family: 'times new roman', times;">}</span>
<span style="font-family: 'times new roman', times;">});</span>
<span style="font-family: 'times new roman', times;">}</span>

<span style="font-family: 'times new roman', times;">}
Share:
0 comments on طريقة اضافة ColorPicker الى برنامجك

Post a comment

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *