ഈ വർഷം Google അവതരണങ്ങൾ I/O പുതിയതായി അവതരിപ്പിച്ചു ആൻഡ്രോയിഡ് പതിപ്പ് - എൽ. ഇതോടൊപ്പം, ഉപയോക്താക്കൾക്കും ഡെവലപ്പർമാർക്കുമായി നിരവധി പുതിയ ഗുഡികൾ അവതരിപ്പിച്ചു. എന്നാൽ പ്രധാന കണ്ടുപിടുത്തങ്ങളിലൊന്ന്, നിസ്സംശയമായും, പുതിയതായിരുന്നു Google പരിഹാരംഡിസൈൻ ഏകീകരിക്കാൻ - മെറ്റീരിയൽ ഡിസൈൻ.
മെറ്റീരിയൽ ഡിസൈൻ പാറ്റേണുകളിൽ ഒന്നാണ് ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ.
എന്താണ് ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ?
ഇത് "ഡ്രൈവിംഗ് പ്രവർത്തനത്തിന് അനുയോജ്യമായ രീതി" ആണെന്ന് ഗൂഗിൾ പറയുന്നു. ബട്ടണിന് തന്നെ ഇന്റർഫേസിന് മുകളിൽ പൊങ്ങിക്കിടക്കുന്ന ഒരു സർക്കിളിന്റെ ആകൃതിയുണ്ട്.
ഇത് ശ്രദ്ധിക്കേണ്ടതാണ്ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ ആപ്ലിക്കേഷനിലെ പ്രധാന പ്രവർത്തനം മാത്രം പ്രതിഫലിപ്പിക്കണം.
ദ്രുതവും വൃത്തികെട്ടതുമായ നടപ്പാക്കൽ
ഞാൻ സൃഷ്ടിക്കാൻ ആഗ്രഹിച്ചു പെട്ടെന്നുള്ള വഴിനിങ്ങൾക്കായി ഒരു ലളിതമായ FAB ചേർക്കുന്നു ആൻഡ്രോയിഡ് ആപ്ലിക്കേഷനുകൾ minSdkVersion = 14 (ഐസ് ക്രീം സാൻഡ്വിച്ച്). മങ്ങിപ്പോകുന്ന/അപ്രത്യക്ഷമാകുന്ന ആനിമേഷനുകളും ചെറിയ ബട്ടൺ കസ്റ്റമൈസേഷൻ ഓപ്ഷനുകളും ഞാൻ നടപ്പിലാക്കി.എല്ലാ കോഡും Github Gist-ൽ ലഭ്യമാണ് (നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് ഈ ക്ലാസ് ചേർക്കുക).
വിശ്വാസ്യതയ്ക്കായി, ഞാൻ ഇവിടെ കോഡ് ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യും
നിങ്ങളുടെ_പാക്കേജ് പാക്കേജ് ചെയ്യുക; android.animation.AnimatorSet ഇറക്കുമതി ചെയ്യുക; android.animation.ObjectAnimator ഇറക്കുമതി ചെയ്യുക; android.app.Activity ഇറക്കുമതി ചെയ്യുക; android.content.Context ഇറക്കുമതി ചെയ്യുക; android.graphics.Bitmap ഇറക്കുമതി ചെയ്യുക; android.graphics.Canvas ഇറക്കുമതി ചെയ്യുക; android.graphics.Color ഇറക്കുമതി ചെയ്യുക; android.graphics.Paint ഇറക്കുമതി ചെയ്യുക; android.graphics.drawable.BitmapDrawable ഇറക്കുമതി ചെയ്യുക; ഇറക്കുമതി ചെയ്യുക android.graphics.drawable.Drawable; android.view.Gravity ഇറക്കുമതി ചെയ്യുക; android.view.MotionEvent ഇറക്കുമതി ചെയ്യുക; android.view.View ഇറക്കുമതി ചെയ്യുക; android.view.ViewGroup ഇറക്കുമതി ചെയ്യുക; ഇറക്കുമതി android.view.animation.AccelerateInterpolator; android.view.animation.OvershootInterpolator ഇറക്കുമതി ചെയ്യുക; android.widget.FrameLayout ഇറക്കുമതി ചെയ്യുക; പൊതു ക്ലാസ് ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ കാഴ്ച വിപുലീകരിക്കുന്നു ( സന്ദർഭ സന്ദർഭം; പെയിന്റ് mButtonPaint; പെയിന്റ് mDrawablePaint; ബിറ്റ്മാപ്പ് mBitmap; boolean mHidden = false; പൊതു ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ(സന്ദർഭം) (സൂപ്പർ(സന്ദർഭം); this.context = സന്ദർഭം; init(Color.WHITE); ) പൊതു ശൂന്യമായ setFloatingActionButtonColor(int FloatingActionButtonColor) ( init(FloatingActionButtonColor); ) പൊതു ശൂന്യമായ സെറ്റ്FloatingActionButnColor ഭൂപടം = ((BitmapDrawable) FloatingActionButtonDrawable).getBitmap();അസാധുവാക്കുക(); ) പൊതു ശൂന്യമായ init(int FloatingActionButtonColor) (setWillNotDraw(false); setLayerType(View.LAYER_TYPE_SOFTWARE) ഫ്ലാഗ്); mButtonPaint. setColor(FloatingActionButtonColor); mButtonPaint.setStyle(Paint.Style.FILL); mButtonPaint.setShadowLayer(10.0f, 0.0f, 3.5f, Color.argb(100, 0, 0, 0)); mDrawable ANTI_ALIAS_FLAG); invalidate(); ) @Override പരിരക്ഷിത ശൂന്യത onDraw(Canvas canvas) ( setClickable(true); canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.6), mButtonPaint);canvas.drawBitmap(mBitmap, (getWidth() - mBitmap.getWidth()) / 2, (getHeight() - mBitmap.getHeight()) / 2, mDrawablePaint); ) @Override public boolean onTouchEvent(MotionEvent ഇവന്റ്) ((event.getAction() == MotionEvent.ACTION_UP) (setAlpha(1.0f); ) അല്ലാത്തപക്ഷം (event.getAction() == MotionEvent.ACTION_DOWN) (setAlpha(0.66) എഫ്); ഇത്, "scaleY", 1, 0); AnimatorSet animSetXY = പുതിയ AnimatorSet(); animSetXY.playTogether(scaleX, scaleY); animSetXY.setInterpolator(new AccelerateInterpolator()); animSetXY.setDuration(100) animtSetXY. ; mHidden = true; ) ) പൊതു ശൂന്യമായ ഷോFloatingActionButton() ((mHidden) ആണെങ്കിൽ (ObjectAnimator scaleX = ObjectAnimator.ofFloat(ഇത്, "സ്കെയിൽX", 0, 1); ObjectAnimator scaleY = ObjectAnimator.s,Float , 1); AnimatorSet animSetXY = പുതിയ AnimatorSet(); animSetXY.playTogether(scaleX, scaleY); animSetXY.setInterpolator(new OvershootInterpolator()); animSetXY.setDuration(200); animSetXY.start(); mHidden = false; ) പബ്ലിക് ബൂളിയൻ ഹിഡൻ() (റിട്ടേൺ mHidden; ) സ്റ്റാറ്റിക് പബ്ലിക് ക്ലാസ് ബിൽഡർ (സ്വകാര്യ ഫ്രെയിം ലേഔട്ട്. ലേഔട്ട് പാരാംസ് പാരാംസ്; പ്രൈവറ്റ് ഫൈനൽ പ്രവർത്തന പ്രവർത്തനം; int gravity = Gravity.BOTTOM | ഗ്രാവിറ്റി.റൈറ്റ്; // ഡിഫോൾട്ട് താഴെ വലത് വരയ്ക്കാവുന്ന ഡ്രോയബിൾ; int color = Color.WHITE; int വലിപ്പം = 0; ഫ്ലോട്ട് സ്കെയിൽ = 0; പൊതു ബിൽഡർ(പ്രവർത്തന സന്ദർഭം) ( സ്കെയിൽ = സന്ദർഭം.ഗെറ്റ് റിസോഴ്‌സ്().getDisplayMetrics() സാന്ദ്രത; // സാന്ദ്രത സ്കെയിലിനെ അടിസ്ഥാനമാക്കി dps-ലേക്ക് പിക്സൽ യൂണിറ്റുകളിലേക്ക് പരിവർത്തനം ചെയ്യാൻ കണക്കുകൂട്ടൽ (മൂല്യം * സ്കെയിൽ + 0.5f) വ്യാപകമായി ഉപയോഗിക്കുന്നു. // developer.android.com കാണുക (ഒന്നിലധികം സ്‌ക്രീൻ വലുപ്പങ്ങൾ പിന്തുണയ്ക്കുന്നു) വലുപ്പം = (int) (72 * സ്കെയിൽ + 0.5f); // ഡിഫോൾട്ട് വലുപ്പം 72dp-ൽ 72dp ആണ് = പുതിയ FrameLayout.LayoutParams(വലിപ്പം, വലുപ്പം); പാരാകൾ. ഗുരുത്വാകർഷണം = ഗുരുത്വാകർഷണം; this.activity = സന്ദർഭം; ) /** * FAB ന് ഗുരുത്വാകർഷണം സജ്ജീകരിക്കുന്നു */ ഗ്രാവിറ്റി (int gravity) (int gravity) (ഇത്. ഗുരുത്വാകർഷണം = ഗുരുത്വാകർഷണം; ഇത് തിരികെ നൽകുക; ) /** * എന്നതിനായുള്ള മാർജിനുകൾ സജ്ജമാക്കുന്നു FAB-ൽ dp */ പൊതു ബിൽഡർ with Margins (int left, int top, int right, int bottom) ( params.setMargins((int) (ഇടത് * സ്കെയിൽ + 0.5f), (int) (top * scale + 0.5f), (int) (വലത് * സ്കെയിൽ + 0.5f), (int) (താഴെ * സ്കെയിൽ + 0.5f)); ഇത് തിരികെ നൽകുക; വരയ്ക്കാവുന്ന = വരയ്ക്കാവുന്നത്; ഇത് തിരികെ നൽകുക; ഇത് തിരികെ നൽകുക; ) /** * ബട്ടൺസൈസ് (int വലുപ്പം) (വലിപ്പം = (int) (വലിപ്പം * സ്കെയിൽ + 0.5f); params = പുതിയ FrameLayout.LayoutParams (വലിപ്പം, വലുപ്പം) ഉപയോഗിച്ച് dp */ പൊതു ബിൽഡറിൽ FAB വലുപ്പം സജ്ജമാക്കുന്നു; പൊതു FloatingActionButton create() (അവസാനം FloatingActionButton ബട്ടൺ = പുതിയ FloatingActionButton(പ്രവർത്തനം); button.setFloatingActionButtonColor(this.color); button.setFloatingActionButtonDrawable(this.drawable); params.gravity = ഈ.ഗ്രാവിറ്റി റൂട്ട്; കാണുക .findViewById(android.R.id.content); root.addView(ബട്ടൺ, പാരാമുകൾ); റിട്ടേൺ ബട്ടൺ; ) )
XML-ൽ ഒരു ബട്ടൺ സൃഷ്‌ടിക്കുമ്പോൾ, ഞങ്ങളുടെ ബട്ടണിന്റെ വ്യൂ മറ്റ് കാഴ്ചകൾക്ക് മുകളിൽ (പ്രത്യേകിച്ച്, നാവിഗേഷൻ ഡ്രോയറിന് മുകളിൽ) സ്ഥാപിക്കുന്നതിൽ ചില ബുദ്ധിമുട്ടുകൾ ഞാൻ കണ്ടെത്തി. ബട്ടണിനെ പ്രോഗ്രമാറ്റിക്കായി നടപ്പിലാക്കാനും ബിൽഡർ പാറ്റേണിലൂടെ പ്രവർത്തിക്കാനും ഞാൻ തീരുമാനിച്ചു, ഇത് വിളിക്കുമ്പോൾ പ്രവർത്തനത്തിലെ മറ്റ് കാഴ്ചകൾക്ക് മുകളിൽ FAB സ്ഥാപിക്കാൻ അനുവദിക്കും. .സൃഷ്ടിക്കാൻ().
കൊള്ളാം! എന്നാൽ ഇത് എങ്ങനെ എന്റെ ആപ്ലിക്കേഷനിൽ ചേർക്കും?
ഒരു ഫ്ലോട്ടിംഗ് ആക്ഷൻ ബട്ടൺ ചേർക്കുന്നത് വളരെ ലളിതമാണ്:FloatingActionButton fabButton = പുതിയ FloatingActionButton.Builder(ഇത്) .withDrawable(yourDrawable) .withButtonColor(Color.WHITE) .withGravity(Gravity.BOTTOM | Gravity.RIGHT) .6(0cre,0cre,10cre,6)withMargin;
വിളിക്കുന്നതിലൂടെ ബട്ടൺ വലുപ്പം എളുപ്പത്തിൽ മാറ്റാനാകും .withButtonSize(int വലിപ്പം). ഡിഫോൾട്ട് 72dp ആണ്.
