15
ژانویه

آموزش کار با باتن (button) در اندروید استودیو

در قسمت قبل نحوه کار با تکست ویو (textview) و همچنین شیوه قرار دادن متن در آن را یاد گرفتیم. در این جلسه می خواهیم به همراه یک مثال با button درمحیط اندروید استودیو آشنا شویم.

کاربرد button

تقریبا هیچ برنامه ی اندرویدی وجود ندارد که ویجت باتن در آن استفاده نشده باشد! در فرم های ثبت سفارش، فرم ورود، جستجو، بستن اکتیویتی، بازگشت به اکتیویتی قبلی و هر زمان که بخواهیم عملیاتی را اغاز کنیم استفاده از باتن امری رایج است. وقتی کاربر در یک برنامه اندروید روی یک دکمه کلیک می کند برنامه می تواند به کلیک پاسخ دهد. با استفاده از این ویو رویداد های مختلفی نظیر clickevent (رویداد کلیک)، pressedevent و touchevent را انجام می دهیم. باتن ها را می توان به 2 دسته تقسیم کرد: دسته اول دکمه های دارای متن و دوم دکمه های دارای تصویر. به باتن های همراه با تصاویر Imageview نیز گفته می شود.

آموزش باتن همراه با مثال

در ابتدا یک پروژه جدید ایجاد میکنیم سپس به xml میرویم و کد های زیر را اضافه می کنیم .

<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"
    tools:context=".MainActivity">

   <TextView
        android:id="@+id/simpleTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Before Clicking"
        android:textColor="#f00"
        android:textSize="25sp"
        android:textStyle="bold|italic" />

    <Button
        android:id="@+id/btnChangeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#5F01EB"
        android:padding="10dp"
        android:text="Change Text"
        android:textColor="#fff"
        android:textStyle="bold" />
</RelativeLayout>

خط 7 تا 16 در جلسه قبل تدریس شد. دوستان می توانند برای یادگیری این قسمت به لینک آموزش کار با تکست ویو مراجعه کنند.

خط 19 یک شناسه منحصر به فرد به باتن اختصاص می دهد. بعدا در فایل جاوا با این آی دی کار خواهیم داشت!

خط 20 عرض ویجت را مشخص کردیم.

خط21 طول ویجت را مشخص کردیم.

خط 22 مشخص کردیم که در مرکز والد خود قرار بگیرد.

خط 23 رنگ پس زمینه باتن را مشخص کردیم.

خط 24 به مقدار 10dpاز داخل باتن فاصله ایجاد شده.

خط 25 متن داخل باتن “change text” تعیین شده.

خط 26 رنگ متن داخل باتن مشخص شده.

خط 27 متن داخل باتن را به شکل bold در آورده ایم.

بعد از این قسمت سراغ فایل جاوا مربوطه می رویم. کدهای زیر داخل تابع onCreate در زیر خط setContentView وارد می کنیم .

TextView simpleTextView = (TextView) findViewById(R.id.simpleTextView);
Button changeText = (Button) findViewById(R.id.btnChangeText);
changeText.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        simpleTextView.setText("After Clicking");
    }
});


در خط 2 و1 با متد findViewById آی دی باتن و همچنین آی دی تکست ویو از منابع جستجو شده و در متغییری از نوع خودش می ریزد.

در خط 3 از متد ()OnClickListener استفاده شده. زمانی که قصد داریم با کلیلک روی ویجت عملیاتی انجام شود باید متد ()OnClickListener  را فراخوانی کنیم. (لازم به تایپ خط 5 نیس! زمانی که در خط 3 به OnClickListener رسیدید با تایپ حرف O به صورت اتواینکریمنت مواردی به شما پیشنهاد داده می شود با انتخاب همین مورد به طور اتوماتیک خط 5 ایجاد می شود.)

در خط 6 در تکست ویو عبارت ” After Clicking”  را قرار می دهیم. به این شکل زمانی که کاربر روی دکمه کلیک می کند متن داخل تکست ویو تغییر می کند.

بعد از اجرای پروژه ی فوق شکل زیر حاصل می شود.

آموزش باتن اندروید

همان طور که مشاهده می کنید با کلیک روی باتن عبارت تکست ویو تغییر کرد.

آموزش باتن اندروید

خصوصیت drawableBottom در باتن

از این ویژگی برای اضافه کردن عکس به قسمت پایین باتن استفاده می شود.

از خصوصیات drawableLeft ، drawableRight ، drawableTop به ترتیب برای اضافه کردن عکس به قسمت چپ، راست و پایین باتن استفاده می شود. در نمونه کد زیر نحوه استفاده از این اتریبیوت بیان شده است.

<Button
    android:id="@+id/btnChangeText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#5F01EB"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:text="submit"
    android:textColor="#fff"
    android:textStyle="bold"
    android:drawableBottom="@mipmap/ic_launcher_round"/>

آموزش باتن اندروید

سفارشی سازی button در انروید استودیو

سفارشی سازی button به این معنی است که تغییراتی در فونت و شکل باتن ایجاد کرد. برای این منظور در ابتدا به مسیر زیر رفته و یک فایل drawable ایجاد می کنیم .

ما نام آن را btn1 می گذاریم و کدهای زیر را داخلش قرار می دهیم :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/red"/>
    <corners android:radius="20dp"/>
    <stroke android:width="2dp"/>
</shape>

خط 3 : با انتخاب تگ سالید و انتخاب color رنگ پس زمینه دکمه به قرمز تغییر می یابد.

خط 4 : با انتخاب تگ کورنر و انتخاب ردیوس می توان میزان گردی همه ی گوشه ها را با هم تعیین کرد. همچنین با بقیه خصوصیات آن می توان میزان گردی هر گوشه ی آن را متفاوت از بقیه نیز تنظیم کرد.

خط 5 : با انتخاب تگ استرک میتوان میزان ضخامت و رنگ خط دور ویجت را تعیین کرد.

سپس به فایل xml برمیگردیم و در اتریبیوت background آدرس فایل مورد نظر خود را قرار می دهیم :

<Button
    android:id="@+id/btnText1"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:background="@drawable/btn1"
    android:text="button1"
    android:textSize="18sp" />

در نهایت خروجی کار به شکل زیر است.

اگر چنانچه نیاز به مشاوره فنی در زمینه اندروید استودیو دارید به لینک مشاوره فنی اندروید استودیو مراجعه کنید.

سخن اخر

اگر مشکل یا سوالی داشتید در بخش نظرات، مشکل خود را مطرح کنید تا در کوتاه ترین زمان ممکن پاسخ خود را دریافت کنید. در بخش بعدی آموزش کامل ادیت تکس را آماده کردیم که با مراجعه به لینک آموزش ادیت تکست در اندروید استودیو میتوانید ازین آموزش بهره مند شوید.

تا یادگیری حرفه ای اندروید با ما همراه باشید…