GagorAcadmey

تعلم برمجة تطبيقات الاندرويد من الصفر حتي الاحتراف

آخر المواضيع

الأربعاء، 21 نوفمبر 2018

نوفمبر 21, 2018

RadioButton in android studio


تدوينة اليوم عن زر أخر مستعمل بكثرة في كثيرا من البرامج وهو من أزرار القيم المنطقية إي أن لديه حالتين فقط
RadioButton عبارة عن زر ضغط لتنفيذ بعض الاوامر البرمجية المحددة ,وهو يستعمل داخل مجموعة ازرار الراديو والتي تسمي RadioGroup وهو عبارة عن مجموعة تحتوي علي أزرار RadioButton ويمكنك وضع العدد الذي تريد داخل هذه المجموعة
العملية التي تتم عند الضغط علي أحد الازرار هي أنه سيتم إلقاء تحديد جميع الازرار الاخري ,وهذا يعني أنه يمكن الضغط علي زر واحد فقط من مجموعة الازرار التي تنتمي الي نفس المجموعة RadioGroup. RadioGroup عبارة عن أداة مستخدمة في Android لتجميع أزرار الاختيار وتوفر ميزة تحديد زر راديو واحد فقط من المجموعة. عندما يحاول المستخدم تحديد أي زر راديو آخر داخل نفس مجموعة الراديو ، فسيتم إلغاء تحديد زر الاختيار المحدد مسبقًا تلقائيًا. قم بعمل خطوات مشروع جديد وتسميته بما تريد وفي داخل ملف XML الخاص بالصفحة الرئيسية قم بكتابة الكود التالي وهو الشكل الاساسي لزر RadioButton.

 <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>


خصائص زر RadioButton

هي نفس الخصائص التي تعرفنا اليها سابقا في ازرار التبديل Switch & ToggleButton
إسم العامل إستخدامه
id خاصية إعطاء الزر إسم فريد لا يشترك فيه زر أخر ويسخدم هذا الاسم في ملف الجافا عندما نريد إعطاء بعض الاوامر لهذا الزر
Checked يتم استخدامه لتحديدالحالة الحالية لزر الاختيار. يمكننا تعيينها إما صواب أو خطأ حيث يظهر true الحالة المحددة checked والخطأ false يعرض حالة غير محددة unchecked من زر الاختيار. كالقيمة الافتراضية المعتادة للسمة المحددة false
text توفر إمكانية كتابة نص ما داخل الزر
android:text="stringValue"
gravity خاصية محازاة النص داخل الزر وفقا للاتجاهات مثل right, left, bottom, center
textColor خاصية إعطاء النص داخل الزر لون محدد
android:textColor="#fff"
textSize خاصية تعين حجم للنص وتقاس بوحدة sp
android:textSize="20sp"
textStyle تعين شكل النص داخل الزر وتأخذ القيم bold or itlaic
background تعين لون او صورة لتكون خلفية للزر
padding تحدد المسافة بين النص وحواف الزر من الجهة الداخلية وتأخذ قيم متجهية مثل right left top bottom وتكون قيمة الخاصية عددية اي رقم يمثل المسافة
android:paddingLeft="20dp"
drawableValue خاصية تعين صورة بجانب علامة الزر الثابتة وفقا للاتجاه المحدد
android:drawbleRight="مكان تواجد الصورة"
في المثال التالي تم تطبيق كل الخصائص المزكورة سابقا فقط عليك تغير قيمها لتعرف جميع الاحوال
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RadioGroup
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/btn_click"
            android:text="radioButton1"
            android:textSize="20sp"
            android:textColor="#e11596"
            android:checked="true"
            android:background="@color/colorPrimary"
            android:gravity="top"
            android:padding="10dp"
            android:drawableRight="@drawable/ic_android_black_24dp"
            android:layout_width="300dp"
            android:layout_height="100dp" />
    </RadioGroup>

</LinearLayout>
قم بتشغيل وشاهد نتيجة الخرج في المعاينة

سنقوم بعمل مثال شامل لتوضيح فكرة عمل أزرار الاختيار وكيفية برمجتها في ملف الجافا
قم بفتح ملف xml واكتب داخله الكود الاتي

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#e0e0e0"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Select your Hobby:: "
            android:textColor="#000"
            android:textSize="20sp"
            android:textStyle="bold" />

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/btn_football"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:checked="false"
                android:text="كرة القدم"
                android:textColor="#154"
                android:textSize="20sp"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/btn_basketball"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:checked="false"
                android:text="كرة السلة"
                android:textColor="#154"
                android:textSize="20sp"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/btn_swimming"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:checked="false"
                android:text="السباحة"
                android:textColor="#154"
                android:textSize="20sp"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/btn_running"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:checked="false"
                android:text="المشي"
                android:textColor="#154"
                android:textSize="20sp"
                android:textStyle="bold" />


            <RadioButton
                android:id="@+id/btn_programming"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:checked="true"
                android:text="البرمجة"
                android:textColor="#154"
                android:textSize="20sp"
                android:textStyle="bold" />

        </RadioGroup>

        <Button
            android:id="@+id/submitButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:background="#0f0"
            android:padding="10dp"
            android:text="Submit"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>
ثانيا: قم بفتح ملف الجافا واكتب داخله الكود التالي
package engahmed.gagacademy;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    RadioButton football, basketball, swimming, running, programming;
    String selected;
    Button submit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        football = (RadioButton) findViewById(R.id.btn_football);
        basketball = (RadioButton) findViewById(R.id.btn_basketball);
        swimming = (RadioButton) findViewById(R.id.btn_swimming);
        running = (RadioButton) findViewById(R.id.btn_running);
        programming = (RadioButton) findViewById(R.id.btn_programming);
        submit = (Button) findViewById(R.id.submitButton);
        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (football.isChecked()) {
                    selected = football.getText().toString();
                } else if (basketball.isChecked()) {
                    selected = basketball.getText().toString();
                } else if (swimming.isChecked()) {
                    selected = swimming.getText().toString();
                } else if (running.isChecked()) {
                    selected = running.getText().toString();
                } else if (programming.isChecked()) {
                    selected = programming.getText().toString();
                }
                Toast.makeText(getApplicationContext(), selected, Toast.LENGTH_LONG).show();
            }
        });

    }
}
الان قم بتشغيل المحاكي وإختر واحد من الخيارات وإضغط علي submit لتظهر رسالة أسفل الشاشة تطبع إسم الهواية المختارة

نوفمبر 21, 2018

Switch in android studio


تدوينة اليوم عن زر مهم جدا في عمليات التحكم في التطبيقات وهو احد ازرار الايقاف والتشغيل ومشابه بنسبة كبيرة جدا لزر التبديل ToggleButton
Switch عبارة عن زر تبديل بين حالتين وهو من ازرار الايقاف والتشغيل ويحمل قيمة منطقية واحدة إما true or false ويستخدم في عرض الحالة المحددة chescked وغير المحددة unchecked عندما ينقر المستخدم عليه
وبما أنه من أزرار الايقاف والتشغيل إذا يستخدم في العمليات المنطقية مثل إيقاف وتشغيل الصوت او الواي فاي او البلوتوث او الفلاش وغيرها من التطبيقات .
وهو كلاس فرعي يرث من كلاس CompoundButton مثله مثل زر togglebutton.
وفي حيث المقارنة بينه وبين زر التبديل ToggleButton فانه يوفر للمستخدم بساطة النقر لتغير القيمة الحالية ,بالاضافة الي أنه اكثر جازبية من زر ToggleButton.

طرق إدراج الزر في البرنامج

  1. عن طريق السحب والإفلات Drag&Drop في لوحة التصميم

  2. عن طريق ملف XML file

الشكل الاساسي لزر Switch

إفتح مشروع جديد في البرنامج وقم بتسميته بالاسم الذي تريد ثم
Open res -> layout -> activity_main.xml (or) main.xml اكتب الكود التالي ليظهر لك الزر في تطبيق المعاينة:
   <Switch
        android:id="@+id/btn_forSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

خصائص زر Switch

إسم الخاصية إستخدامه
id خاصية إعطاء الزر إسم فريد لا يشترك فيه زر أخر ويسخدم هذا الاسم في ملف الجافا عندما نريد إعطاء بعض الاوامر لهذا الزر
checked توفر هذه الخاصية تحديد الحالة الحالية للزر إما محددة checked او غير محددة unchecked وهي قيمة منطقية إما true or false
والقيمة الافتراضية هي false
text يمكن كتابة م تريد داخل الزر بإستخدام هذه الخاصية
gravity خاصية محازاة النص داخل الزر وفقا للاتجاهات مثل right, left, bottom, center
textOn تظهر هذه الخاصية القيمة التي بداخلها عندما تكون الحالة محددة أي ان checked="true"
textOff تظهر هذه الخاصية القيمة التي بداخلها عندما تكون الحالة غير محددة أي ان checked="false"
textColor خاصية إعطاء النص الذي بداخل الزر لون محدد android:textColor="#fff"
textSize خاصية تعين حجم النص وتأخذ قيمة عددية Double مثل 10.8,20,50 وتقاس بوحدة sp
textStyle تعين شكل النص داخل الزر وتأخذ إحدي القيم bold or italic
background تعين لون او صورة ليكون خلفية للزر
padding تحدد المسافة بين النص وحافة الزر الداخلية وتأخذ قيم الاتجاهات right, left, top, bottom, center وتكون القيمة عددية
android:paddingRight="20dp"
drawableValue خاصية تعين صورة وفقا للاتجاه المحدد وتكون القيمة كلاتي
android:drawableRight="مكان تواجد الصورة"
value ="right,left,top,bottom"
قم بكتابةالكود التالي وشاهد النتيجة ثم قم بتغير القيم الي أخري وشاهد النتيجة كل مرة لتري كل القيم تتحق
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <Switch
        android:id="@+id/simpleSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:drawableBottom="@drawable/ic_android_black_24dp"
        android:gravity="center"
        android:text="switch"
        android:textColor="#00e736"
        android:textOff="Off"
        android:textOn="On"
        android:textSize="25sp" />
</LinearLayout>

مثال شامل علي زر Switch

في داخل ملف الفعالية الرئيسية activity_main.xml قم بكتابة الكود التالي
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/simples11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:checked="true"
        android:text="switch1"
        android:textOff="Off"
        android:textOn="On"
        android:textSize="26sp"
        android:textColor="#000" />

    <Switch
        android:id="@+id/simples22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:checked="false"
        android:text="switch2"
        android:textOff="Off"
        android:textOn="On"
        android:textSize="26sp" />


    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:background="#f5959e87"
        android:padding="10dp"
        android:text="Submit"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textStyle="bold" />
</LinearLayout>
داخل ملف الجافا قم بكتابة الكود التالي مع تغير إسم الحزمة وستجده اعلي الصفحة بإسم package الاسم الخاص بك;
MainActivity.java
package //قم بكتابة إسم الحزمة الخاص بك هنا;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;

import static engahmed.gagacademy.R.id.simpleToggleButton1;
import static engahmed.gagacademy.R.id.simpleToggleButton2;

public class MainActivity extends AppCompatActivity {
    Switch simpleSwitch1, simpleSwitch2;
    Button submit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        simpleSwitch1 = (Switch) findViewById(R.id.simples11);
        simpleSwitch2 = (Switch) findViewById(R.id.simples22);
        submit = (Button) findViewById(R.id.submitButton);
        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String statusSwitch1, statusSwitch2;
                if (simpleSwitch1.isChecked())
                    statusSwitch1 = simpleSwitch1.getTextOn().toString();
                else
                    statusSwitch1 = simpleSwitch1.getTextOff().toString();
                if (simpleSwitch2.isChecked())
                    statusSwitch2 = simpleSwitch2.getTextOn().toString();
                else
                    statusSwitch2 = simpleSwitch2.getTextOff().toString();
                Toast.makeText(getApplicationContext(), "Switch1 :" + statusSwitch1 + "\n" + "Switch2 :" + statusSwitch2, Toast.LENGTH_LONG).show(); //ستعرض رسالة توضح حالة الازرار 
            }
        });
    }
}

الثلاثاء، 20 نوفمبر 2018

نوفمبر 20, 2018

ToggleButton in android studio



سنتعرف في هذه التدوينة الي عنصر أخر مهم جدا في كثير من تطبيقات الروبوت وهو عنصر ToggleButton
في نظام التشغيل Android ، يتم استخدام ToggleButton لعرض الحالة المحددة checked وغير المحددة unchecked لأحد الأزرارعند النقر عليه. ToggleButton بشكل أساسي زر تشغيل / إيقاف off/on مع مؤشر ضوئي يشير إلى الحالة الحالية لزر التبديل. المثال الأكثر بساطة على ToggleButton هو تشغيل / إيقاف الصوت ، بلوتوث ، wifi ، نقطة ساخنة وجميع الادوات التي تظهر عند إنزال الستارة الخاصة بهاتفك . كما إنها فئة فرعية subclass من الكلاس compoundButton

كتابة كود العنصر في ملف XML

في داخل الفعالية الرئيسية MainActivity وفي ملف xml file الخاص بها قم بكتابة الكود التالي او قم بسحبه من خلال لوحة التصميم
 <ToggleButton
        android:id="@+id/btn_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
وعندما ننظر الي نتيجة معاينة الكود نجد ان الزر ظهر وفيه القيمة off (false) وهي القيمة الافتراضية ويمكنك تغيرها لاحقا من خلال بعض الخصائص المخصصة لذلك

خصائص زر ToggleButton

  1. id:

    هي الخاصية المسؤولة عن تميز هذا الزر عن غيره طريق إعطاه إسم فريد

  2. checked:

    تستخدم هذه الخاصية في وضع القيمة للزر وتكون قيمة منطقية true or false وعند وضع القيمة true يعني أن الحالة محددة checked وعندما تكون flase تعني أن الحالة غير محددة unchecked وتكون القيمة الافتراضية هي flase

  3. gravity :

    هذه الخاصية تستخدم في التحكم في موضع النص داخل الزر وتكون إحدي القيم يمين او يسار او بالاعلي او الاسفل او الوسط في كلا الاتجاهين

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="engahmed.gagacademy.MainActivity">

    <ToggleButton
        android:id="@+id/btn_toggle1"
        android:checked="true"
        android:gravity="right"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <ToggleButton
        android:id="@+id/btn_toggle2"
        android:checked="false"
        android:gravity="left"
        android:layout_width="100dp"
        android:layout_height="100dp" />

</LinearLayout>

  1. textOn And textOff:

    textOn تستخدم هذه الخاصية في تعين النص عندما تكون الحالة محددة checked
    textOff تستخدم في تعين النص المكتوبة داخلها عندما تكون الحالة غير محددة unchecked


  1. textSize:

    تستخدم في تعين حجم النص داخل زر التبديل ويقاس حجم النص بوحدة sp

  2. textStyle:

    تستخدم هذه الخاصية في تعين شكل النص داخل الزر وتأخذ إحدي القيم bold , italic

  3. textColor:

    تستخدم في تعين لون للنص داخل الزر

  4. background:

    تستخدم في وضع صورة او لون ليكون عبارة عن خلفية للزر

  5. padding:

    تستخدم في تحريك النص داخل الزر من إحدي الحواف الاربعة وفقا لقيم الاتجاهات المعروفة

  6. drawableBottom, drawableTop, drawableRight And drawableLeft :

    تستخدم في وضع صورة مع نص داخل الزر والتحكم في تموضع الصورة بالنسبة للنص من خلال القيم اعلي واسفل ويمين ويسار

<ToggleButton
        android:id="@+id/btn_toggle1"
        android:checked="true"
        android:gravity="center"
        android:textOff="Disable"
        android:textOn="Enable"
        android:textSize="20sp"
        android:textStyle="italic"
        android:textColor="#efd56b"
        android:background="#44a987"
        android:drawableLeft="@mipmap/ic_launcher"
        android:layout_width="280dp"
        android:layout_height="100dp"/>
    <ToggleButton
        android:id="@+id/btn_toggle2"
        android:checked="false"
        android:gravity="center"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="#601aec"
        android:background="#9c98ac"
        android:textOff="Disable"
        android:textOn="Enable"
        android:drawableRight="@mipmap/ic_launcher"
        android:layout_width="280dp"
        android:layout_height="100dp" />

نوفمبر 20, 2018

Button in android studio


في هذه التدوينة سنتعرف الي ألازرار في برمجة تطبيقات الروبوت وكيفية عملها وما يحدث خلف الكواليس
الزر Butoonهو فئة فرعية من الكلاس TextView وزر مركب buttonهو فئة فرعية لفئة الزر Butoon>. حيث نستطيع علي أحد الازرار تنفيذ إجراءات أو أحداث مختلفة مثل حدث النقرclick event والحدث المضغوط pressed eventوالحدث باللمس touch eventوما إلى ذلك.
أزرار Android هي مكونات واجهة المستخدم الرسومية (GUI) التي تكون منطقية عند النقر (النقرات) بواسطة المستخدم. عندما ينقر المستخدم على الزر / ينقر taps/clicks على أحد التطبيقات في Android ، يمكن أن يستجيب التطبيق للنقرة / النقر وتنفيذ حدث معين.
يمكن تقسيم هذه الأزرار إلى فئتين:

  1. الأولى هي الأزرار التي تحتوي على نص Button

  2. والثانية هي الأزرار التي تحتوي على صورة ImageButton يمكن أن يحتوي الزر الذي يحتوي على صور على كل من صورة ونص. تسمى أيضًا أزرار Android التي تحتوي على صور باسم ImageButton.

وتوجد خمسة انواع من الازرار يتعامل معهاالتطبيق وهي :
  1. Button

  2. ToggleButton

  3. RadioButton

  4. ImageButton

  5. FloatinActionButton

يمكننا إدراج الازرار في البرنامج بطريقتين :
  1. السحب والإفلات

  2. عن طريق ملف XML

وسنعتمد في هذه التدوينة العمل من خلال ملف XML file وذلك لكي تتعلم كيفية كتابة الكود في هذا الملف وتتعرف الي الخصائص التي تميز الازرار

كتابة الزر في ملف XML

قم بعمل مشروع جديد وقم بتسميته باي إسم تريده وهنا سيكون بالاسم ButtonExample وفي داخل الفعالية \ الصفحة\النشاط الرئيسي قم بكتابة الاكواد
 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GagAcademy" />

بعض الخصائص التي تميز الازرار

1.id تعرفنا اليها سابقا وهي خاصية رقم المعرف الفريد لكل عنصر ولا يجب أن يكون هناك عناصر بنفس الاسم id
 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GagAcademy" />
2.gravity خاصية المحازاة للعناصر وهي تسمح محازاة الزر بعدة إتجاهات مثل اليمين والاسفل والوسط واليسار والتوسط في الافقي والعمودي
 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"//هنا قم بتغير القيمة الي اخري مثلا الي اليسار او الوسط او الاسفل وشاهد النتيجة
        android:text="GagAcademy" />

ملاحظة

يمكنك دمج اكثر من خاصية في نفس العنصر وذلك من خلال إستخدام الرمز |ويوضع بين الخاصية والاخري كما هو موضح في الصورة أعلاه

3.textColor وهي الخاصية المسؤولة عن لون النص الذي يوجد بداخل الزر ويمكنك إعطاها اللون الذي تريد
4.textSize هذه الخاصية مسؤولة عن حجم الزر وهي تقاس بوحدة sp
5.textStyle هذه الخاصية مسؤولة عن شكل الزر ويحمل إحدي القيم bold or italic ويكون في الوضع الافتراضي normal
background.6 وهي خاصية توفر إمكانية وضع لون او صورة ويكون عبارة عن خلفية للزر
7.padding or margin وهما الخصائص التي تتحكم في تمركز النص الداخلي بالنسبة للحاوية padding او الحاوية ككل بالنسبة للواجهة الجزر margin
8.textAllCaps خاصية منطقية تقبل إحدي القيمتين فقط إما true or false وهي تجعل من النص داخل الزر إما حروف كبيرة او صغيرة
  <Button
        android:id="@+id/Button1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#147D03"
        android:text="GagAcademy"
        android:textSize="20sp"
        android:paddingRight="130dp"
        android:layout_marginTop="130dp"
        android:textAllCaps="false"
        android:textStyle="bold|italic"/>   


9.drawableTop, drawableRight, drawableBottom and drawableLeft
هذه الخصائص تستخدم عندما نريد وضع صورة مع النص داخل الزر وهي تتحكم في وضع الصورة بالنسبة للنص

توجد خصائص أخري كثيرة ستتعرف اليها من خلال تعاملك مع البرنامج ومتطلبات التطبيق الذي تريد صناعته
وسنتعرف في تدوينات أخري الي إستخدام المكتبات في تصميم الازرار بصورة جميلة ومناسبة مع التطبيق باذن الله .

ملاحظة

يمكنك التعامل مع الازرار وكل الواجهات في ملف XML من خلال ملف الجافا كليا وتنسيقها بشكل مناسب
MainActivity.java
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn_Show = (Button) findViewById(R.id.Button1);//تم إستدعاء الزر من خلال رقم المعرف id وإنشاء كائن من الكلاس Button وتمت تسميته btn_show 
        //من خلال الكائن يمكنك إستدعاء كل الدوال التي تتوفر في الكلاس الاب Button 
        btn_Show.setText("GagAcademy");
        btn_Show.setTextSize(16);
        btn_Show.setGravity(50);
        btn_Show.setBackground(getResources().getDrawable(R.drawable.ic_launcher));
        btn_Show.setTextColor(Color.GREEN);
        //يمكنك وضع ما تريد من الخصائص في ملف الجافا
    }

الأربعاء، 10 أكتوبر 2018

أكتوبر 10, 2018

custom listview


اليوم باذن الله راح نشرح قائمة العرض المخصصة والتي تحتوي علي صور وازرار ونصوص وغيرها ويمكن تخصيصها اكثر لتلائم التطبيق وهي قائمة تستخدم موائم عرض مخصصة مثل ArrayAdaper او CustomAdapter سنتعرف الي ثلاثة انواع من المحولات الخاصة في هذه التدوينة

Adding ListView in MainActivity

اولا سنقوم بفتح مشروع جديد وفي داخل ملف XML الخاص بالفعالية الرئيسية MainActivity سنقوم بإدراج قائمة عرض ListView وإعطاها رقم ID خاص وسيكون شكل الملف كالاتي
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="net.simplifiedlearning.customlistviewandroid.MainActivity">
 
<ListView
    android:id="@+id/list2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
 
</RelativeLayout>
الان سنقوم بإنشاء صفحة فعالية جديدة لنخصص فيها القائمة ونضيف فيها العناصر المطلوبة ويتم إعطاها اي اسم وفي مثالنا هذا سنسميها row_item
من مجلد res إضغط كلك يمين وإختار new ثم إختار XML ثم Layout XML File

row_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:id="@+id/image_ph"
        android:layout_gravity="top"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <TextView
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:id="@+id/text_ph"
        android:layout_gravity="top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp" />

</LinearLayout> 
سنقوم الان بإضافة ملف drawable اولا إضغط علي ملف res كلك يمين ثم إختار من القائمة ملف android resource directory من القائمة التي تظهر إضغط علي resource type واختار إسم drawable وسيكون الاسم الافتراضي نفسه
قم بالذهاب الي مكان الصور التي تريد وضعها في التطبيق واعمل لها نسخ وإرجع الي الاندرويد أستوديو وفي نفس ملف drawable قم بالضغط علي كلك يمين وقم بعمل لصق للصور التي تم نسخها سابقا

ملاحـــظة

يجب أن تكون أسامي الصور بالاحرف الصغيرة وليس الكبيرة

وهذه الصورة توضح العملية السابقة كلها



الان سنتوجه الي البرمجة وعمل كلاس جديد وقم بتسميته باي إسم تريد وفي حالتي سيكون الاسم CustomAdapter قم بالتوجه الي ملف الجافا وعمل كلاس جديد واكتب بداخله الكود ادناه وسيكون الشرح داخل الكود نفسه
CustomAdapter.java
package engahmed.gagacademy;

import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

class CustomAdapter extends ArrayAdapter<String> {
    private String[] cant;
    private int[] photo;
    private Activity context;

    CustomAdapter(Activity context, String[] cant, int[] photo) {//الدالة الإنشائية الخاصة بالكلاس
        super(context, R.layout.row_item, cant);
        this.context = context;
        this.cant = cant;
        this.photo = photo;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {//دالة عرض محتويات القائمة
        View r = convertView;
        ViewHolder viewHolder;
        if (r == null) {
            LayoutInflater layoutInflater = context.getLayoutInflater();
            r = layoutInflater.inflate(R.layout.row_item, null, true);
            viewHolder = new ViewHolder(r);
            r.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) r.getTag();
        }
        viewHolder.tvw1.setText(cant[position]);
        viewHolder.tvw2.setImageResource(photo[position]);


        return r;
    }

    private class ViewHolder {
        TextView tvw1;//tvw1 عبارة عن إسم ويمكن تغيره الي غيره
        ImageView tvw2;//tvw2 عبارة عن إسم ويمكنك تغيره الي ما تريد

        ViewHolder(View v) {
            tvw1 = (TextView) v.findViewById(R.id.text_ph);
            tvw2 = (ImageView) v.findViewById(R.id.image_ph);
        }
    }
}
يتم إستخادم المحولات لاعادة إستخدام العرض في كل مرة يتم فيها عرض البيانات الجديدة وتختفي البيانات التي تم عرضها وتكون غير ظاهرة لدي المستخدم
مثلا لدينا قائمة بها 10 عناصر وعند عرضها تظهر فقط 7 منها وتكون ال3 مخفية وعند النزول لاسفل تظهر ال3 الاخيرة وتختفي ال3 التي توجد في اعلي القئمة وهكذا وهو ما يسمي بإعادة التدوير
وظيفة LayoutInflater هي تعمل علي إنشاء كائنات عرض من ملف XML وتحويل كل محتواه الي كائن عرض ليستخدم في المحول الخاص
في ملف MainActivity قم بعمل مصفوفتين واحدة للصور وتكون من نوع بيانات int والاخري من نوع بيانات String لتخزين الاسامي
MainActivity.java
package engahmed.gagacademy;//قم بتغيره الي إسم الحزمة الخاصة بك


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;


public class MainActivity extends AppCompatActivity {
    ListView lv;
    int[] flags = {R.drawable.irag, R.drawable.jibuti, R.drawable.saudi, R.drawable.somal, R.drawable.sudan, R.drawable.qater};
    String[] countNameList = {"ireg", "jibuti", "saudi", "somal", "sudan", "qater"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv = (ListView) findViewById(R.id.list2);
        CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, countNameList, flags);
        lv.setAdapter(customAdapter);
    }
}

والان قم بعمل run للتطبيق ليظهر بالشكل التالي مع مراعاة الصور التي وضعت لديك فهي تختلف عما توجد هنا


سنأخذ مثال ثاني بشكل برمجي مختلف وسيكون بنفس المحتوي السابق لكن يختلف من حيث البرمجة فقط
كل شئ سيكون كما هو سابقا عدا ملف الجافا وسنغير فقط كلاس CustomAdapter الي الاتي
CustomAdapter.java
package engahmed.gagacademy;//قم بتغيره الي إسم الحزمة لديك

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {
    Context context;
    String countryList[];
    int flags[];
    LayoutInflater inflter;

    public CustomAdapter(Context applicationContext, String[] countryList, int[] flags) {
        this.context = context;
        this.countryList = countryList;
        this.flags = flags;
        inflter = (LayoutInflater.from(applicationContext));
    }

    @Override
    public int getCount() {
        return countryList.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflter.inflate(R.layout.row_item, null);
        TextView country = (TextView) view.findViewById(R.id.text_ph);
        ImageView icon = (ImageView) view.findViewById(R.id.image_ph);
        country.setText(countryList[i]);
        icon.setImageResource(flags[i]);
        return view;
    }
}
الان قم بتشغيل التطبيق من جديد وستري نفس النتيجة السابقة تماما


هناك إسلوب أخر متبع في برمجة القائمة المخصصة وسيكون الاختلاف في ملف الجافا فقط

صفحتنا علي الفيسبوك

التسميات

المتواجدين حاليا