ورچر

آموزشهای پراکنده از دنیای برنامه نویسی اندروید

آموزش متریال دیزاین - ساخت دکمه های شناور گرد post image

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

تگ ها : آموزش متریال دیزاین,آموزش برنامه نویسی متریال دیزاین,ایجاد دکمه های گرد شناور در اندروید,ساخت دکمه گرد در اندروید,ساخت fab در اندروید,ایجاد fab در اندروید
آخرین ویرایش : 1395/5/20

براساس مستندات ارائه شده گوگل تعریف دکمه های شناور گرد به این شکل می باشد.

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

 

نحوه افزودن

1- در فایل build.gradle آخرین نسخه کتابخانه appcompat و design را اضافه کنید.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

2- مطمئن بشید اکتیویتی که میسازید از android.support.v7.app.AppCompatActivity مشتق شده باشد.

public class MainActivity extends AppCompatActivity {  
    ...
}

3- تگ یک FloatingActionButton به فایل layout.xml خود اضافه کنید.

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

 

نحوه استایل دادن

1- در فایل styles.xml پروژه یک استایل کاستوم تعریف کنید.

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

2- با استفاده از ویژگی 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" />

 

نحوه اعمال Ripple Color

برای تغییر رنگ Ripple Effect دکمه های شناور از ویژگی 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/indigo" />

 

نحوه تغییر آیکون

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

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

 

نحوه تغییر سایز

براساس مستندات ارائه شده گوگل تعریف دکمه های شناور گرد به این شکل می باشد.

Floating action buttons come in two sizes:
    Default size: For most use cases
    Mini size: Only used to create visual continuity with other screen elements

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

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

 

سورس کد آموزش های متریال در گیت هاب به اشتراک گزاشته می شود.