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

برای جستجو کلمه مورد نظر خود را وارد کنید

دکمه شناور | معرفی و آموزش | Floating action button

rouhollah.mz


اطلاعات نویسنده
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

به نام خدا دکمه شناور

سلام ، در خدمتتون هستیم با آموزش دکمه شناور | Floating action button

 

دکمه شناور | این دکمه ها توسط یک آیکون دایره ای که بر روی رابط کاربری (UI) شناور است مشخص میشوند و رفتارهای حرکتی مانند تبدیل شدن (morph)، فعال سازی و یک نقطه anchore جا بجا شونده دارند.
دکمه های عملیاتی شناور در ۲ اندازه هستند :
اندازه پیش فرض : برای اکثر موارد استفاده
اندازه کوچک : تنها جهت ایجاد پیوستگی با دیگر عناصر صفحه نمایش استفاده میشود.

 

برای اضافه کردن در اولین مرحله باید کتابخانه ی Appcompat & Design رو در build.gradle وارد کنیم :

dependencies {  
    compile 'com.android.support:appcompat-v7:23.2.1' 
    compile 'com.android.support:design:23.2.1' 
}

پس از اون باید مطمئن بشیم که اکتیویتی مورد نظر ما extends شده باشه از AppCompatActivity  :

public class MainActivity extends AppCompatActivity { 
...
}

در مرحله ی بعد FAB رو درون لیوت مورد نظرمون قرار میدیدم  :

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call" />

برای اینکه Style مورد نظر خودمون رو پیاده کنیم به این شیوه عمل کنیم :

باید Custom Style خودمون رو در style.xml وارد کنیم :

<style name="MyFloatingButton" parent="Theme.AppCompat.Light">  
    <item name="colorAccent">@color/pink</item>
</style>

و برای وارد کردن رنگ مورد نظر ، کافیه که کد رنگ رو بجای این قسمت وارد کنیم :

@color/pink

و تنها کار باقی مونده وارد کردن این Style  برای دکمه شناور مورد نظر ماست که از android:theme استفاده میکنیم :

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call"
    android:theme="@style/MyFloatingButton" />

برای تغییر دادن رنگ RippleEffect زمانی که فب تپ میشه از app:rippleColor در کدهای فب مورد نظر استفاده میکنیم :

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call"
    app:rippleColor="@color/colorPrimary" />

برای اینکه آیکون درون دکمه شناور رو تغییر بدیم از android:src استفاده میکنیم :

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_favorite"/>

اندازه دکمه شناور :

 

دکمه های شناور در ۲ اندازه هستند :
اندازه پیش فرض : برای اکثر موارد استفاده
اندازه کوچک : تنها جهت ایجاد پیوستگی با دیگر عناصر صفحه نمایش استفاده میشود.

 

برای تغییر دادن اندازه ی دکمه ی شناور از app:fabSize استفاده میکنیم که دارای دو اندازه mini و normal میباشد :

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_mini"
    app:fabSize="mini"/>

نتیجه نهایی :

دکمه شناور

__

امیداوریم که آموزش برای شما مفید بوده باشه ، موفق باشید .

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: مصطفی شهریور ۶, ۱۳۹۵

    compile ‘com.android.support:appcompat-v7:23.2.1’
    compile ‘com.android.support:design:23.2.1’
    سینک نمیشن چرا؟؟؟

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Rouhollah.Mz شهریور ۷, ۱۳۹۵

      سلام
      برای سینک شدن گریدل باید یه اینترنت + سنگ شکن وصل باشید .

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Ali آبان ۸, ۱۳۹۵

    لطفا آموزش اضافه کردن کتابخانه به پروژه مون در اکلیپس رو هم به صورت تصویری بزارید.ممنون میشم.

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Rouhollah.Mz دی ۴, ۱۳۹۵

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

  3. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: محسن آذر ۲۱, ۱۳۹۵

    سلام لطف اموزش ساخت Flotaing Action Menu رو هم بفرمایید.
    وقتی روی دکمه شماور کلیک شد یک منو باز بشه.

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی