برنامج ImageButton التعليمي مع مثال في Android Studio
في Android ، يتم استخدام ImageButton لعرض زر عادي مع صورة مخصصة في الزر . بكلمات بسيطة يمكننا أن نقول ، إن ImageButton هو زر به صورة يمكن للمستخدمين الضغط عليها أو النقر فوقها. بشكل افتراضي ، يبدو كزر عادي بخلفية الزر القياسية التي تغير اللون أثناء حالات الأزرار المختلفة.
ملاحظة مهمة: يتم عرض صورة خلفية الزر القياسي في خلفية الزر كلما قمت بإنشاء زر صورة . لإزالة تلك الصورة ، يمكنك تحديد صورة الخلفية الخاصة بك في xml باستخدام سمة الخلفية أو في فئة جافا باستخدام طريقة setBackground ().
يوجد أدناه الرمز والصورة اللذان يوضحان كيف يبدو زر الصورة المخصص في Android:
ملاحظة مهمة: يحتوي ImageButton على جميع خصائص الزر العادي بحيث يمكنك بسهولة تنفيذ أي حدث مثل النقر أو أي حدث آخر يمكنك إجراؤه على زر عادي.
كود ImageButton في XML:
<!--Make Sure To Add Image Name home in Drawable Folder-->
<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home" />
سمات ا خصائصImageButton :
الآن دعنا نناقش بعض السمات المهمة التي تساعدنا على تكوين زر صورة في ملف xml الخاص بك (التخطيط).
1. المعرّف id : المعرّف هو سمة تُستخدم لتعريف زر الصورة بشكل فريد. يوجد أدناه مثال الكود الذي قمنا فيه بتعيين معرف زر الصورة.
<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
2. src: src هي سمة تُستخدم لتعيين ملف مصدر للصورة أو يمكنك نطق صورة في زر الصورة لجعل تخطيطك يبدو جذابًا.
يوجد أدناه مثال على الكود الذي قمنا بتعيين مصدر زر الصورة فيه. تأكد من أنك قمت بحفظ صورة في مجلد قابل للرسم باسم المنزل قبل استخدام الكود أدناه
<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home"/> <!--src(source)file from drawable folder which display an imagebutton-->
ضبط مصدر الصورة في ImageButton باستخدام فئة Java:
يمكننا أيضًا ضبط الصورة المصدر في وقت التشغيل برمجيًا في فئة java . لذلك نستخدم الدالة setImageResource () كما هو موضح أدناه مثال الكود.
/*Add in Oncreate() funtion after setContentView()*/
ImageButton simpleImageButton = (ImageButton)findViewById(R.id.simpleImageButton);
simpleImageButton.setImageResource(R.drawable.home); //set the image programmatically
3. background: تُستخدم سمة الخلفية لضبط خلفية زر الصورة. يمكننا تعيين لون أو رسم في خلفية الزر.
يوجد أدناه مثال على الكود الذي قمنا فيه بتعيين اللون الأسود للخلفية وصورة المنزل كمصدر لزر الصورة.
<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home"
android:background="#000"/><!-- black background color for image button-->
يوجد أدناه مثال على الكود الذي وضعنا فيه لون الخلفية السوداء لزر الصورة يعني برمجيًا في فئة java.
/*Add in Oncreate() funtion after setContentView()*/
ImageButton simpleImageButton = (ImageButton) findViewById(R.id.simpleImageButton);
simpleImageButton.setBackgroundColor(Color.BLACK); //set black background color for image button
4. Padding المساحة المتروكة: يتم استخدام خاصية الحشو لتعيين المساحة المتروكة من اليسار أو اليمين أو أعلى أو أسفل زر الصورة.
- paddingRight المساحة المتروكة لليمين: اضبط المساحة المتروكة من الجانب الأيمن لزر الصورة .
- paddingLeft المساحة المتروكة على اليسار : اضبط المساحة المتروكة من الجانب الأيسر لزر الصورة .
- paddingTop: اضبط المساحة المتروكة من الجانب العلوي لزر الصورة .
- paddingBottom: اضبط المساحة المتروكة من الجانب السفلي لزر الصورة .
- padding المساحة المتروكة: اضبط المساحة المتروكة من جميع جوانب زر الصورة .
يوجد أدناه مثال لرمز سمة الحشو padding حيث قمنا بتعيين مساحة 20dp من جميع جوانب زر الصورة.
<ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/home"
android:padding="30dp"/><!-- set 30dp padding from all the sides of the view-->
مثال على ImageButton في Android Studio:
في المثال أدناه ImageButton نعرض زري صورة مخصصين مع المصدر والخلفية. أحدهما عبارة عن زر صورة بسيط بخلفية بسيطة والآخر عبارة عن زر صورة بزاوية مستديرة وكلما نقرت على زر ، سيتم عرض اسم الزر في نخب. فيما يلي الكود والمخرج النهائي:
في هذه الخطوة ، نقوم بإنشاء مشروع جديد في android studio عن طريق ملء جميع التفاصيل الضرورية للتطبيق مثل اسم التطبيق واسم الحزمة وإصدارات api وما إلى ذلك.
حدد ملف -> جديد -> مشروع جديد واملأ النماذج وانقر فوق الزر "إنهاء". </>
الخطوة 3: انقر بزر الماوس الأيمن على drawable -> New -> Drawable Resource file وأنشئ اسم ملف xml جديد custom_image-buttton.xml وأضف الكود التالي
في هذه الخطوة ، قمنا بإنشاء xml قابل للرسم استخدمنا فيه الخصائص الصلبة والزاوية ، ويتم استخدام الصلبة لتعيين لون الخلفية لزر الصورة ، ويتم استخدام الزاوية لضبط نصف قطر زوايا الزر.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#900" /><!-- background color for imagebutton-->
<corners android:radius="20dp" /><!-- round corners for imagebutton-->
</shape>
الخطوة 3: افتح التطبيق -> التخطيط -> activity_main. xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نفتح ملف xml ونضيف الكود الذي يعرض زري صورة مخصصين باستخدام src والخلفية والجاذبية والسمات الأخرى في النسق النسبي .
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!--Make sure to save two images home and youtube in drawable folder-->
<ImageButton
android:id="@+id/simpleImageButtonHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="@drawable/custom_image_button"
android:padding="20dp"
android:src="@drawable/home" />
<ImageButton
android:id="@+id/simpleImageButtonYouTube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/simpleImageButtonHome"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="#005"
android:padding="20dp"
android:src="@drawable/youtube" />
</RelativeLayout>
الخطوة 4: افتح التطبيق -> الحزمة -> MainActivity. جافا
في هذه الخطوة ، نضيف الكود لبدء أزرار الصورة ثم ننفذ حدث النقر عليها ونعرض النص للعنصر المحدد باستخدام نخب.
package example.abhiandriod.imagebuttonexample;
import android.app.Activity;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate view's
ImageButton simpleImageButtonHome = (ImageButton)findViewById(R.id.simpleImageButtonHome);
ImageButton simpleImageButtonYouTube = (ImageButton)findViewById(R.id.simpleImageButtonYouTube);
// perform click event on button's
simpleImageButtonHome.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"Home Button",Toast.LENGTH_LONG).show();// display the toast on home button click
}
});
simpleImageButtonYouTube.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"YouTube Button",Toast.LENGTH_LONG).show();// display the toast on you tube button click
}
});
}
}
المخرجات :
الآن ابدأ تشغيل AVD في Emulator وقم بتشغيل التطبيق. سترى اثنين من ImageButton أحدهما أعلى الزاوية المستديرة. انقر فوق أي صورة وسيتم عرض اسمها على الشاشة.
