অ্যান্ড্রয়েড ডিজাইন লাইব্রেরি - ভাসমান অ্যাকশন বোতাম প্যাডিং / মার্জিন সমস্যা

Question

আমি গুগল ডিজাইন লাইব্রেরি থেকে নতুন ফ্লোটিংএকশনবাটনটি ব্যবহার করছি এবং আমি কিছু অদ্ভুত প্যাডিং / মার্জিন সমস্যা পাচ্ছি। এই চিত্রটি (বিকাশকারী বিন্যাসের বিকল্পগুলি সহ) এপিআই 22 এর।

এবং এপিআই 17 থেকে।

এটি এক্সএমএল

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_gravity="bottom|right"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="-32dp"
        android:src="@drawable/ic_action_add"
        app:fabSize="normal"
        app:elevation="4dp"
        app:borderWidth="0dp"
        android:layout_below="@+id/header"/>

কেন এপিআই 17 এ এফএবি এত বড় প্যাডিং / মার্জিন বুদ্ধিমান?

Comments

আমি CoordinatorLayoutএটিকে উল্লম্বভাবে সারিবদ্ধ করার জন্য এবং অতিরিক্ত প্যাডিং প্রাক-লোলিপপ আই আইবল ব্যবহার করার পরামর্শ দেব । আপনি decompiled FAB উৎস থেকে এটা চিন্তা পারে, কিন্তু আমি বরং গুগল এটি ঠিক করার জন্য তারা জন্য করেছিলাম অপেক্ষা করতাম CardView।

— দারিয়াসএল

Answer 1

আপডেট (অক্টোবর 2016):

এখনই সঠিক সমাধানটি app:useCompatPadding="true"আপনার ফ্লোটিংএ্যাকশনবটনে .োকানো। এটি বিভিন্ন এপিআই সংস্করণগুলির মধ্যে প্যাডিং সামঞ্জস্য করবে। যাইহোক, এটি এখনও ডিফল্ট মার্জিনকে কিছুটা কমিয়ে দিয়েছে বলে মনে হচ্ছে আপনার এগুলি সামঞ্জস্য করার প্রয়োজন হতে পারে। তবে কমপক্ষে এপিআই-নির্দিষ্ট স্টাইলগুলির আর প্রয়োজন নেই।

পূর্ববর্তী উত্তর:

আপনি এপিআই-নির্দিষ্ট স্টাইল ব্যবহার করে এটি সহজেই সম্পন্ন করতে পারেন। আপনার স্বাভাবিক ক্ষেত্রে values/styles.xml, এই জাতীয় কিছু রাখুন:

<style name="floating_action_button">
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

এবং তারপরে মানগুলি- v21 / styles.xML এর অধীনে, এটি ব্যবহার করুন:

<style name="floating_action_button">
    <item name="android:layout_margin">16dp</item>
</style>

এবং আপনার ভাসমানঅ্যাকশন বাটনে শৈলীটি প্রয়োগ করুন:

<android.support.design.widget.FloatingActionButton
...
style="@style/floating_action_button"
...
/>

অন্যরা যেমন উল্লেখ করেছেন, এপিআই <20 তে, বোতামটি তার নিজস্ব ছায়াকে রেন্ডার করে, যা ভিউর সামগ্রিক লজিকাল প্রস্থকে যুক্ত করে, যেখানে এপিআই> = 20 এ এটি নতুন এলিভেশন প্যারামিটার ব্যবহার করে যা দেখার প্রস্থে অবদান রাখে না।

Comments

বগি অ্যান্ড্রয়েড .. :(

— আব্দুল্লাহ শোয়েব

হাস্যকর কুরুচিপূর্ণ দেখায়, তবে মনে হয় এটির কোনও সমাধান নেই

— এগারো

ভাল উত্তর, আপনাকে ধন্যবাদ। আমি কি এটি সম্পাদনা করে ট্যাবলেটের জন্য একটি স্টাইল যুক্ত করার পরামর্শ দেব? এপিআই> = 20 এর জন্য, মার্জিনটি 24 ডিপি; এপিআই <20 এর জন্য আমি লক্ষ্য করেছি যে আপনার <আইটেম নাম = "অ্যান্ড্রয়েড: লেআউট_মার্জিনাইট রাইট"> 12 ডিপি </ i> <আইটেমের নাম = "অ্যান্ড্রয়েড: লেআউট_মারগিনবটম"> 6 ডিপি </item> প্রয়োজন । আমাকে এগুলি নিজেই গণনা করতে হয়েছিল, কারণ আমার অ্যাপটির জন্য আমার এটির প্রয়োজন ছিল। আপনি স্টাইলের পরিবর্তে ডাইমেনস রিসোর্সও ব্যবহার করতে পারেন ।

— জেজে 86

elevationআপনি এফএবিএবে সেট করে তার উপর নির্ভর করে মার্জিন নম্বরগুলি পৃথক হবে ।

— জ্যারেট মিল্লার্ড

ব্যবহারapp:useCompatPadding="true"

— কিশান বাঘেলা

Answer 2

ফাইলগুলির সাথে styles.xmlবা এর সাথে আর ফিডিং হয় না.java । আমাকে সহজ করে তুলি

আপনি অ্যান্ড্রয়েডের বিভিন্ন সংস্করণে একই মার্জিনapp:useCompatPadding="true" বজায় রাখতে কাস্টম মার্জিনগুলি ব্যবহার করতে এবং মুছে ফেলতে পারেন

অতিরিক্ত মার্জিন / প্যাডিং আপনার আপনার দ্বিতীয় ছবিতে FAB দেখেছি এই কারণে compatPadding উপর প্রাক Lollipop ডিভাইস। এই সম্পত্তি সেট না করা হয়, তাহলে এটি উপর প্রয়োগ পরার প্রাক lollopop ডিভাইস এবং না Lollipop + + ডিভাইসে।

ধারণার প্রমাণ

Comments

। প্রভূত জন্য সত্য ": যদি মূল বিন্যাস কার্ড দৃশ্য তাহলে আমরা" useCompatPadding = card_view "ব্যবহার করতে হবে

— অমিত তুমকুর

সমর্থন লাইব্রেরি ২৩.২ সংস্করণে উন্নীত করার পরে এটি আমার পক্ষে কাজ করে। ধন্যবাদ!

— পাবলো

আমি আপনার পিসিতে মার্জিনগুলি দেখতে পাচ্ছি।

— পেড্রো অলিভিরা

@ পেদ্রোলিভিরা হ্যাঁ, আপনি অ্যান্ড্রয়েডের সমস্ত সংস্করণে একই মার্জিনটি দেখতে পাবেন, যা আসলে উদ্দেশ্য the

— সারওয়ানবালাগী রামচন্দ্রন

আপনি বলছেন যে তিনি কাস্টমস মার্জিনগুলি সরিয়ে দিতে "এক্সএক্সএক্সএক্স" ব্যবহার করতে পারেন, এবং এখনও আপনার ধারণার প্রমাণটি সমস্ত মার্জিন দেখায়, যেমন ওপি জিজ্ঞাসা করেছিল।

— পেড্রো অলিভিরা

Answer 3

কয়েকবার অনুসন্ধান এবং পরীক্ষার সমাধানের পরে আমি আমার লিমিটেডটি কেবল আমার এক্সএমএল লেআউটে যুক্ত করে আমার সমস্যাটি ঠিক করেছি:

app:elevation="0dp"
app:pressedTranslationZ="0dp"

এবং এটি আমার পুরো ফ্লোট বোতামের বিন্যাস

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add"
        app:elevation="0dp"
        app:pressedTranslationZ="0dp"
        app:fabSize="normal" />

Comments

দুর্দান্ত, আমার পক্ষে কাজ করেছেন। না useCompatPaddingবা অন্য কিছু একই ফলাফল পায় না।

— বিজিপ্লে

আমি এই উত্তর একত্রিত করেছি বিক্রম এর

— ingkevin

Answer 4

ডিজাইন সমর্থন লাইব্রেরির মধ্যে একটি সমস্যা রয়েছে। গ্রন্থাগারটি আপডেট না হওয়া পর্যন্ত এই সমস্যাটি সমাধান করতে নীচের পদ্ধতিটি ব্যবহার করুন। সমস্যাটি সমাধান করার জন্য এই কোডটি আপনার ক্রিয়াকলাপে বা খণ্ডে যুক্ত করার চেষ্টা করুন। আপনার এক্সএমএল একই রাখুন। ললিপপ এবং উপরের কোনও মার্জিন নেই তবে নীচে 16dp এর মার্জিন রয়েছে।

কাজের উদাহরণ আপডেট করুন

এক্সএমএল - এফএবি একটি আপেক্ষিক লেআউটের মধ্যে রয়েছে

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@mipmap/ic_add"
    app:backgroundTint="@color/accent"
    app:borderWidth="0dp"
    app:elevation="4sp"/>

জাভা

FloatingActionButton mFab = (FloatingActionButton) v.findViewById(R.id.fab);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) mFab.getLayoutParams();
    p.setMargins(0, 0, dpToPx(getActivity(), 8), 0); // get rid of margins since shadow area is now the margin
    mFab.setLayoutParams(p);
}

Dp থেকে px এ রূপান্তর করুন

public static int dpToPx(Context context, float dp) {
    // Reference http://stackoverflow.com/questions/8309354/formula-px-to-dp-dp-to-px-android
    float scale = context.getResources().getDisplayMetrics().density;
    return (int) ((dp * scale) + 0.5f);
}

বাতাসা

প্রাক ললিপপ

Comments

এটি সঠিক উত্তর হওয়া উচিত। তবে, প্যাডিংটিও অনিশ্চিত হওয়ায় এটি সমস্যাটি 100% সমাধান করে না।

— জনিলম্বদা

পছন্দ করেছেন RelativeLayout.LayoutParamsকাস্ট করা যাবে না LayoutParamsএর FloatingActionButtonএবং আমি প্রাক Lollipop এ তে 16dp কোন মার্জিন দেখতে পাচ্ছি না। এর প্রস্থ FloatingActionButtonপ্রাক Lollipop এ 56dp পরিবর্তে 84dp এবং এটি উচ্চতা 98dp হয়।

— মার্কাস রুবে

@ মারকাসুরূবে আমি আমার উত্তরটি একটি কার্যকরী উদাহরণ এবং চিত্রগুলি সহ প্রাক ললিপপ এবং ললিপপ সংস্করণ প্রদর্শন করে আপডেট করব।

— ইউজিন এইচ

@ মারকাসুরূবি - ইউজিনের ক্ষেত্রে এটি যে ধরণের রয়েছে তার View.getLayoutParamsএকটি ফিরিয়ে দেয় । LayoutParamsViewRelativeLayout.LayoutParams

— জনিলম্বদা

@ ইউজেনএইচ আমি রিলেটিভলআউট.লায়আউটপ্যারামগুলিকে ভিউগ্রুপে পরিবর্তন করেছি ar এটি কোডটিকে আরও অনেক ক্ষেত্রে কার্যক্ষম করে তুলবে এবং মার্কাসুরবি যে সমস্যাটি নিয়ে আসে তা সংশোধন করবে।

— জনিলম্বদা

Answer 5

প্রাক ললিপপ FloatingActionButtonতার নিজস্ব ছায়া আঁকার জন্য দায়ী। সুতরাং ছায়ার জন্য জায়গা তৈরি করতে ভিউটি কিছুটা বড় হতে হবে। একটি সামঞ্জস্যপূর্ণ আচরণ পেতে আপনি উচ্চতা এবং প্রস্থের পার্থক্যের জন্য অ্যাকাউন্টে মার্জিন সেট করতে পারেন। আমি বর্তমানে নিম্নলিখিত ক্লাসটি ব্যবহার করছি :

import android.content.Context;
import android.content.res.TypedArray;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.ViewGroup.MarginLayoutParams;

import static android.os.Build.VERSION.SDK_INT;
import static android.os.Build.VERSION_CODES.LOLLIPOP;

import static android.support.design.R.styleable.FloatingActionButton;
import static android.support.design.R.styleable.FloatingActionButton_fabSize;
import static android.support.design.R.style.Widget_Design_FloatingActionButton;
import static android.support.design.R.dimen.fab_size_normal;
import static android.support.design.R.dimen.fab_size_mini;

public class CustomFloatingActionButton extends FloatingActionButton {

    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, FloatingActionButton, defStyleAttr,
                Widget_Design_FloatingActionButton);
        this.mSize = a.getInt(FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (SDK_INT < LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            MarginLayoutParams params = (MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    private final int getSizeDimension() {
        switch (this.mSize) {
            case 0: default: return this.getResources().getDimensionPixelSize(fab_size_normal);
            case 1: return this.getResources().getDimensionPixelSize(fab_size_mini);
        }
    }
}

আপডেট: অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরি ভি 23 এর নাম ফেব_সাইজ ডাইমেনস নামকরণ করেছেন:

import static android.support.design.R.dimen.design_fab_size_normal;
import static android.support.design.R.dimen.design_fab_size_mini;

Comments

আমি কেবলমাত্র আমার প্রকল্পটি অ্যান্ড্রয়েডএক্স-এ রিফ্যাক্ট করেছি এবং আমি আপনার উদাহরণ থেকে 3 য় নির্মাতা তৈরি করতে অক্ষম। আমি কীভাবে এন্ড্রয়েডএক্স লাইব্রেরি ব্যবহার করে এটি করতে পারি?

— অ্যালন শ্লাইডার

Answer 6

মার্ক 23 এর উত্তর v23.1.0 এ আপডেট করার পরে এবং আমদানিতে কিছু সামঞ্জস্য করার পরে আমার জন্য ভাল কাজ করেছে (সাম্প্রতিক গ্রেড প্লাগইন সহ আমরা ডিজাইন লাইব্রেরির আর এর পরিবর্তে আমাদের অ্যাপ আর ব্যবহার করি)। V23.1.0 এর জন্য কোডটি এখানে:

// Based on this answer: https://stackoverflow.com/a/30845164/1317564
public class CustomFloatingActionButton extends FloatingActionButton {
    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @SuppressLint("PrivateResource")
    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.FloatingActionButton, defStyleAttr,
                R.style.Widget_Design_FloatingActionButton);
        mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    @SuppressLint("PrivateResource")
    private int getSizeDimension() {
        switch (mSize) {
            case 1:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_mini);
            case 0:
            default:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_normal);
        }
    }
}

Comments

অ্যান্ড্রয়েডএক্সে রিফ্যাক্টর করার পরে আমি এই উদাহরণটি ব্যবহার করতে পারি না - 3 য় নির্মাতা আর সংকলন করেন না। ভুল কি জানো?

— অ্যালন শ্লাইডার

Answer 7

লেআউট ফাইল সেটটিতে অ্যাট্রিবিউট এলিভেশন 0 তে হয় কারণ এটি ডিফল্ট উচ্চতা নেয়।

app:elevation="0dp"

এখন ক্রিয়াকলাপে এপিআই স্তরটি 21 এরও বেশি চেক করুন এবং প্রয়োজনে উচ্চতা সেট করুন।

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    fabBtn.setElevation(10.0f);
}

Comments

আপনি ব্যবহার করেন, তাহলে compat লাইব্রেরি ব্যবহার setCompatElevation । এবং সরাসরি পিক্সেলের পরিবর্তে ডিপগুলি ব্যবহার করা ভাল।

— ইঙ্গকেভিন