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

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

دکمه شناور | معرفی و آموزش | 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 شهریور ۷, ۱۳۹۵

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

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

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp