آموزش اضافه کردن Floatingactionbutton در برنامه نویسی اندروید
سلام دوستان در این سری از آموزش های برنامه نویسی اندروید به آموزش اضافه کردن Floatingactionbutton در برنامه نویسی اندروید می پردازیم floatingactionbutton با fab ها دکمه هایی هستند که در به صورت گرد می توانند در چهار موقعیت خاص قرار گیرند و در صورت کلیک بروی آنها می توانند عملی را انجام دهند در بیشتر برنامه های ایرانی آن را می توانیم ببینیم و یک مثال نزدیک تر در برنامه Gmail یک دکمه در سمت راست قرار دارد آن همان Fab است در ادامه با ما همراه باشید.
قبل از هر چیز ما باید وارد فایل Build.gradle بخش moudle شویم و خط زیر را به بخش dependencies اضافه کنید.
1 | compile 'com.android.support:support-annotations:25.1.0' |
دقت کنید در بالا عدد 25 به sdk شما اشاره دارد الان sdk من 24 است به همین علت باید 25 باشد (منظور ورژن sdk است)
بعد از آن بروی sync کلیک کنید تا پروژه شما همگام سازی شود. (علت های خطای گریدل را ما قبلا بررسی کردیم در سایت سرچ کنید)
حالا کد زیر به layout خود اضافه کنید.
1 2 3 4 5 6 7 | <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@drawable/my_icon" /> |
android:layout_gravity : این ویژگی جهت (position) را تعیین می کند الان ما آن را در قسمت پایین سمت راست قرار داده ایم اگر بخواهیم سمت چپ باشد باید آن را bottom | start قرار دهیم.
اگر بخواهیم در بالا قرار دهیم باید bottom رو به top تغییر دهیم.
android:layout_margin : فاصله از چهار طرف را تعیین می کند شما می توانید ان را در فایل dimens تعریف کنید با به همان جا آن را بدهید برای این کار می توانید به صورت زیر عمل کنید.
1 | android:layout_margin="0 10dp 0 0" |
فاصله مارجین همانند عقربته های ساعت است و به ترتیب ( بالا راست پایین چپ ) است.
android:src : هم برای قرار دادن عکس لازم است.
56 * 56 اندازه عکس ما باید باشه یا اندازه آن باید 40 * 40 باشد (عکس های آن باید کوچک باشد) یا در کوچک ترین حالت آن 24dp * 24 باشد.
1 2 3 4 5 6 7 | FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "Your toast message !", Toast.LENGTH_SHORT).show(); } }); |
برای هندل کردن کلیک کاربر هم از کد بالا استفاده می کنیم
اگه بخواهیم وقتی کاربر بروی دکمه کلیک کرد یک ripple ایجاد شود (برای تغییر رنگ آن باید از کد زیر استفاده کنیم)
1 | <span class="pln">setRippleColor(int color);</span> |
این آموزش هم به پایان رسید موفق باشید.