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

شـمـــاره تــمــاس
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 فروردین 1401

طراحی سایت پزشکی در اصفهان طراحی سایت پزشکی در اصفهان مقالات تجارت الکترونیک

پدیده تجارت

11 آذر 1398

صفحه فرود یا (landing page) چیست ؟ صفحه فرود یا (landing page) چیست ؟ مقالات برندینگ

پدیده تجارت

22 تیر 1399

چگونه یک صفحه فرود (Landing Page) مناسب داشته باشیم ؟ چگونه یک صفحه فرود (Landing Page) مناسب داشته باشیم ؟ مقالات سئو

پدیده تجارت

11 بهمن 1396

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

پدیده تجارت

20 فروردین 1401

ساخت ViewPager در اندروید ساخت ViewPager در اندروید مقالات موبایل

پدیده تجارت

15 دی 1397

بررسی تفاوت هایHTML و JavaScript بررسی تفاوت هایHTML و JavaScript مقالات طراحی وب سایت

پدیده تجارت

23 آبان 1398

ریتارگتینگ چیست؟ ریتارگتینگ چیست؟ مقالات برندینگ

پدیده تجارت

30 دی 1398

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

پدیده تجارت

04 تیر 1399

ASP.NET چیست؟ چه کاربردی دارد ASP.NET چیست؟ چه کاربردی دارد مقالات طراحی وب سایت

پدیده تجارت

13 اردیبهشت 1399

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

پدیده تجارت

14 بهمن 1398

تفاوت طراحی سایت اختصاصی با عمومی در چیست؟ تفاوت طراحی سایت اختصاصی با عمومی در چیست؟ مقالات تجارت الکترونیک

پدیده تجارت

06 دی 1396

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

0

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