ছায়া এবং ক্লিপ ভিউ তৈরি করুন

কম্পোজ পদ্ধতিটি চেষ্টা করুন
জেটপ্যাক কম্পোজ হলো অ্যান্ড্রয়েডের জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে কীভাবে থিমিং নিয়ে কাজ করতে হয় তা শিখুন।

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

একটি ভিউ-এর উচ্চতা, যা Z প্রপার্টি দ্বারা প্রকাশ করা হয়, তার ছায়ার দৃশ্যমান রূপ নির্ধারণ করে। উচ্চ Z মানের ভিউগুলো বড় ও নরম ছায়া ফেলে এবং নিম্ন Z মানের ভিউগুলোকে আড়াল করে। তবে, একটি ভিউ-এর Z মান তার আকারকে প্রভাবিত করে না।

একটি চিত্র যেখানে দেখানো হয়েছে কীভাবে একটি দৃশ্য উচ্চতা ছায়া তৈরি করে।
চিত্র ১. Z- অক্ষ বরাবর উচ্চতা এবং এর ফলে সৃষ্ট ছায়া।

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

অ্যানিমেশন তৈরি করতেও এলিভেশন উপযোগী, যেখানে উইজেটগুলো কোনো কাজ সম্পাদনের সময় সাময়িকভাবে ভিউ প্লেনের উপরে উঠে আসে।

আরও তথ্যের জন্য, ম্যাটেরিয়াল ডিজাইনে এলিভেশন দেখুন।

আপনার দৃশ্যগুলিতে উচ্চতা নির্ধারণ করুন।

একটি ভিউয়ের Z মানের দুটি উপাদান থাকে:

  • উচ্চতা: স্থির উপাদান
  • অনুবাদ: অ্যানিমেশনের জন্য ব্যবহৃত গতিশীল উপাদান

Z = elevation + translationZ

Z মান dp (ঘনত্ব-নিরপেক্ষ পিক্সেল) এককে পরিমাপ করা হয়।

ডিপি-তে বিভিন্ন উচ্চতার জন্য ভিন্ন ভিন্ন ছায়া দেখানো একটি ছবি।
চিত্র ২। dp-তে বিভিন্ন উচ্চতার জন্য বিভিন্ন ছায়া।

কোনো ভিউ-এর ডিফল্ট (স্থির) এলিভেশন সেট করতে, XML লেআউটে android:elevation অ্যাট্রিবিউটটি ব্যবহার করুন। কোনো অ্যাক্টিভিটির কোডে ভিউ-এর এলিভেশন সেট করতে, View.setElevation() মেথডটি ব্যবহার করুন।

কোনো ভিউ-এর অনুবাদ নির্ধারণ করতে, View.setTranslationZ() মেথডটি ব্যবহার করুন।

ViewPropertyAnimator.z() এবং ViewPropertyAnimator.translationZ() মেথডগুলো আপনাকে ভিউ-এর এলিভেশন অ্যানিমেট করতে দেয়। আরও তথ্যের জন্য, ViewPropertyAnimator এর API রেফারেন্স এবং প্রপার্টি অ্যানিমেশন ডেভেলপার গাইড দেখুন।

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

ভিউ শ্যাডো এবং আউটলাইন কাস্টমাইজ করুন

একটি ভিউ-এর ব্যাকগ্রাউন্ড ড্রয়েবলের সীমানা তার ছায়ার ডিফল্ট আকৃতি নির্ধারণ করে। আউটলাইন একটি গ্রাফিক্স অবজেক্টের বাইরের আকৃতিকে উপস্থাপন করে এবং টাচ ফিডব্যাকের জন্য রিপল এরিয়াকে সংজ্ঞায়িত করে।

নিম্নলিখিত ভিউটি বিবেচনা করুন, যা একটি ব্যাকগ্রাউন্ড ড্রয়েবল দিয়ে সংজ্ঞায়িত করা হয়েছে:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

ব্যাকগ্রাউন্ড ড্রয়েবলটিকে গোলাকার কোণাবিশিষ্ট একটি আয়তক্ষেত্র হিসেবে সংজ্ঞায়িত করা হয়েছে:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

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

আপনার কোডে কোনো ভিউ-এর জন্য একটি কাস্টম আউটলাইন নির্ধারণ করতে, নিম্নলিখিতগুলি করুন:

  1. ViewOutlineProvider ক্লাসটি প্রসারিত করুন।
  2. getOutline() মেথডটি ওভাররাইড করুন।
  3. View.setOutlineProvider() মেথড ব্যবহার করে আপনার ভিউতে নতুন আউটলাইন প্রোভাইডারটি অ্যাসাইন করুন।

Outline ক্লাসের মেথডগুলো ব্যবহার করে আপনি গোলাকার কোণাসহ ডিম্বাকৃতি এবং আয়তক্ষেত্রাকার আউটলাইন তৈরি করতে পারেন। ভিউ-এর জন্য ডিফল্ট আউটলাইন প্রোভাইডার ভিউ-এর ব্যাকগ্রাউন্ড থেকে আউটলাইনটি সংগ্রহ করে। কোনো ভিউ-এর ছায়া পড়া আটকাতে, এর আউটলাইন প্রোভাইডারকে null এ সেট করুন।

ক্লিপ ভিউ

ক্লিপিং ভিউ আপনাকে একটি ভিউ-এর আকৃতি পরিবর্তন করতে দেয়। আপনি অন্যান্য ডিজাইন উপাদানের সাথে সামঞ্জস্য রাখতে অথবা ব্যবহারকারীর ইনপুটের প্রতিক্রিয়ায় একটি ভিউ-এর আকৃতি পরিবর্তন করতে ভিউ ক্লিপ করতে পারেন। আপনি View.setClipToOutline() মেথড ব্যবহার করে একটি ভিউকে তার আউটলাইন এলাকায় ক্লিপ করতে পারেন। Outline.canClip() মেথড দ্বারা নির্ধারিত অনুযায়ী, শুধুমাত্র আয়তক্ষেত্র, বৃত্ত এবং গোলাকার আয়তক্ষেত্রের আউটলাইনগুলোই ক্লিপিং সমর্থন করে।

কোনো ভিউকে একটি ড্রয়েবলের আকারে ক্লিপ করতে, পূর্ববর্তী উদাহরণে দেখানো অনুযায়ী ড্রয়েবলটিকে ভিউটির ব্যাকগ্রাউন্ড হিসেবে সেট করুন এবং View.setClipToOutline() মেথডটি কল করুন।

ভিউ ক্লিপিং একটি ব্যয়বহুল প্রক্রিয়া, তাই ভিউ ক্লিপ করার জন্য ব্যবহৃত শেপটিকে অ্যানিমেট করবেন না। এই ইফেক্টটি পেতে রিভিল অ্যানিমেশন ব্যবহার করুন।