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

 
دکمه شناور ۰
آموزش کار با دکمه ی شناور در اندروید استودیو:
 
دکمه شناور   FAB  یا همان  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();
}
});
}
}

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

مطلب مفیدی برای شما بود ؟ پس به اشتراک بگذارید برای دوستانتان

codesrcReza

109 مطلب منتشر شده

درباره این مطلب نظر دهید !