কাস্টম ভিউ তৈরি করা

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

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

এই সিরিজের কোডল্যাবগুলি হল:

• 2.1 কাস্টম ভিউ তৈরি করা
• 2.2 ক্যানভাস বস্তুর উপর অঙ্কন
• 2.3 ক্যানভাস অবজেক্ট ক্লিপিং
• 2.4 শেডার দিয়ে প্রভাব তৈরি করা [TBD]

ভূমিকা

অ্যান্ড্রয়েড View সাবক্লাসের একটি বড় সেট অফার করে, যেমন Button , ImageView , RadioButton টেক্সট , TextView , CheckBox , বা EditText ৷ আপনি একটি UI তৈরি করতে এই সাবক্লাসগুলি ব্যবহার করতে পারেন যা ব্যবহারকারীর মিথস্ক্রিয়া সক্ষম করে এবং আপনার অ্যাপে তথ্য প্রদর্শন করে। View সাবক্লাসের কোনোটিই যদি আপনার চাহিদা পূরণ না করে, তাহলে আপনি একটি View সাবক্লাস তৈরি করতে পারেন যা কাস্টম ভিউ নামে পরিচিত।

একটি কাস্টম ভিউ তৈরি করতে আপনি হয় একটি বিদ্যমান View সাবক্লাস প্রসারিত করতে পারেন (যেমন একটি Button বা EditText ), অথবা View -এর নিজস্ব সাবক্লাস তৈরি করতে পারেন। View সরাসরি প্রসারিত করার মাধ্যমে, আপনি ভিউটি আঁকার জন্য View onDraw() পদ্ধতিটিকে ওভাররাইড করে যেকোনো আকার এবং আকৃতির একটি ইন্টারেক্টিভ UI উপাদান তৈরি করতে পারেন।

আপনি একটি কাস্টম ভিউ তৈরি করার পরে, আপনি এটিকে আপনার অ্যাক্টিভিটি লেআউটে যোগ করতে পারেন যেভাবে আপনি একটি TextView বা Button যোগ করবেন।

এই পাঠটি আপনাকে দেখায় কিভাবে View প্রসারিত করে স্ক্র্যাচ থেকে একটি কাস্টম ভিউ তৈরি করতে হয়।

আপনি ইতিমধ্যে কি জানা উচিত

• কীভাবে একটি অ্যাক্টিভিটি সহ একটি অ্যাপ তৈরি করবেন এবং অ্যান্ড্রয়েড স্টুডিও ব্যবহার করে এটি চালাবেন।

আপনি কি শিখবেন

• একটি কাস্টম ভিউ তৈরি করতে View কীভাবে প্রসারিত করবেন।
• বৃত্তাকার আকারে একটি কাস্টম ভিউ কীভাবে আঁকবেন।
• কাস্টম ভিউয়ের সাথে ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করতে শ্রোতাদের কীভাবে ব্যবহার করবেন।
• একটি লেআউটে একটি কাস্টম ভিউ কীভাবে ব্যবহার করবেন।

আপনি কি করবেন

• একটি কাস্টম ভিউ তৈরি করতে View প্রসারিত করুন।
• অঙ্কন এবং পেইন্টিং মান সহ কাস্টম ভিউ শুরু করুন।
• ভিউ আঁকতে onDraw() ওভাররাইড করুন।
• কাস্টম ভিউ এর আচরণ প্রদান করতে শ্রোতাদের ব্যবহার করুন।
• একটি লেআউটে কাস্টম ভিউ যোগ করুন।

CustomFanController অ্যাপটি দেখায় কিভাবে View ক্লাস প্রসারিত করে একটি কাস্টম ভিউ সাবক্লাস তৈরি করা যায়। নতুন সাবক্লাসটিকে DialView বলা হয়।

অ্যাপটি একটি বৃত্তাকার UI উপাদান প্রদর্শন করে যা একটি ফিজিক্যাল ফ্যান কন্ট্রোলের মতো, অফ (0), কম (1), মাঝারি (2) এবং উচ্চ (3) এর সেটিংস সহ। যখন ব্যবহারকারী ভিউতে ট্যাপ করে, নির্বাচন সূচকটি পরবর্তী অবস্থানে চলে যায়: 0-1-2-3, এবং 0-এ ফিরে যায়। এছাড়াও, নির্বাচন 1 বা তার বেশি হলে, ভিউয়ের বৃত্তাকার অংশের পটভূমির রঙ ধূসর থেকে সবুজে পরিবর্তন (ফ্যান পাওয়ার চালু আছে তা নির্দেশ করে)।

ভিউ হল একটি অ্যাপের UI এর মৌলিক বিল্ডিং ব্লক। View ক্লাস অনেকগুলি সাবক্লাস সরবরাহ করে, যাকে UI উইজেট হিসাবে উল্লেখ করা হয়, যা একটি সাধারণ অ্যান্ড্রয়েড অ্যাপের ব্যবহারকারী ইন্টারফেসের অনেক চাহিদা পূরণ করে।

UI বিল্ডিং ব্লক যেমন Button এবং TextView হল সাবক্লাস যা View ক্লাস প্রসারিত করে। সময় এবং উন্নয়ন প্রচেষ্টা বাঁচাতে, আপনি এই View সাবক্লাসগুলির মধ্যে একটি প্রসারিত করতে পারেন। কাস্টম ভিউ তার পিতামাতার চেহারা এবং আচরণের উত্তরাধিকারী হয় এবং আপনি যে চেহারাটি পরিবর্তন করতে চান তার আচরণ বা দিকটিকে ওভাররাইড করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি কাস্টম ভিউ তৈরি করতে EditText প্রসারিত করেন, তাহলে ভিউটি একটি EditText মতো কাজ করে, কিন্তু এটি দেখানোর জন্যও কাস্টমাইজ করা যেতে পারে, উদাহরণস্বরূপ, একটি X বোতাম যা টেক্সট এন্ট্রি ফিল্ড থেকে টেক্সট সাফ করে।

আপনি যেকোন View সাবক্লাস প্রসারিত করতে পারেন, যেমন EditText , একটি কাস্টম ভিউ পেতে—আপনি যা করতে চান তার সবচেয়ে কাছের একটি বেছে নিন। তারপরে আপনি বৈশিষ্ট্য সহ একটি XML উপাদান হিসাবে এক বা একাধিক লেআউটে অন্যান্য View সাবক্লাসের মতো কাস্টম ভিউ ব্যবহার করতে পারেন।

স্ক্র্যাচ থেকে আপনার নিজস্ব কাস্টম ভিউ তৈরি করতে, View ক্লাস নিজেই প্রসারিত করুন। আপনার কোড দৃশ্যের চেহারা এবং কার্যকারিতা সংজ্ঞায়িত করতে View পদ্ধতিগুলিকে ওভাররাইড করে৷ আপনার নিজস্ব কাস্টম ভিউ তৈরি করার মূল চাবিকাঠি হল যে কোনও আকার এবং আকৃতির পুরো UI উপাদানটি স্ক্রিনে আঁকার জন্য আপনি দায়ী৷ আপনি যদি একটি বিদ্যমান ভিউ যেমন Button এর সাবক্লাস করেন, তাহলে সেই ক্লাসটি আপনার জন্য অঙ্কন পরিচালনা করে। (আপনি এই কোডল্যাবে পরে অঙ্কন সম্পর্কে আরও শিখবেন।)

একটি কাস্টম ভিউ তৈরি করতে এই সাধারণ পদক্ষেপগুলি অনুসরণ করুন:

• একটি কাস্টম ভিউ ক্লাস তৈরি করুন যা ভিউকে প্রসারিত করে বা একটি View EditText প্রসারিত করে (যেমন Button বা সম্পাদনা View )।
• আপনি যদি একটি বিদ্যমান View সাবক্লাস প্রসারিত করেন, তবে আপনি পরিবর্তন করতে চান এমন আচরণ বা চেহারার দিকগুলিকে ওভাররাইড করুন৷
• আপনি যদি View ক্লাসটি প্রসারিত করেন, কাস্টম ভিউ এর আকৃতি আঁকুন এবং নতুন ক্লাসে onDraw() এবং onMeasure() এর মত View পদ্ধতিগুলিকে ওভাররাইড করে এর চেহারা নিয়ন্ত্রণ করুন।
• ব্যবহারকারীর ইন্টারঅ্যাকশনে সাড়া দিতে কোড যোগ করুন এবং প্রয়োজনে কাস্টম ভিউ পুনরায় আঁকুন।
• আপনার কার্যকলাপের XML লেআউটে একটি UI উইজেট হিসাবে কাস্টম ভিউ ক্লাস ব্যবহার করুন। আপনি ভিউয়ের জন্য কাস্টম বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করতে পারেন, বিভিন্ন লেআউটে দৃশ্যের জন্য কাস্টমাইজেশন প্রদান করতে।

এই কাজটিতে আপনি করবেন:

• কাস্টম ভিউয়ের জন্য একটি অস্থায়ী স্থানধারক হিসাবে একটি ImageView সহ একটি অ্যাপ তৈরি করুন।
• কাস্টম ভিউ তৈরি করতে View প্রসারিত করুন।
• অঙ্কন এবং পেইন্টিং মান সহ কাস্টম ভিউ শুরু করুন।

ধাপ 1: একটি ImageView প্লেসহোল্ডার দিয়ে একটি অ্যাপ তৈরি করুন

1. খালি কার্যকলাপ টেমপ্লেট ব্যবহার করে CustomFanController শিরোনাম সহ একটি Kotlin অ্যাপ তৈরি করুন। নিশ্চিত করুন প্যাকেজের নাম com.example.android.customfancontroller ।
2. XML কোড সম্পাদনা করতে টেক্সট ট্যাবে activity_main.xml খুলুন।
3. এই কোড দিয়ে বিদ্যমান TextView প্রতিস্থাপন করুন। এই পাঠ্যটি কাস্টম দৃশ্যের জন্য কার্যকলাপের একটি লেবেল হিসাবে কাজ করে।

<TextView
       android:id="@+id/customViewLabel"
       android:textAppearance="@style/Base.TextAppearance.AppCompat.Display3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="16dp"
       android:textColor="@android:color/black"
       android:layout_marginStart="8dp"
       android:layout_marginEnd="8dp"
       android:layout_marginTop="24dp"
       android:text="Fan Control"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

4. লেআউটে এই ImageView উপাদান যোগ করুন। এই কোডল্যাবে আপনি যে কাস্টম ভিউ তৈরি করবেন তার জন্য এটি একটি স্থানধারক।

<ImageView
       android:id="@+id/dialView"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:background="@android:color/darker_gray"
       app:layout_constraintTop_toBottomOf="@+id/customViewLabel"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       android:layout_marginLeft="8dp"
       android:layout_marginRight="8dp"
       android:layout_marginTop="8dp"/>

5. উভয় UI এলিমেন্টে স্ট্রিং এবং ডাইমেনশন রিসোর্স বের করুন।
6. ডিজাইন ট্যাবে ক্লিক করুন। লেআউটটি এইরকম হওয়া উচিত:

ধাপ 2. আপনার কাস্টম ভিউ ক্লাস তৈরি করুন

1. DialView নামে একটি নতুন কোটলিন ক্লাস তৈরি করুন।
2. View প্রসারিত করতে শ্রেণী সংজ্ঞা পরিবর্তন করুন। অনুরোধ করা হলে android.view.View আমদানি করুন।
3. View ক্লিক করুন এবং তারপরে লাল বাল্বে ক্লিক করুন। '@JvmOverloads' ব্যবহার করে Android ভিউ কনস্ট্রাক্টর যোগ করুন বেছে নিন। অ্যান্ড্রয়েড স্টুডিও View ক্লাস থেকে কনস্ট্রাক্টর যোগ করে। @JvmOverloads টীকাটি এই ফাংশনের জন্য ওভারলোড তৈরি করতে Kotlin কম্পাইলারকে নির্দেশ দেয় যা ডিফল্ট প্যারামিটার মান প্রতিস্থাপন করে।

class DialView @JvmOverloads constructor(
   context: Context,
   attrs: AttributeSet? = null,
   defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

4. DialView ক্লাস সংজ্ঞার উপরে, আমদানির ঠিক নীচে, উপলব্ধ ফ্যানের গতি উপস্থাপন করতে একটি শীর্ষ-স্তরের enum যোগ করুন। মনে রাখবেন যে এই enum টি Int টাইপের কারণ মানগুলি প্রকৃত স্ট্রিংয়ের পরিবর্তে স্ট্রিং সংস্থান। অ্যান্ড্রয়েড স্টুডিও এই মানগুলির প্রতিটিতে অনুপস্থিত স্ট্রিং সংস্থানগুলির জন্য ত্রুটি দেখাবে; আপনি পরবর্তী ধাপে এটি ঠিক করবেন।

private enum class FanSpeed(val label: Int) {
   OFF(R.string.fan_off),
   LOW(R.string.fan_low),
   MEDIUM(R.string.fan_medium),
   HIGH(R.string.fan_high);
}

5. enum এর নিচে এই ধ্রুবক যোগ করুন। আপনি ডায়াল সূচক এবং লেবেল আঁকার অংশ হিসাবে এগুলি ব্যবহার করবেন।

private const val RADIUS_OFFSET_LABEL = 30      
private const val RADIUS_OFFSET_INDICATOR = -35

6. DialView ক্লাসের ভিতরে, কাস্টম ভিউ আঁকতে আপনার প্রয়োজনীয় কয়েকটি ভেরিয়েবল সংজ্ঞায়িত করুন। অনুরোধ করা হলে android.graphics.PointF আমদানি করুন।

private var radius = 0.0f                   // Radius of the circle.
private var fanSpeed = FanSpeed.OFF         // The active selection.
// position variable which will be used to draw label and indicator circle position
private val pointPosition: PointF = PointF(0.0f, 0.0f)

• radius হল বৃত্তের বর্তমান ব্যাসার্ধ । স্ক্রীনে ভিউ আঁকা হলে এই মান সেট করা হয়।
• ফ্যানস্পীড হল ফ্যানের বর্তমান গতি fanSpeed যা FanSpeed গণনার একটি মান। ডিফল্টরূপে সেই মানটি OFF ।
• অবশেষে postPosition হল একটি X,Y পয়েন্ট যা পর্দায় ভিউ এর বিভিন্ন উপাদান আঁকার জন্য ব্যবহার করা হবে।

প্রকৃত অঙ্কন ধাপ যত দ্রুত সম্ভব সঞ্চালিত হয় তা নিশ্চিত করার জন্য এই মানগুলি এখানে তৈরি এবং আরম্ভ করা হয়েছে দৃশ্যটি আসলে আঁকা হওয়ার পরিবর্তে।

7. এছাড়াও DialView ক্লাস সংজ্ঞার ভিতরে, কয়েকটি মৌলিক শৈলী সহ একটি Paint অবজেক্ট শুরু করুন। অনুরোধ করা হলে android.graphics.Paint এবং android.graphics.Typeface আমদানি করুন। ভেরিয়েবলের সাথে পূর্বের মত, অঙ্কন ধাপের গতি বাড়ানোর জন্য এই শৈলীগুলি এখানে শুরু করা হয়েছে।

private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
   style = Paint.Style.FILL
   textAlign = Paint.Align.CENTER
   textSize = 55.0f
   typeface = Typeface.create( "", Typeface.BOLD)
}

8. res/values/strings.xml খুলুন এবং ফ্যানের গতির জন্য স্ট্রিং সংস্থান যোগ করুন:

<string name="fan_off">off</string>
<string name="fan_low">1</string>
<string name="fan_medium">2</string>
<string name="fan_high">3</string>

একবার আপনি একটি কাস্টম ভিউ তৈরি করলে, আপনাকে এটি আঁকতে সক্ষম হতে হবে। আপনি যখন একটি View সাবক্লাস প্রসারিত করেন যেমন EditText , তখন সেই সাবক্লাসটি দৃশ্যের উপস্থিতি এবং বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে এবং নিজেকে পর্দায় আঁকে। ফলস্বরূপ, ভিউ আঁকার জন্য আপনাকে কোড লিখতে হবে না। পরিবর্তে আপনার ভিউ কাস্টমাইজ করতে আপনি অভিভাবকের পদ্ধতিগুলিকে ওভাররাইড করতে পারেন৷

আপনি যদি স্ক্র্যাচ থেকে আপনার নিজস্ব ভিউ তৈরি করেন ( View প্রসারিত করে), আপনি প্রতিবার স্ক্রীন রিফ্রেশ করার সময় সম্পূর্ণ ভিউ আঁকার জন্য এবং অঙ্কন পরিচালনাকারী View পদ্ধতিগুলিকে ওভাররাইড করার জন্য দায়ী। একটি কাস্টম View সঠিকভাবে আঁকতে যা ভিউকে প্রসারিত করে, আপনাকে এটি করতে হবে:

• ভিউটির আকার গণনা করুন যখন এটি প্রথম প্রদর্শিত হয় এবং প্রতিবার সেই ভিউটির আকার পরিবর্তন হয়, onSizeChanged() পদ্ধতিটি ওভাররাইড করে।
• একটি Paint অবজেক্ট দ্বারা স্টাইল করা Canvas অবজেক্ট ব্যবহার করে কাস্টম ভিউ আঁকতে onDraw() পদ্ধতিটি ওভাররাইড করুন।
• একটি ব্যবহারকারীর ক্লিকের প্রতিক্রিয়া করার সময় invalidate() পদ্ধতিতে কল করুন যা সম্পূর্ণ ভিউকে অবৈধ করতে ভিউটি কীভাবে আঁকা হয় তা পরিবর্তন করে, যার ফলে ভিউটি পুনরায় আঁকতে onDraw() কল করতে বাধ্য হয়।

প্রতিবার স্ক্রিন রিফ্রেশ করার সময় onDraw() পদ্ধতিটি বলা হয়, যা সেকেন্ডে বহুবার হতে পারে। পারফরম্যান্সের কারণে এবং ভিজ্যুয়াল গ্লিচ এড়াতে, আপনার যতটা সম্ভব কম কাজ করা উচিত onDraw() । বিশেষ করে, onDraw() এ বরাদ্দ রাখবেন না, কারণ বরাদ্দের ফলে আবর্জনা সংগ্রহ হতে পারে যা দৃশ্যমান তোতলামির কারণ হতে পারে।

Canvas এবং Paint ক্লাসগুলি বেশ কয়েকটি দরকারী অঙ্কন শর্টকাট অফার করে:

• drawText() ব্যবহার করে পাঠ্য আঁকুন। setTypeface() কল করে টাইপফেস এবং setColor() কল করে টেক্সটের রঙ নির্দিষ্ট করুন।
• drawRect() , drawOval() এবং drawArc() ব্যবহার করে আদিম আকার আঁকুন। setStyle() কল করে আকারগুলি ভরা, রূপরেখা বা উভয়ই পরিবর্তন করুন।
• drawBitmap() ব্যবহার করে বিটম্যাপ আঁকুন।

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

আপনি পরবর্তী কোডল্যাবে Canvas এবং Paint সম্পর্কে আরও শিখবেন। অ্যান্ড্রয়েড কীভাবে ভিউ আঁকে সে সম্পর্কে আরও জানতে, দেখুন অ্যান্ড্রয়েড কীভাবে ভিউ আঁকে ।

এই টাস্কে আপনি ফ্যান কন্ট্রোলার কাস্টম ভিউটি স্ক্রিনে আঁকবেন — ডায়াল নিজেই, বর্তমান অবস্থান নির্দেশক, এবং সূচক লেবেলগুলি — onSizeChanged() এবং onDraw() পদ্ধতিগুলির সাথে৷ এছাড়াও আপনি একটি সহায়ক পদ্ধতি তৈরি করবেন, computeXYForSpeed(), , ডায়ালে নির্দেশক লেবেলের বর্তমান X,Y অবস্থান গণনা করতে।

ধাপ 1. অবস্থান গণনা করুন এবং দৃশ্য আঁকুন

1. DialView ক্লাসে, প্রারম্ভিকতার নীচে, কাস্টম ভিউ এর ডায়ালের আকার গণনা করতে View ক্লাস থেকে onSizeChanged() পদ্ধতিটি ওভাররাইড করুন। kotlin আমদানি করুন। অনুরোধ করা হলে math.min .
   
   onSizeChanged() পদ্ধতিটিকে বলা হয় যে কোনো সময় দৃশ্যের আকার পরিবর্তন হয়, যার মধ্যে লেআউটটি স্ফীত হওয়ার সময় প্রথমবার আঁকা হয়। অবস্থান, মাত্রা, এবং আপনার কাস্টম ভিউ এর আকারের সাথে সম্পর্কিত অন্য কোনো মান গণনা করতে onSizeChanged() ওভাররাইড করুন, প্রতিবার আপনি আঁকার সময় সেগুলি পুনরায় গণনা করার পরিবর্তে। এই ক্ষেত্রে আপনি ডায়ালের বৃত্ত উপাদানের বর্তমান ব্যাসার্ধ গণনা করতে onSizeChanged() ব্যবহার করেন।

override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
   radius = (min(width, height) / 2.0 * 0.8).toFloat()
}

2. onSizeChanged() নীচে, PointF এর জন্য একটি PointF computeXYForSpeed() এক্সটেনশন ফাংশন সংজ্ঞায়িত করতে এই কোডটি যোগ করুন ক্লাস অনুরোধ করা হলে kotlin.math.cos এবং kotlin.math.sin আমদানি করুন। PointF ক্লাসে এই এক্সটেনশন ফাংশনটি বর্তমান FanSpeed অবস্থান এবং ডায়ালের ব্যাসার্ধের ভিত্তিতে পাঠ্য লেবেল এবং বর্তমান নির্দেশকের (0, 1, 2, বা 3) জন্য স্ক্রিনে X, Y স্থানাঙ্ক গণনা করে। আপনি এটি onDraw().

private fun PointF.computeXYForSpeed(pos: FanSpeed, radius: Float) {
   // Angles are in radians.
   val startAngle = Math.PI * (9 / 8.0)   
   val angle = startAngle + pos.ordinal * (Math.PI / 4)
   x = (radius * cos(angle)).toFloat() + width / 2
   y = (radius * sin(angle)).toFloat() + height / 2
}

3. Canvas এবং Paint ক্লাস সহ স্ক্রিনে ভিউ রেন্ডার করতে onDraw() পদ্ধতিটি ওভাররাইড করুন। অনুরোধ করা হলে android.graphics.Canvas আমদানি করুন। এটি কঙ্কাল ওভাররাইড:

override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)
   
}

4. onDraw() এর ভিতরে, পাখার গতি OFF বা অন্য কোন মানের উপর নির্ভর করে পেইন্টের রঙ ধূসর ( Color.GRAY ) বা সবুজ ( Color.GREEN ) সেট করতে এই লাইনটি যোগ করুন। অনুরোধ করা হলে android.graphics.Color আমদানি করুন।

// Set dial background color to green if selection not off.
paint.color = if (fanSpeed == FanSpeed.OFF) Color.GRAY else Color.GREEN

5. drawCircle() পদ্ধতিতে ডায়ালের জন্য একটি বৃত্ত আঁকতে এই কোডটি যোগ করুন। এই পদ্ধতিটি বৃত্তের কেন্দ্র, বৃত্তের ব্যাসার্ধ এবং বর্তমান পেইন্টের রঙ খুঁজে পেতে বর্তমান দৃশ্যের প্রস্থ এবং উচ্চতা ব্যবহার করে। width এবং height বৈশিষ্ট্য View সুপারক্লাসের সদস্য এবং দৃশ্যের বর্তমান মাত্রা নির্দেশ করে।

// Draw the dial.
canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, paint)

6. ফ্যানের গতি নির্দেশক চিহ্নের জন্য একটি ছোট বৃত্ত আঁকতে নিম্নলিখিত কোডটি যোগ করুন, এছাড়াও drawCircle() পদ্ধতিতে এই অংশটি PointF ব্যবহার করে। বর্তমান ফ্যানের গতির উপর ভিত্তি করে নির্দেশক কেন্দ্রের জন্য X,Y স্থানাঙ্ক গণনা করার জন্য computeXYforSpeed() এক্সটেনশন পদ্ধতি।

// Draw the indicator circle.
val markerRadius = radius + RADIUS_OFFSET_INDICATOR
pointPosition.computeXYForSpeed(fanSpeed, markerRadius)
paint.color = Color.BLACK
canvas.drawCircle(pointPosition.x, pointPosition.y, radius/12, paint)

7. অবশেষে, ডায়ালের চারপাশে উপযুক্ত অবস্থানে ফ্যানের গতির লেবেল (0, 1, 2, 3) আঁকুন। পদ্ধতির এই অংশটি প্রতিটি লেবেলের জন্য অবস্থান পেতে PointF.computeXYForSpeed() আবার কল করে এবং বরাদ্দ এড়াতে প্রতিবার pointPosition অবজেক্টটি পুনরায় ব্যবহার করে। লেবেল আঁকতে drawText() ব্যবহার করুন।

// Draw the text labels.
val labelRadius = radius + RADIUS_OFFSET_LABEL
for (i in FanSpeed.values()) {
   pointPosition.computeXYForSpeed(i, labelRadius)
   val label = resources.getString(i.label)
   canvas.drawText(label, pointPosition.x, pointPosition.y, paint)
}

সম্পূর্ণ onDraw() পদ্ধতিটি এইরকম দেখাচ্ছে:

override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)
   // Set dial background color to green if selection not off.
   paint.color = if (fanSpeed == FanSpeed.OFF) Color.GRAY else Color.GREEN
   // Draw the dial.
   canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, paint)
   // Draw the indicator circle.
   val markerRadius = radius + RADIUS_OFFSET_INDICATOR
   pointPosition.computeXYForSpeed(fanSpeed, markerRadius)
   paint.color = Color.BLACK
   canvas.drawCircle(pointPosition.x, pointPosition.y, radius/12, paint)
   // Draw the text labels.
   val labelRadius = radius + RADIUS_OFFSET_LABEL
   for (i in FanSpeed.values()) {
       pointPosition.computeXYForSpeed(i, labelRadius)
       val label = resources.getString(i.label)
       canvas.drawText(label, pointPosition.x, pointPosition.y, paint)
   }
}

ধাপ 2. লেআউটে ভিউ যোগ করুন

একটি অ্যাপের UI-তে একটি কাস্টম ভিউ যোগ করতে, আপনি এটিকে কার্যকলাপের XML লেআউটে একটি উপাদান হিসেবে উল্লেখ করেন। XML উপাদান বৈশিষ্ট্যগুলির সাথে এর চেহারা এবং আচরণ নিয়ন্ত্রণ করুন, যেমন আপনি অন্য কোনো UI উপাদানের জন্য করবেন।

1. activity_main.xml এ, dialView এর ImageView ট্যাগ com.example.android.customfancontroller.DialView তে পরিবর্তন করুন এবং android:background অ্যাট্রিবিউট মুছুন। DialView এবং আসল ImageView উভয়ই View ক্লাস থেকে স্ট্যান্ডার্ড অ্যাট্রিবিউটের উত্তরাধিকারী, তাই অন্য কোনও বৈশিষ্ট্য পরিবর্তন করার দরকার নেই। নতুন DialView উপাদান এই মত দেখায়:

<com.example.android.customfancontroller.DialView
       android:id="@+id/dialView"
       android:layout_width="@dimen/fan_dimen"
       android:layout_height="@dimen/fan_dimen"
       app:layout_constraintTop_toBottomOf="@+id/customViewLabel"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       android:layout_marginLeft="@dimen/default_margin"
       android:layout_marginRight="@dimen/default_margin"
       android:layout_marginTop="@dimen/default_margin" />

2. অ্যাপটি চালান। আপনার ফ্যান কন্ট্রোল ভিউ কার্যকলাপে প্রদর্শিত হবে।

চূড়ান্ত কাজ হল আপনার কাস্টম ভিউ সক্ষম করা যাতে ব্যবহারকারী ভিউটি ট্যাপ করলে একটি ক্রিয়া সম্পাদন করতে পারে। প্রতিটি ট্যাপ নির্বাচন সূচকটিকে পরবর্তী অবস্থানে নিয়ে যাওয়া উচিত: অফ-1-2-3 এবং ব্যাক টু অফ। এছাড়াও, নির্বাচন 1 বা তার বেশি হলে, ধূসর থেকে সবুজে পটভূমি পরিবর্তন করুন, ইঙ্গিত করে যে ফ্যান পাওয়ার চালু আছে।

আপনার কাস্টম ভিউকে ক্লিক করার জন্য সক্ষম করতে, আপনি:

• ভিউ এর isClickable প্রপার্টি true সেট করুন। এটি ক্লিকগুলিতে প্রতিক্রিয়া জানাতে আপনার কাস্টম ভিউকে সক্ষম করে।
• ভিউটি ক্লিক করার সময় ক্রিয়াকলাপ সম্পাদন করতে View ক্লাসের পারফর্ম ক্লিক performClick () প্রয়োগ করুন।
• invalidate() পদ্ধতিতে কল করুন। এটি অ্যান্ড্রয়েড সিস্টেমকে ভিউটি পুনরায় আঁকতে onDraw() পদ্ধতিতে কল করতে বলে।

সাধারণত, একটি স্ট্যান্ডার্ড অ্যান্ড্রয়েড ভিউ সহ, ব্যবহারকারী যখন সেই ভিউটি ক্লিক করে তখন একটি ক্রিয়া সম্পাদন করতে আপনি OnClickListener() প্রয়োগ করেন। একটি কাস্টম ভিউয়ের জন্য, আপনি পরিবর্তে View ক্লাসের performClick () পদ্ধতি প্রয়োগ করুন এবং super কল করুন। performClick(). ডিফল্ট performClick() onClickListener() কল করে, যাতে আপনি পারফর্মক্লিক() এ আপনার ক্রিয়াগুলি যোগ করতে পারেন এবং আপনার বা আপনার কাস্টম ভিউ ব্যবহার করতে পারে এমন অন্যান্য বিকাশকারীদের দ্বারা আরও কাস্টমাইজেশনের জন্য উপলব্ধ onClickListener() performClick() দিতে পারেন।

1. DialView.kt এ, FanSpeed ​​গণনার ভিতরে, একটি এক্সটেনশন ফাংশন next() যোগ করুন যা বর্তমান ফ্যানের গতিকে তালিকার পরবর্তী গতিতে পরিবর্তন করে ( OFF থেকে LOW , MEDIUM , এবং HIGH , এবং তারপর ব্যাক OFF )। সম্পূর্ণ গণনা এখন এই মত দেখায়:

private enum class FanSpeed(val label: Int) {
   OFF(R.string.fan_off),
   LOW(R.string.fan_low),
   MEDIUM(R.string.fan_medium),
   HIGH(R.string.fan_high);

   fun next() = when (this) {
       OFF -> LOW
       LOW -> MEDIUM
       MEDIUM -> HIGH
       HIGH -> OFF
   }
}

2. DialView ক্লাসের ভিতরে, onSizeChanged() পদ্ধতির ঠিক আগে, একটি init() ব্লক যোগ করুন। ভিউ এর isClickable প্রপার্টিটিকে সত্যে সেট করা সেই ভিউটিকে ব্যবহারকারীর ইনপুট গ্রহণ করতে সক্ষম করে।

init {
   isClickable = true
}

3. init(), নিচের কোড দিয়ে performClick() পদ্ধতিটি ওভাররাইড করুন।

override fun performClick(): Boolean {
   if (super.performClick()) return true

   fanSpeed = fanSpeed.next()
   contentDescription = resources.getString(fanSpeed.label)
  
   invalidate()
   return true
}

super ডাক। performClick() অবশ্যই প্রথমে ঘটতে হবে, যা অ্যাক্সেসিবিলিটি ইভেন্টের পাশাপাশি কল onClickListener() সক্ষম করে।

পরবর্তী দুটি লাইন next() পদ্ধতির সাহায্যে ফ্যানের গতি বৃদ্ধি করে এবং বর্তমান গতির (অফ, 1, 2 বা 3) প্রতিনিধিত্বকারী স্ট্রিং রিসোর্সে ভিউয়ের বিষয়বস্তুর বিবরণ সেট করে।

অবশেষে, invalidate() পদ্ধতিটি সম্পূর্ণ ভিউটিকে বাতিল করে, ভিউটি পুনরায় আঁকতে onDraw() কে কল করতে বাধ্য করে। যদি আপনার কাস্টম ভিউতে ব্যবহারকারীর ইন্টারঅ্যাকশন সহ যেকোন কারণে কিছু পরিবর্তন হয় এবং পরিবর্তনটি প্রদর্শনের প্রয়োজন হয়, তাহলে invalidate().

4. অ্যাপটি চালান। সূচকটিকে বন্ধ থেকে 1 এ সরাতে DialView উপাদানটিতে আলতো চাপুন৷ ডায়ালটি সবুজ হওয়া উচিত৷ প্রতিটি টোকা দিয়ে, সূচকটি পরবর্তী অবস্থানে যেতে হবে। যখন সূচকটি বন্ধ হয়ে যায়, ডায়ালটি আবার ধূসর হওয়া উচিত।

এই উদাহরণটি আপনার কাস্টম দৃশ্যের সাথে কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করার প্রাথমিক মেকানিক্স দেখায়। আপনি প্রতিটি ফ্যান ডায়াল অবস্থানের জন্য একটি ভিন্ন রঙের সাথে DialView ক্লাসের জন্য কাস্টম বৈশিষ্ট্যগুলি সংজ্ঞায়িত করেন।

1. res/values/attrs.xml তৈরি করুন এবং খুলুন।
2. <resources> এর ভিতরে, একটি <declare-styleable> রিসোর্স উপাদান যোগ করুন।
3. <declare-styleable> রিসোর্স এলিমেন্টের ভিতরে, তিনটি attr এলিমেন্ট যোগ করুন, প্রতিটি অ্যাট্রিবিউটের জন্য একটি name এবং format সহ। format একটি প্রকারের মতো, এবং এই ক্ষেত্রে, এটি color ।

<?xml version="1.0" encoding="utf-8"?>
<resources>
       <declare-styleable name="DialView">
           <attr name="fanColor1" format="color" />
           <attr name="fanColor2" format="color" />
           <attr name="fanColor3" format="color" />
       </declare-styleable>
</resources>

দ্রষ্টব্য: attr নামটি নিয়ম অনুসারে, কাস্টম ভিউকে সংজ্ঞায়িত করে এমন ক্লাসের নামের একই নাম (এই ক্ষেত্রে, DialView )। যদিও এই কনভেনশনটি অনুসরণ করা কঠোরভাবে প্রয়োজনীয় নয়, অনেক জনপ্রিয় কোড এডিটর বিবৃতি সম্পূর্ণতা প্রদানের জন্য এই নামকরণ কনভেনশনের উপর নির্ভর করে।

4. activity_main.xml লেআউট ফাইলটি খুলুন।
5. DialView এ, fanColor1 , fanColor2 এবং fanColor3 এর জন্য গুণাবলী যোগ করুন এবং নিচে দেখানো রঙে তাদের মান সেট করুন। app: ব্যবহার করুন: কাস্টম অ্যাট্রিবিউটের ভূমিকা হিসেবে (যেমন app:fanColor1 ) android: কারণ আপনার কাস্টম অ্যাট্রিবিউট android নেমস্পেসের পরিবর্তে schemas.android.com/apk/res/ your_app_package_name namespace-এর অন্তর্গত।

app:fanColor1="#FFEB3B"
app:fanColor2="#CDDC39"
app:fanColor3="#009688"

আপনার DialView ক্লাসে বৈশিষ্ট্যগুলি ব্যবহার করার জন্য, আপনাকে সেগুলি পুনরুদ্ধার করতে হবে। এগুলি একটি AttributeSet সংরক্ষিত থাকে, যা সৃষ্টির পরে আপনার ক্লাসে হস্তান্তর করা হয়, যদি এটি বিদ্যমান থাকে। আপনি init এ বৈশিষ্ট্যগুলি পুনরুদ্ধার করুন এবং ক্যাশিংয়ের জন্য স্থানীয় ভেরিয়েবলগুলিতে বৈশিষ্ট্যের মানগুলি নির্ধারণ করুন।

6. DialView.kt ক্লাস ফাইলটি খুলুন।
7. DialView -এর ভিতরে, অ্যাট্রিবিউটের মান ক্যাশে করতে ভেরিয়েবল ঘোষণা করুন।

private var fanSpeedLowColor = 0
private var fanSpeedMediumColor = 0
private var fanSeedMaxColor = 0

8. init ব্লকে, withStyledAttributes এক্সটেনশন ফাংশন ব্যবহার করে নিম্নলিখিত কোড যোগ করুন। আপনি গুণাবলী সরবরাহ করুন এবং দেখুন, এবং আপনার স্থানীয় ভেরিয়েবল সেট করুন। স্টাইলড অ্যাট্রিবিউটের সাথে আমদানি করা সঠিক withStyledAttributes getColor() ফাংশনও আমদানি করবে।

context.withStyledAttributes(attrs, R.styleable.DialView) {
   fanSpeedLowColor = getColor(R.styleable.DialView_fanColor1, 0)
   fanSpeedMediumColor = getColor(R.styleable.DialView_fanColor2, 0)
   fanSeedMaxColor = getColor(R.styleable.DialView_fanColor3, 0)
}

Android এবং Kotlin এক্সটেনশন লাইব্রেরি ( android-ktx ) এখানে আপনার জন্য অনেক কাজ করে! android-ktx লাইব্রেরি কোটলিন এক্সটেনশনগুলিকে একটি শক্তিশালী মানের-জীবন ফোকাস প্রদান করে। উদাহরণস্বরূপ, withStyledAttributes এক্সটেনশনটি বেশ ক্লান্তিকর বয়লারপ্লেট কোডের উল্লেখযোগ্য সংখ্যক লাইন প্রতিস্থাপন করে। এই লাইব্রেরি সম্পর্কে আরও জানতে, ডকুমেন্টেশন এবং মূল ঘোষণা ব্লগ পোস্টটি দেখুন!

9. বর্তমান ফ্যানের গতির উপর ভিত্তি করে ডায়ালের রঙ সেট করতে onDraw() এ স্থানীয় ভেরিয়েবল ব্যবহার করুন। যেখানে পেইন্টের রঙ সেট করা হয়েছে সেই লাইনটি প্রতিস্থাপন করুন ( paint . color = if ( fanSpeed == FanSpeed. GRAY OFF ) Color. ধূসর else Color. GREEN ) নিচের কোড দিয়ে।

paint.color = when (fanSpeed) {
   FanSpeed.OFF -> Color.GRAY
   FanSpeed.LOW -> fanSpeedLowColor
   FanSpeed.MEDIUM -> fanSpeedMediumColor
   FanSpeed.HIGH -> fanSeedMaxColor
} as Int

10. আপনার অ্যাপটি চালান, ডায়ালে ক্লিক করুন এবং নিচের মতো প্রতিটি অবস্থানের জন্য রঙের সেটিং আলাদা হওয়া উচিত।

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

অ্যাক্সেসিবিলিটি হল ডিজাইন, বাস্তবায়ন, এবং পরীক্ষার কৌশলগুলির একটি সেট যা আপনার অ্যাপটিকে প্রতিবন্ধী ব্যক্তি সহ সকলের দ্বারা ব্যবহারযোগ্য হতে সক্ষম করে৷

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

TextView এবং Button মতো স্ট্যান্ডার্ড UI ভিউতে অ্যান্ড্রয়েড ডিফল্টরূপে বেশ কয়েকটি অ্যাক্সেসিবিলিটি বৈশিষ্ট্য সরবরাহ করে। আপনি যখন একটি কাস্টম ভিউ তৈরি করেন, তবে, আপনাকে বিবেচনা করতে হবে যে কীভাবে সেই কাস্টম ভিউ অ্যাক্সেসযোগ্য বৈশিষ্ট্যগুলি প্রদান করবে যেমন অন-স্ক্রীন সামগ্রীর কথ্য বর্ণনা।

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

ধাপ 1. TalkBack এক্সপ্লোর করুন

TalkBack হল Android এর অন্তর্নির্মিত স্ক্রিন রিডার। টকব্যাক সক্ষম হলে, ব্যবহারকারী স্ক্রীন না দেখেই তাদের Android ডিভাইসের সাথে ইন্টারঅ্যাক্ট করতে পারে, কারণ Android স্ক্রীনের উপাদানগুলিকে উচ্চস্বরে বর্ণনা করে৷ দৃষ্টি প্রতিবন্ধী ব্যবহারকারীরা আপনার অ্যাপ ব্যবহার করার জন্য টকব্যাকের উপর নির্ভর করতে পারে।

এই টাস্কে, স্ক্রিন রিডাররা কীভাবে কাজ করে এবং অ্যাপগুলি কীভাবে নেভিগেট করতে হয় তা বোঝার জন্য আপনি TalkBack সক্ষম করুন৷

দ্রষ্টব্য: ডিফল্টরূপে, Android এমুলেটর এবং কিছু পুরানো ডিভাইসে TalkBack অনুপলব্ধ। আপনি Google Play থেকে Google Accessibility Suite অ্যাপ ইনস্টল করে Android এমুলেটরে TalkBack সক্ষম করতে পারেন। ভার্চুয়াল ডিভাইসের জন্য প্লে স্টোর সক্রিয় করা প্রয়োজন।

1. একটি Android ডিভাইস বা এমুলেটরে, সেটিংস > অ্যাক্সেসিবিলিটি > TalkBack- এ নেভিগেট করুন।
2. TalkBack চালু করতে চালু /বন্ধ টগল বোতামে ট্যাপ করুন।
3. অনুমতি নিশ্চিত করতে ঠিক আছে আলতো চাপুন।
4. জিজ্ঞাসা করা হলে আপনার ডিভাইসের পাসওয়ার্ড নিশ্চিত করুন। আপনি যদি প্রথমবার টকব্যাক চালান তবে একটি টিউটোরিয়াল চালু হবে। (টিউটোরিয়ালটি পুরানো ডিভাইসগুলিতে উপলব্ধ নাও হতে পারে।)
5. চোখ বন্ধ করে টিউটোরিয়ালটি নেভিগেট করা সহায়ক হতে পারে। ভবিষ্যতে টিউটোরিয়ালটি আবার খুলতে, সেটিংস > অ্যাক্সেসিবিলিটি > TalkBack > সেটিংস > লঞ্চ টকব্যাক টিউটোরিয়াল -এ নেভিগেট করুন।
6. CustomFanController অ্যাপটি কম্পাইল করুন এবং চালান, অথবা আপনার ডিভাইসে ওভারভিউ বা সাম্প্রতিক বোতাম দিয়ে এটি খুলুন। টকব্যাক চালু হলে, লক্ষ্য করুন যে অ্যাপটির নাম ঘোষণা করা হয়েছে, সেইসাথে TextView লেবেলের পাঠ্য ("ফ্যান কন্ট্রোল")। যাইহোক, যদি আপনি DialView ভিউতে ট্যাপ করেন, তাহলে দৃশ্যটির অবস্থা (ডায়ালের জন্য বর্তমান সেটিং) বা আপনি এটি সক্রিয় করতে ভিউটিতে ট্যাপ করার সময় যে ক্রিয়াটি ঘটবে সে সম্পর্কে কোনও তথ্য বলা হয় না।

টিপ: সেটিংস > অ্যাক্সেসিবিলিটি তে, আপনি যদি ভলিউম কী শর্টকাট সক্ষম করেন তবে আপনি সহজেই আপনার ডিভাইসের জন্য টকব্যাক আবার চালু এবং বন্ধ করতে পারেন উভয় ভলিউম বোতাম 3 সেকেন্ডের জন্য চেপে ধরে রেখে৷

ধাপ 2. ডায়াল লেবেলের জন্য বিষয়বস্তুর বিবরণ যোগ করুন

বিষয়বস্তুর বিবরণ আপনার অ্যাপের দৃশ্যের অর্থ এবং উদ্দেশ্য বর্ণনা করে। এই লেবেলগুলি স্ক্রীন রিডার যেমন Android এর TalkBack বৈশিষ্ট্যকে প্রতিটি উপাদানের কার্যকারিতা সঠিকভাবে ব্যাখ্যা করার অনুমতি দেয়৷ স্ট্যাটিক ভিউ যেমন ImageView এর জন্য, আপনি contentDescription অ্যাট্রিবিউট সহ লেআউট ফাইলের ভিউতে বিষয়বস্তুর বিবরণ যোগ করতে পারেন। টেক্সট ভিউ ( TextView এবং EditText ) স্বয়ংক্রিয়ভাবে ভিউতে থাকা টেক্সটটিকে বিষয়বস্তুর বিবরণ হিসেবে ব্যবহার করে।

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

1. DialView ক্লাসের নীচে, কোনো আর্গুমেন্ট বা রিটার্ন টাইপ ছাড়াই একটি ফাংশন updateContentDescription() ঘোষণা করুন।

fun updateContentDescription() {
}

2. updateContentDescription() এর ভিতরে, কাস্টম ভিউয়ের জন্য কন্টেন্ট contentDescription প্রপার্টি পরিবর্তন করুন বর্তমান ফ্যান স্পিডের সাথে যুক্ত স্ট্রিং রিসোর্সে (বন্ধ, 1, 2, বা 3)। এগুলি একই লেবেল যা onDraw() এ ব্যবহৃত হয় যখন স্ক্রিনে ডায়াল আঁকা হয়।

fun updateContentDescription() {
   contentDescription = resources.getString(fanSpeed.label)
}

3. init() ব্লক পর্যন্ত স্ক্রোল করুন এবং সেই ব্লকের শেষে updateContentDescription() একটি কল যোগ করুন। ভিউ শুরু হলে এটি বিষয়বস্তুর বিবরণ শুরু করে।

init {
   isClickable = true
   // ...

   updateContentDescription()
}

4. invalidate() এর ঠিক আগে, performClick() updateContentDescription() এর জন্য আরেকটি কল যোগ করুন।

override fun performClick(): Boolean {
   if (super.performClick()) return true
   fanSpeed = fanSpeed.next()
   updateContentDescription()
   invalidate()
   return true
}

5. অ্যাপটি কম্পাইল করুন এবং চালান এবং নিশ্চিত করুন যে TalkBack চালু আছে। ডায়াল ভিউয়ের জন্য সেটিং পরিবর্তন করতে আলতো চাপুন এবং লক্ষ্য করুন যে এখন টকব্যাক বর্তমান লেবেল (অফ, 1, 2, 3) এবং সেই সাথে "অ্যাক্টিভেট করতে ডবল-ট্যাপ" শব্দটি ঘোষণা করে৷

ধাপ 3. ক্লিক অ্যাকশনের জন্য আরও তথ্য যোগ করুন

আপনি সেখানে থামতে পারেন এবং আপনার ভিউ টকব্যাকে ব্যবহারযোগ্য হবে। তবে এটি সহায়ক হবে যদি আপনার ভিউটি শুধুমাত্র এটি সক্রিয় করা যায় না তা নির্দেশ করতে পারে ("সক্রিয় করতে ডবল-ট্যাপ") তবে ভিউটি সক্রিয় হলে কী ঘটবে তাও ব্যাখ্যা করতে পারে ("পরিবর্তন করতে ডবল-ট্যাপ করুন।" বা "ডাবল-ট্যাপ করুন।" -রিসেট করতে আলতো চাপুন।")

এটি করার জন্য, আপনি একটি অ্যাক্সেসিবিলিটি নোড ইনফো অবজেক্টে ভিউয়ের অ্যাকশন (এখানে, একটি ক্লিক বা ট্যাপ অ্যাকশন) সম্পর্কে তথ্য যোগ করুন, একটি অ্যাক্সেসিবিলিটি প্রতিনিধির মাধ্যমে। একটি অ্যাক্সেসিবিলিটি প্রতিনিধি আপনাকে কম্পোজিশনের মাধ্যমে আপনার অ্যাপের অ্যাক্সেসিবিলিটি-সম্পর্কিত বৈশিষ্ট্যগুলিকে কাস্টমাইজ করতে সক্ষম করে (উত্তরাধিকারের পরিবর্তে)।

এই কাজের জন্য আপনি অ্যান্ড্রয়েড জেটপ্যাক লাইব্রেরিগুলিতে অ্যাক্সেসিবিলিটি ক্লাসগুলি ব্যবহার করবেন ( androidx.* ), পিছনের সামঞ্জস্যতা নিশ্চিত করতে৷

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

1. DialView.kt এ, init ব্লকে, একটি নতুন AccessibilityDelegateCompat অবজেক্ট হিসাবে ভিউতে একটি অ্যাক্সেসিবিলিটি প্রতিনিধি সেট করুন। অনুরোধ করা হলে androidx.core.view.ViewCompat এবং androidx.core.view.AccessibilityDelegateCompat আমদানি করুন। এই কৌশলটি আপনার অ্যাপে সর্বাধিক পরিমাণে পিছিয়ে থাকা সামঞ্জস্যতা সক্ষম করে।

ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
   
})

2. AccessibilityDelegateCompat অবজেক্টের ভিতরে, একটি AccessibilityNodeInfoCompat অবজেক্টের সাথে onInitializeAccessibilityNodeInfo() ওভাররাইড করুন এবং সুপারের পদ্ধতিতে কল করুন। অনুরোধ করা হলে androidx.core.view.accessibility.AccessibilityNodeInfoCompat আমদানি করুন।

ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
   override fun onInitializeAccessibilityNodeInfo(host: View, 
                            info: AccessibilityNodeInfoCompat) {
      super.onInitializeAccessibilityNodeInfo(host, info)

   }  
})

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

3. onInitializeAccessibilityNodeInfo() ভিতরে, একটি নতুন AccessibilityNodeInfoCompat.AccessibilityActionCompat অবজেক্ট তৈরি করুন এবং এটি customClick ভেরিয়েবলে বরাদ্দ করুন। কনস্ট্রাক্টরের মধ্যে প্রবেশ করুন AccessibilityNodeInfo.ACTION_CLICK ধ্রুবক, এবং একটি স্থানধারক স্ট্রিং। অনুরোধ করা হলে AccessibilityNodeInfo আমদানি করুন।

ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
   override fun onInitializeAccessibilityNodeInfo(host: View, 
                            info: AccessibilityNodeInfoCompat) {
      super.onInitializeAccessibilityNodeInfo(host, info)
      val customClick = AccessibilityNodeInfoCompat.AccessibilityActionCompat(
         AccessibilityNodeInfo.ACTION_CLICK,
        "placeholder"
      )
   }  
})

AccessibilityActionCompat ক্লাস অ্যাক্সেসিবিলিটি উদ্দেশ্যে একটি ভিউতে একটি অ্যাকশন উপস্থাপন করে । একটি সাধারণ ক্রিয়া হল একটি ক্লিক বা ট্যাপ, যেমন আপনি এখানে ব্যবহার করেন, তবে অন্যান্য ক্রিয়াগুলির মধ্যে ফোকাস অর্জন বা হারানো, একটি ক্লিপবোর্ড অপারেশন (কাট/কপি/পেস্ট) বা ভিউয়ের মধ্যে স্ক্রোল করা অন্তর্ভুক্ত থাকতে পারে। এই ক্লাসের জন্য কনস্ট্রাক্টরের জন্য একটি অ্যাকশন কনস্ট্যান্ট প্রয়োজন (এখানে, AccessibilityNodeInfo.ACTION_CLICK ), এবং একটি স্ট্রিং যা টকব্যাক দ্বারা ব্যবহৃত হয় তা নির্দেশ করতে।

4. একটি স্ট্রিং রিসোর্স পুনরুদ্ধার করতে context.getString() এ একটি কল দিয়ে "placeholder" স্ট্রিংটি প্রতিস্থাপন করুন। নির্দিষ্ট সংস্থানের জন্য, বর্তমান ফ্যানের গতি পরীক্ষা করুন। যদি গতি বর্তমানে FanSpeed.HIGH হয়, স্ট্রিংটি "Reset" হয়। ফ্যানের গতি অন্য কিছু হলে, স্ট্রিংটি "Change." আপনি পরবর্তী ধাপে এই স্ট্রিং সংস্থানগুলি তৈরি করবেন।

ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
   override fun onInitializeAccessibilityNodeInfo(host: View, 
                            info: AccessibilityNodeInfoCompat) {
      super.onInitializeAccessibilityNodeInfo(host, info)
      val customClick = AccessibilityNodeInfoCompat.AccessibilityActionCompat(
         AccessibilityNodeInfo.ACTION_CLICK,
        context.getString(if (fanSpeed !=  FanSpeed.HIGH) R.string.change else R.string.reset)
      )
   }  
})

5. customClick সংজ্ঞার জন্য বন্ধ বন্ধনীর পরে, নোড তথ্য অবজেক্টে নতুন অ্যাক্সেসিবিলিটি অ্যাকশন যোগ করতে addAction() পদ্ধতি ব্যবহার করুন।

ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
   override fun onInitializeAccessibilityNodeInfo(host: View, 
                            info: AccessibilityNodeInfoCompat) {
       super.onInitializeAccessibilityNodeInfo(host, info)
       val customClick = AccessibilityNodeInfoCompat.AccessibilityActionCompat(
           AccessibilityNodeInfo.ACTION_CLICK,
           context.getString(if (fanSpeed !=  FanSpeed.HIGH) 
                                 R.string.change else R.string.reset)
       )
       info.addAction(customClick)
   }
})

6. res/values/strings.xml এ, "পরিবর্তন" এবং "রিসেট" এর জন্য স্ট্রিং সংস্থান যোগ করুন।

<string name="change">Change</string>
<string name="reset">Reset</string>

7. অ্যাপটি কম্পাইল করুন এবং চালান এবং নিশ্চিত করুন যে TalkBack চালু আছে। এখন লক্ষ্য করুন যে "সক্রিয় করতে ডাবল-ট্যাপ করুন" শব্দটি এখন হয় "পরিবর্তন করতে ডবল-ট্যাপ করুন" (যদি ফ্যানের গতি বেশি বা 3 এর চেয়ে কম হয়) বা "রিসেট করতে ডাবল-ট্যাপ করুন" (যদি ফ্যানের গতি ইতিমধ্যেই থাকে উচ্চ বা 3)। মনে রাখবেন যে প্রম্পট "এতে ডবল-ট্যাপ করুন..." টকব্যাক পরিষেবা নিজেই সরবরাহ করে।

সমাপ্ত কোডল্যাবের জন্য কোডটি ডাউনলোড করুন..

$  git clone https://github.com/googlecodelabs/android-kotlin-drawing-custom-views

বিকল্পভাবে আপনি একটি জিপ ফাইল হিসাবে সংগ্রহস্থলটি ডাউনলোড করতে পারেন, এটি আনজিপ করতে পারেন এবং এটি অ্যান্ড্রয়েড স্টুডিওতে খুলতে পারেন।

জিপ ডাউনলোড করুন

• একটি কাস্টম ভিউ তৈরি করতে যা একটি View সাবক্লাসের চেহারা এবং আচরণের উত্তরাধিকারী হয় যেমন EditText , একটি নতুন ক্লাস যোগ করুন যা সেই সাবক্লাসকে প্রসারিত করে এবং সাবক্লাসের কিছু পদ্ধতি ওভাররাইড করে সমন্বয় করুন।
• যেকোনো আকার এবং আকৃতির একটি কাস্টম ভিউ তৈরি করতে, একটি নতুন ক্লাস যোগ করুন যা View প্রসারিত করে।
• ভিউয়ের আকৃতি এবং মৌলিক চেহারা নির্ধারণ করতে onDraw() এর মতো View পদ্ধতিগুলিকে ওভাররাইড করুন।
• একটি ড্র বা ভিউ পুনরায় আঁকা জোর করতে invalidate() ব্যবহার করুন।
• কর্মক্ষমতা অপ্টিমাইজ করতে, ভেরিয়েবলগুলি বরাদ্দ করুন এবং অঙ্কন এবং পেইন্টিংয়ের জন্য প্রয়োজনীয় মানগুলিকে onDraw() এ ব্যবহার করার আগে বরাদ্দ করুন, যেমন সদস্য ভেরিয়েবলের শুরুতে।
• দৃশ্যের ইন্টারেক্টিভ আচরণ প্রদান করতে কাস্টম ভিউতে OnClickListener () এর পরিবর্তে performClick() ওভাররাইড করুন। এটি আপনার বা অন্যান্য Android বিকাশকারীদের সক্ষম করে যারা আপনার কাস্টম ভিউ ক্লাস ব্যবহার করে onClickListener() ব্যবহার করে আরও আচরণ প্রদান করতে পারে।
• একটি XML লেআউট ফাইলে কাস্টম ভিউ যোগ করুন এর উপস্থিতি সংজ্ঞায়িত করতে গুণাবলী সহ, যেমন আপনি অন্যান্য UI উপাদানগুলির সাথে করবেন৷
• কাস্টম বৈশিষ্ট্য সংজ্ঞায়িত করতে values ফোল্ডারে attrs.xml ফাইল তৈরি করুন। তারপরে আপনি XML লেআউট ফাইলে কাস্টম ভিউয়ের জন্য কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

উদাসীনতা কোর্স:

• কোটলিনের সাথে অ্যান্ড্রয়েড অ্যাপস তৈরি করা

অ্যান্ড্রয়েড ডেভেলপার ডকুমেন্টেশন:

• কাস্টম ভিউ তৈরি করা
• @JvmOverloads
• কাস্টম উপাদান
• অ্যান্ড্রয়েড কীভাবে ভিউ আঁকে
• onMeasure()
• onSizeChanged()
• onDraw()
• Canvas
• Paint
• drawText()
• setTypeface()
• setColor()
• drawRect()
• drawOval()
• drawArc()
• drawBitmap()
• setStyle()
• invalidate()
• দেখুন
• ইনপুট ইভেন্ট
• পেইন্ট
• কোটলিন এক্সটেনশন লাইব্রেরি অ্যান্ড্রয়েড-কেটিএক্স
• withStyledAttributes
• অ্যান্ড্রয়েড কেটিএক্স ডকুমেন্টেশন
• অ্যান্ড্রয়েড কেটিএক্স মূল ঘোষণা ব্লগ
• কাস্টম ভিউ আরও অ্যাক্সেসযোগ্য করুন
• AccessibilityDelegateCompat
• AccessibilityNodeInfoCompat
• AccessibilityNodeInfoCompat.AccessibilityActionCompat

ভিডিও:

• অ্যান্ড্রয়েডে একটি কাস্টম ভিউ তৈরির জন্য দ্রুত ভূমিকা
• অ্যান্ড্রয়েড কাস্টম ভিউ টিউটোরিয়াল

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

• প্রয়োজনে হোমওয়ার্ক বরাদ্দ করুন।
• শিক্ষার্থীদের সাথে যোগাযোগ করুন কিভাবে হোমওয়ার্ক অ্যাসাইনমেন্ট জমা দিতে হয়।
• হোমওয়ার্ক অ্যাসাইনমেন্ট গ্রেড.

প্রশিক্ষকরা এই পরামর্শগুলি যতটা কম বা যতটা চান ততটা ব্যবহার করতে পারেন, এবং তাদের উপযুক্ত মনে করে অন্য কোনও হোমওয়ার্ক বরাদ্দ করতে নির্দ্বিধায় করা উচিত।

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

প্রশ্ন 1

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

▢ onMeasure()

▢ onSize onSizeChanged()

▢ invalidate()

▢ onDraw()

প্রশ্ন 2

আপনি onDraw() দিয়ে আপনার ভিউ পুনরায় আঁকতে চান তা নির্দেশ করার জন্য, একটি বৈশিষ্ট্যের মান পরিবর্তিত হওয়ার পরে আপনি UI থ্রেড থেকে কোন পদ্ধতিতে কল করবেন?

▢ onMeasure()

▢ onSizeChanged()

▢ invalidate()

▢ getVisibility()

প্রশ্ন 3

আপনার কাস্টম ভিউতে ইন্টারঅ্যাক্টিভিটি যোগ করতে আপনার কোন View পদ্ধতিটি ওভাররাইড করা উচিত?

▢ setOnClickListener()

▢ onSizeChanged()

▢ isClickable()

▢ performClick()

এই কোর্সে অন্যান্য কোডল্যাবগুলির লিঙ্কগুলির জন্য, কোটলিন কোডল্যাবগুলির ল্যান্ডিং পৃষ্ঠাতে উন্নত Android দেখুন৷