آموزش ساخت دکمه شناور در اندروید استودیو

آموزش ساخت دکمه شناور در اندروید استودیو

دکمه شناور چیست؟

با سلام. امیدوارم که حالتون خوب باشد و روز خوبی رو شروع کرده باشید. با یه آموزش دیگه از سری مباحث اندروید در خدمتتون هستیم. همونطور که می دانید، در مقاله های قبلی مباحثی از اندروید استودیو رو باهم بررسی کردیم. بعضی از این مباحث، مربوط به بحث Material design بودند. مثل ساخت Bottom navigation و یا ساخت List View در اندروید. حالا امروز می خواهیم یه مبحث دیگه از متریال دیزاین رو باهم بررسی کنیم.

دکمه شناور

دکمه شناور (Floating Action Button) یکی از افزونه های معرفی شده توسط متریال دیزاین هست. همانطور که از اسمشم معلومه، یک دکمه در صفحه خروجی ما هست که جابه جا نمی شود و در یه گوشه صفحه قرار میگیرد. (البته اگه مایل باشید دکمه شناور جابه جا بشود، می توانید دکمه شناورتون رو اختصاصی بسازید.)

کاربرد این دکمه، بیشتر در پیام رسان ها هست (البته دکمه شناور در بیشتر اپلیکیشن ها استفاده می شوند ولی بیشتر در پیام رسان ها دیده کاربرد دارند.) توی پیام رسان ها حتما مشاهده کردید که برای ایجاد یه گروه یا حتی اضافه کردن یه مخاطب یه دکمه (معمولا پایین صفحه سمت راست) وجود دارد. این دکمه همون دکمه شناور هست که برای اینکار استفاده می شود.

یک نمونه از دکمه شناور در تصویر متحرک بالا ملاحظه می کنید.

مراحل ایجاد دکمه شناور:

خب حالا که با کلیت دکمه شناور آشنا شدیم، حالا می خواهیم باهم قدم به قدم مراحل ساخت دکمه شناور رو بررسی کنیم.

برای شروع کار، اول از همه باید یک پروژه جدید در اندروید استودیو بسازیم. من اسم پروژمو FloatActBut می گزاریم و طبق پروژه های قبلی مراحل بعدیمو مشخص می کنم تا وارد پروژم بشویم.

خب مثل همه ی افزونه هایی که مربوط به متریال دیزاین هستن، دکمه شناور هم به کتابخانه ی design نیاز داره تا بتواند کارشو انجام بدهد. پس به build.gradle می رویم و کتابخانه ی design رو به پروژم اضافه می کنیم:

compile 'com.android.support:design:26.0.1'

خب حالا به قسمت Layout پروژمون می رویم و به جای RelativeLayout، از CoordinatorLayout استفاده می کنیم. (چون با CoordinatorLayout می توان بهتر روی افزونه هایی دکمه شناور کار کرد.)

خب برای قسمت بعدی یک تگ به اسم android.support.design.widget.FloatingActionButton اضافه می کنیم مثل زیر:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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="wrap_content"
    tools:context="ir.Padide_It.FloatActBut.MainActivity">
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/Float_Act_But"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:src="@android:drawable/ic_inbox" />
 
</android.support.design.widget.CoordinatorLayout>

خب الان چون برای layout_gravity دو مقدار bottom (پایین) و end (سمت راست) تعریف کردم، دکمه شناور ما در سمت راست و پایین صفحه با آیکونی که تعریف کرده بودم ظاهر شده است.

خب حالا که کلیت دکمه ی شناورمون ایجاد شد، اگه مایل باشید که بیشتر شخصی سازی کنید و رنگ آن را عوض کنید، مانند زیر عمل کنید:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/Float_Act_But"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="20dp"
    android:src="@android:drawable/ic_inbox"
    app:backgroundTint="#2c489c" />

خاصیت بعدی که تو این قسمت بررسیش می کنیم، خاصیت app:rippleColor هست. در حالت عادی و بدون استفاده از این خصوصیت، وقتی که دکمه را لمس می کنیم، رنگ پس زمینه دکمه تیره تر از حالت قبلی خودش می شود. ولی با استفاده از rippleColor و تعریف یه رنگ دیگه، ripple Animation لمس دکمه با این رنگ اجرا می شود:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/Float_Act_But"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="20dp"
    android:src="@android:drawable/ic_inbox"
    app:backgroundTint="#2c489c"
    android:clickable="true"
    android:focusable="true"
    app:fabSize="normal"
    app:rippleColor="#b12f2f"/>

تکمیل فرآیند پروژه:

خب الان فقط کافیه کدهای زیر رو برای دکمه شناور اعمال کنیم تا پروژمون با موفقیت تموم بشه:

package ir.Padide_It.FloatActBut;
 
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    FloatingActionButton FlActBtn;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        FlActBtn = findViewById(R.id.FloatActBut);
 
        FlActBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
                Toast.makeText( MainActivity.this, "دکمه شناور کلیک شد.", Toast.LENGTH_SHORT).show();
 
            }
        });
 
    }
}

خب وقتی الان شما خروجی برنامه رو ببینید و روی دکمه کلیک کنید، پیغام “دکمه شناور کلیک شد” را می بینید.

خب این هماز آموزش امروز. امیدوارم که از آموزش امروز نهایت لذت رو برده باشید و برای شما کاربردی بوده باشد.

نظرات خود را در رابطه با آموزش ساخت دکمه شناور در اندروید استودیو بیان نمایید.

*آینده از آن کسب و کارهای آنلاین است*