किसी भी पुस्तकालय का उपयोग किए बिना या एनिमेशन के लिए विशाल xml कोड लिखने के बिना एनिमेटिंग FAB मेनू को लागू करने के लिए एक बेहतर दृष्टिकोण मिला। उम्मीद है कि यह भविष्य में किसी ऐसे व्यक्ति के लिए मदद करेगा जिसे इसे लागू करने के लिए एक सरल तरीके की आवश्यकता है।
केवल animate().translationY()फ़ंक्शन का उपयोग करके , आप किसी भी दृश्य को ऊपर या नीचे कर सकते हैं, जैसा कि मैंने अपने नीचे दिए गए कोड में किया था, जीथब में पूरा कोड देखें । यदि आप कोटलिन में समान कोड की तलाश कर रहे हैं, तो आप कोटलिन कोड रेपो एनिमेटेड एफएबी मेनू चेकआउट कर सकते हैं ।
पहले अपने सभी FAB को उसी स्थान पर परिभाषित करें, ताकि वे एक-दूसरे को ओवरलैप करें, याद रखें कि FAB शीर्ष पर होना चाहिए कि आप क्लिक करना चाहते हैं और दूसरे को दिखाना चाहते हैं। उदाहरण के लिए:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_menu_camera" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_dialog_map" />
<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"
app:srcCompat="@android:drawable/ic_dialog_email" />
अब आपके जावा क्लास में अपने सभी FAB को परिभाषित करें और नीचे दिखाए गए क्लिक की तरह प्रदर्शन करें:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);
fab3 = (FloatingActionButton) findViewById(R.id.fab3);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isFABOpen){
showFABMenu();
}else{
closeFABMenu();
}
}
});
animation().translationY()अपने एफएबी को चेतन करने के लिए उपयोग करें , मैं आपको डीपी में इस पद्धति की विशेषता का उपयोग करना पसंद करता हूं क्योंकि केवल इंट का उपयोग करने से उच्च संकल्प या कम रिज़ॉल्यूशन के साथ प्रदर्शन संगतता प्रभावित होगी। जैसा की नीचे दिखाया गया:
private void showFABMenu(){
isFABOpen=true;
fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}
private void closeFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
अब Res के अंदर उपर्युक्त आयाम को परिभाषित करें-> मान-> dimens.xml जैसा कि नीचे दिखाया गया है:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
यह पूरी उम्मीद है कि यह समाधान भविष्य में उन लोगों की मदद करेगा, जो सरल समाधान खोज रहे हैं।
संपादित
यदि आप FAB पर लेबल जोड़ना चाहते हैं, तो बस एक क्षैतिज LinearLayout लें और FAB को टेक्स्टव्यू के रूप में लेबल के साथ डालें, और लेआउट्स को चेतन करें यदि ऐसा करने में कोई समस्या मिलती है, तो आप github में अपना नमूना कोड देख सकते हैं, मैंने सभी पिछड़े संगतता को संभाल लिया है उस नमूना कोड में समस्याएँ। Github में FABMenu के लिए मेरा नमूना कोड जांचें
बैकपैक पर FAB को बंद करने के लिए, नीचे दिखाए अनुसार onBackPress () को ओवरराइड करें:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
स्क्रीनशॉट में एफएबी के साथ शीर्षक भी है, क्योंकि मैं इसे अपने नमूना ऐप में मौजूद इन्थिथब से लेता हूं
