یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36644146

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

انتشار 12 خرداد 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

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

با سلام. امیدوارم که حالتون خوب باشه و روز خوبی رو شروع کرده باشید. با یه آموزش دیگه از سری مباحث اندروید در خدمتتون هستیم. همونطور که می دونید، در مقاله های قبلی مباحثی از اندروید استودیو رو باهم بررسی کردیم. بعضی از این مباحث، مربوط به بحث 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();
 
            }
        });
 
    }
}

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

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

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

 

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

تولید شده در بخش تولید محتوا پدیده تجارت

 

 

 

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

شرکت بازی سازی اندروید اصفهان شرکت بازی سازی اندروید اصفهان مقالات موبایل

پدیده تجارت

23 فروردین 1399

نکات تولید محتوا متنی و ویدیویی نکات تولید محتوا متنی و ویدیویی مقالات تجارت الکترونیک

پدیده تجارت

25 مهر 1398

سیستم مدیریت محتوا چیست ؟ سیستم مدیریت محتوا چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

01 مهر 1392

فریلنسر کیست و چگونه فریلنسر شویم؟ فریلنسر کیست و چگونه فریلنسر شویم؟ مقالات تجارت الکترونیک

پدیده تجارت

23 اسفند 1400

بهترین پلاگین های فتوشاپ برای طراحان سایت بهترین پلاگین های فتوشاپ برای طراحان سایت مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

نیچ مارکتینگ چیست و چگونه پیدا کنیم؟ نیچ مارکتینگ چیست و چگونه پیدا کنیم؟ مقالات تجارت الکترونیک

پدیده تجارت

16 فروردین 1401

نکات موثر در طراحی اپلیکیشن اندروید نکات موثر در طراحی اپلیکیشن اندروید مقالات تجارت الکترونیک

پدیده تجارت

04 اردیبهشت 1397

انواع روش های تبلیغات در اینترنت انواع روش های تبلیغات در اینترنت مقالات برندینگ

پدیده تجارت

14 فروردین 1396

تولید انیمیشن در اصفهان تولید انیمیشن در اصفهان مقالات برندینگ

پدیده تجارت

20 آذر 1396

برای آموزش اندروید کدام شرکت را انتخاب می کنید ؟ برای آموزش اندروید کدام شرکت را انتخاب می کنید ؟ مقالات موبایل

پدیده تجارت

27 مهر 1396

آموزش افترافکت در اصفهان آموزش افترافکت در اصفهان

پدیده تجارت

15 دی 1396

معرفی متا تگ های مهم برای سئو معرفی متا تگ های مهم برای سئو مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها