অন্যান্য উপাদানগুলি অবরুদ্ধ করা থেকে আমি কীভাবে আমার ভাসমান অ্যাকশন বোতামটি রাখব?

Question

গুগলের নতুন মেটালিয়াল ডিজাইনটি সেই স্ক্রিনে মূল ক্রিয়াটির জন্য ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে ভাসমান অ্যাকশন বোতাম ব্যবহার করার পরামর্শ দেয়। একটি তালিকার দৃশ্যের মধ্যে এর বেশ কয়েকটি উদাহরণ রয়েছে।

এখন, ধরুন আপনার তালিকা ভিউতে স্ক্রোলটি অসম্ভব করে তোলে স্ক্রিনটি পূরণ করার জন্য পর্যাপ্ত পরিমাণে আইটেম রয়েছে। যদি আপনার তালিকার আইটেমগুলির একটি নির্দিষ্ট উপাদান থাকে যা ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারে, উদাহরণস্বরূপ একটি স্যুইচ বা প্রিয় তারকার, এটি সম্ভব যে ভাসমান ক্রিয়া বোতামটি এই উপাদানটিকে অবরুদ্ধ করছে। আমাদের এই মামলাটি কীভাবে পরিচালনা করা উচিত?

সম্পাদনা: এটি সর্বদা তালিকার শেষ আইটেমটির সাথে ঘটে। এখানে একটি প্রিয় উদাহরণ যেখানে 'প্রিয়-তারকা' সঠিকভাবে ব্যবহার করা যায় না। এটি বিষয়বস্তু যেমন: এই উদাহরণস্বরূপ অবরুদ্ধ করে।

Answer 1

আপনি এটি পরিচালনা করতে কিছু আলাদা উপায় রয়েছে।

1. বোতামের নীচে অত্যাবশ্যক সামগ্রী রাখবেন না

   এটি সবচেয়ে সুস্পষ্ট পদ্ধতির এবং সম্ভবত সবচেয়ে সাধারণ general যখনই সম্ভব, আপনার ডিজাইনের কাঠামোটি নিশ্চিত করুন যাতে অন্যান্য বোতাম, প্রধান সামগ্রী ইত্যাদির মতো অ্যাকশন বোতামের নীচে গুরুত্বপূর্ণ কিছু নেই is

   আপনি প্যাডিং বা ফাঁকা এন্ট্রি ব্যবহার করে সামগ্রীকে ফর্ম্যাট করে অতিরিক্ত স্থান যুক্ত করতে পারেন যাতে গুরুত্বপূর্ণ বিষয়গুলি বোতাম যেখানে থাকবে না বা অন্য কোনও জিনিস - এটি আপনার পছন্দসই সামগ্রী এবং ডিজাইনের উপর নির্ভর করে।

2. বোতামটি পুনরায় স্থানান্তর করুন

   অ্যাকশন বোতামটি নীচে ডানদিকে থাকতে হবে না। আপনার ডিজাইনের উপর নির্ভর করে এটিকে অন্য কোনও জায়গায় স্থাপন করা আরও বোধগম্য হতে পারে। আমি মনে করি নীচের উদাহরণগুলি এটি বেশ ভাল করে।

   গুগল কেবল তাদের উপাদান নকশা গাইড আপডেট করেছে এবং কেবলমাত্র একটি ভাসমান অ্যাকশন বোতামের জন্য একটি পৃষ্ঠা তৈরি করেছে যা এটি দেখায় যে এটি বিভিন্ন স্থানে ব্যবহৃত হচ্ছে এবং অ্যানিমেশন ছাড়াও আকার পরিবর্তন করছে (নীচে সম্পর্কে কথা বলেছেন)।

_{রেডডিট নিউজ প্রো থেকে প্রথম চিত্র । মার্ক ডিস্কুল্লোর দ্বিতীয় চিত্র ।}

3. সারাক্ষণ বোতামটি দেখাবেন না

   কখনও কখনও অ্যাকশন বোতামটি এতটা গুরুত্বপূর্ণ না যে এটি সর্বদা দেখা দরকার। এর মতো ক্ষেত্রে, এটিকে স্ক্রলে লুকিয়ে রাখার সময় বা স্ক্রোল করার সময় তা বোধগম্য হতে পারে। যদি এবং কীভাবে আপনি তা বিষয়বস্তু এবং ডিজাইনের উপর নির্ভর করে তবে সমস্ত অ্যাপ্লিকেশনের জন্য কোনও উত্তরই সত্য নয়।

   গুগলের আপডেট হওয়া গাইডলাইনগুলি নীচের চিত্রটির মতো স্লাইডিংয়ের পরিবর্তে পুরো জিনিসটি স্কেল করে ভিতরে এবং বাইরে বোতামটি অ্যানিমেট করার একটি সংস্করণ দেখায় ।

_{ভাসমান অ্যাকশন থেকে চিত্র ।}

Answer 2

কিছুটা সরলতর হতে পারে এবং সবচেয়ে মার্জিত সমাধান নয়, তবে: তালিকার শেষে একটি ফাঁকা 'ডামি' এন্ট্রি যুক্ত করুন, যাতে ব্যবহারকারী শেষ প্রবেশের চেয়ে আরও স্ক্রোল করতে পারে।

Comments

এটি "অফিসিয়াল" সমাধান হিসাবে বিবেচিত হতে পারে, কারণ Gmail অ্যাপ্লিকেশন এটি ব্যবহার করে।

— ভিকি চিজওয়ানি

এছাড়াও, আপনি ডামি এন্ট্রির পরিবর্তে "তালিকার নীচে প্যাডিং" বলতে পারেন (যা আপনি দেখিয়েছেন, অবর্ণনীয় শোনায়)।

— ভিকি চিজওয়ানি

Answer 3

এটি আমার জন্য কাজ করে। রিসাইক্লিউউতে নীচে প্যাডিং যুক্ত করুন

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

রেফ: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Answer 4

গৃহীত উত্তরে "পুনরায় স্থান পরিবর্তন করুন" ধারণাটি স্থির করে, উপাদান নকশা নির্দেশিকাগুলির অংশবিধ স্ক্রোলিং ধারণার একটি সম্ভাব্য বাস্তবায়ন রয়েছে।

যথা, ভাসমান অ্যাকশন বোতামটি নমনীয় স্থান সহ সামগ্রী এবং একটি অ্যাপ বারের মধ্যে প্রান্তটি ভেঙে দেয় । স্ক্রোল করার সময়:

নমনীয় স্থানটি কেবলমাত্র সরঞ্জামদণ্ড অবধি অবধি সঙ্কুচিত থাকে। পৃষ্ঠার শীর্ষে স্ক্রোল করার সময়, নমনীয় স্থানটি আবার জায়গায় যায়।

ভাসমান অ্যাকশন বোতামটি স্ক্রিনে উপাদানের বিস্তৃত অংশ হিসাবে অ্যানিমেট করে।

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

Answer 5

তালিকার শেষ আইটেমের নীচের প্রান্তটি 72২dp এ সেট করতে আমি এটি একটি রিসাইক্লার ভিউ.এডাপ্টারের অনবিন্দভিউহোল্ডার পদ্ধতিতে ব্যবহার করেছি যাতে এটি ভাসমান অ্যাকশন বোতামের উপরে স্ক্রোল করে।

এটি তালিকায় একটি ডামি প্রবেশের প্রয়োজন নেই।

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

Comments

আমার জন্য কাজ কর :).

— ওডব্লিউএল