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

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

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

انتشار 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();
 
            }
        });
 
    }
}

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

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

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

 

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

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

 

 

 

مقالات مرتبط

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

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

پدیده تجارت

10 شهریور 1393

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

پدیده تجارت

30 آبان 1396

اپلیکیشن باربری آنلاین خان بار اپلیکیشن باربری آنلاین خان بار

پدیده تجارت

23 فروردین 1397

آقای جلالی دوره اندروید آقای جلالی دوره اندروید

پدیده تجارت

03 مهر 1396

بررسی مدل آیدا در دیجیتال مارکتینگ بررسی مدل آیدا در دیجیتال مارکتینگ مقالات تجارت الکترونیک

پدیده تجارت

15 اسفند 1398

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

پدیده تجارت

23 آذر 1398

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

پدیده تجارت

09 مرداد 1397

بهترین ابزار ساخت بازی های ویدئویی  کدامند ؟ بهترین ابزار ساخت بازی های ویدئویی کدامند ؟ مقالات موبایل

پدیده تجارت

24 اسفند 1400

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

پدیده تجارت

16 فروردین 1401

چگونه لغزش دوربین را در افترافکت بگیریم؟ چگونه لغزش دوربین را در افترافکت بگیریم؟ مقالات تجارت الکترونیک

پدیده تجارت

20 اردیبهشت 1397

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

پدیده تجارت

22 خرداد 1399

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

0

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
پشتیبانی آنلاین است
ارسال در واتساپ