ইউজার ইন্টারফেস

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

• থিম
• XML লেআউট
• মেনু
• সোয়াইপযোগ্য পৃষ্ঠাগুলি

থিম

আমরা আপনাকে যে গ্লাস থিমটি ব্যবহার করার পরামর্শ দিচ্ছি তার নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে:

• কোনও অ্যাকশন বার ছাড়াই পূর্ণ-স্ক্রিনে কার্যকলাপ প্রদর্শন করে।
• একটি ঘন-কালো পটভূমি প্রয়োগ করে।
• কালার এজ এফেক্টের জন্য কালার লাইটার সেট করে।
• একটি সাদা টেক্সট রঙ প্রয়োগ করে।

দ্রষ্টব্য: থিম তৈরি সম্পর্কে আরও তথ্যের জন্য স্টাইল এবং থিম সম্পর্কিত অ্যান্ড্রয়েড ডেভেলপার ডকুমেন্টেশন গাইড দেখুন।

গ্লাসের জন্য প্রস্তাবিত থিম সেটিংস নিম্নরূপ:

 <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
   <item name="android:windowBackground">@android:color/black</item>
   <item name="android:colorEdgeEffect">@android:color/white</item>
   <item name="android:textColor">@android:color/white</item>
 </style>

XML লেআউট

আপনার টুকরোগুলো যে দুটি মৌলিক কার্ড লেআউট ফুলিয়ে তুলতে পারে তা এখানে দেওয়া হল:

• প্রধান লেআউট
• বাম কলামের লেআউট

প্রধান লেআউট

এই লেআউটটি একটি কার্ডের জন্য প্রস্তাবিত স্ট্যান্ডার্ড প্যাডিং এবং ফুটার সংজ্ঞায়িত করে। খালি FrameLayout এ আপনার নিজস্ব মতামত রাখুন।

এখানে XML লেআউটের একটি উদাহরণ দেওয়া হল:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <FrameLayout
      android:id="@+id/body_layout"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_margin="@dimen/glass_card_margin"
      app:layout_constraintBottom_toTopOf="@id/footer"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">

    <!-- Put your widgets inside this FrameLayout. -->

  </FrameLayout>

  <!-- The footer view will grow to fit as much content as possible while the
         timestamp view keeps its width. If the footer text is too long, it
         will be ellipsized with a 40dp margin between it and the timestamp. -->

  <TextView
      android:id="@+id/footer"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="@dimen/glass_card_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@id/timestamp"
      app:layout_constraintStart_toStartOf="parent" />

  <TextView
      android:id="@+id/timestamp"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAlignment="viewEnd"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

বাম কলামের লেআউট

এই লেআউটটি এক-তৃতীয়াংশ প্রস্থের বাম কলাম এবং দুই-তৃতীয়াংশ প্রস্থের ডান কলামকে দুটি FrameLayout ক্লাসের আকারে সংজ্ঞায়িত করে যেখানে আপনি আপনার মতামত রাখতে পারেন। একটি উদাহরণ দেখতে নিম্নলিখিত ছবিটি দেখুন।

এখানে XML লেআউটের একটি উদাহরণ দেওয়া হল:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <FrameLayout
      android:id="@+id/left_column"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:background="#303030"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent=".333">

    <!-- Put widgets for the left column inside this FrameLayout. -->

  </FrameLayout>

  <FrameLayout
      android:id="@+id/right_column"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginTop="@dimen/glass_card_two_column_margin"
      android:layout_marginStart="@dimen/glass_card_two_column_margin"
      android:layout_marginBottom="@dimen/glass_card_two_column_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      app:layout_constraintBottom_toTopOf="@id/footer"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/left_column"
      app:layout_constraintTop_toTopOf="parent">

    <!-- Put widgets for the right column inside this FrameLayout. -->

  </FrameLayout>

  <!-- The footer view will grow to fit as much content as possible while the
         timestamp view keeps its width. If the footer text is too long, it
         will be ellipsized with a 40dp margin between it and the timestamp. -->

  <TextView
      android:id="@+id/footer"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="@dimen/glass_card_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@id/timestamp"
      app:layout_constraintStart_toEndOf="@id/left_column" />

  <TextView
      android:id="@+id/timestamp"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAlignment="viewEnd"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

স্ট্যান্ডার্ড মাত্রা

পূর্ববর্তী লেআউটগুলির সাথে নিম্নলিখিতগুলি ব্যবহার করুন অথবা আপনার নিজস্ব লেআউটগুলি ব্যবহার করে এমন একটি ফাইল তৈরি করুন যা Glass এর স্ট্যান্ডার্ড স্টাইল মেনে চলে। আপনার Android প্রজেক্টে এই ফাইলটি res/values/dimens.xml হিসাবে তৈরি করুন।

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <!-- The recommended margin for the top, left, and right edges of a card. -->
  <dimen name="glass_card_margin">40dp</dimen>

  <!-- The recommended margin between the bottom of the card and the footer. -->
  <dimen name="glass_card_footer_margin">50dp</dimen>

  <!-- The recommended margin for the left column of the two-column card. -->
  <dimen name="glass_card_two_column_margin">30dp</dimen>

</resources>

মেনু

আমরা আপনাকে মেনু তৈরির জন্য RecyclerView ব্যবহার করার পরামর্শ দিচ্ছি। এগুলি Android Studio প্রকল্প সংস্থান থেকে প্রাপ্ত স্ট্যান্ডার্ড Android মেনু ফাইলের উপর ভিত্তি করে তৈরি করা উচিত। Android আপনাকে স্ট্যান্ডার্ড মেনু তৈরিকে ওভাররাইড করতে এবং আপনার বাস্তবায়নের সাথে এটি প্রতিস্থাপন করতে দেয়। এটি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. RecyclerView দিয়ে লেআউট তৈরি করুন এবং এটিকে আপনার Activity এর ভিউ হিসেবে সেট করুন।
2. নতুন তৈরি মেনু আইটেমের সংগ্রহ ব্যবহার করার জন্য RecyclerView এবং এর অ্যাডাপ্টার সেট করুন।
3. onCreateOptionsMenu পদ্ধতিটি ওভাররাইড করুন।
   1. আপনার মেনুটি ফুলিয়ে দিন এবং প্রতিটি মেনু আইটেমের জন্য সংগ্রহে আপনার নতুন উপাদান যোগ করুন।
   2. অ্যাডাপ্টারে notifyDataSetChanged পদ্ধতিটি কল করুন।

   কোটলিন

       override fun onCreateOptionsMenu(menu: Menu): Boolean {
           val menuResource = intent
               .getIntExtra(EXTRA_MENU_KEY, EXTRA_MENU_ITEM_DEFAULT_VALUE)
           if (menuResource != EXTRA_MENU_ITEM_DEFAULT_VALUE) {
               menuInflater.inflate(menuResource, menu)
               for (i in 0 until menu.size()) {
                   val menuItem = menu.getItem(i)
                   menuItems.add(
                       GlassMenuItem(
                           menuItem.itemId, menuItem.icon,
                           menuItem.title.toString()
                       )
                   )
                   adapter.notifyDataSetChanged()
               }
           }
           return super.onCreateOptionsMenu(menu)
       }
       

   জাভা

       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
         final int menuResource = getIntent()
             .getIntExtra(EXTRA_MENU_KEY, EXTRA_MENU_ITEM_DEFAULT_VALUE);
         if (menuResource != EXTRA_MENU_ITEM_DEFAULT_VALUE) {
           final MenuInflater inflater = getMenuInflater();
           inflater.inflate(menuResource, menu);
   
           for (int i = 0; i < menu.size(); i++) {
             final MenuItem menuItem = menu.getItem(i);
             menuItems.add(
                 new GlassMenuItem(menuItem.getItemId(), menuItem.getIcon(),
                     menuItem.getTitle().toString()));
             adapter.notifyDataSetChanged();
           }
         }
         return super.onCreateOptionsMenu(menu);
       }
       

4. কোন বিকল্পটি নির্বাচন করা হয়েছে তা নির্ধারণ করতে LayoutManager এবং SnapHelper সাথে OnScrollListener ব্যবহার করুন।
5. মেনু আইটেম নির্বাচন ইভেন্ট পরিচালনা করার জন্য একটি TAP অঙ্গভঙ্গি শুনুন।
6. নির্বাচিত মেনু আইটেম সম্পর্কে তথ্য দিয়ে একটি Intent তৈরি করুন।
7. এই কার্যকলাপের জন্য একটি ফলাফল নির্ধারণ করুন এবং এটি শেষ করুন।
8. যে অংশ বা কার্যকলাপে আপনি মেনু রাখতে চান সেখান থেকে startActivityForResult কল করুন। এই উদ্দেশ্যে একটি TAP অঙ্গভঙ্গি ব্যবহার করুন।
9. নির্বাচিত মেনু আইটেমটি পরিচালনা করার জন্য কলিং ফ্র্যাগমেন্ট বা অ্যাক্টিভিটিতে onActivityResult ওভাররাইড করুন।

নির্দেশিকা

আপনার মেনু লেআউট কীভাবে সেট আপ করবেন তার জন্য পরামর্শের একটি তালিকা নিচে দেওয়া হল:

• লেখার আকার: 64sp
• পটভূমির রঙ: #96000000
• 64dpx64dp আকারের ম্যাটেরিয়াল আইকন ব্যবহার করুন
• windowIsTranslucent থিম ফ্ল্যাগটিকে true তে সেট করুন

নিচের ছবিটি একটি কাস্টমাইজড মেনু লেআউটের উদাহরণ:

বাস্তবায়নের বিশদ বিবরণের জন্য কার্ড নমুনা অ্যাপটি পর্যালোচনা করুন।

সোয়াইপযোগ্য পৃষ্ঠাগুলি

গ্লাস ডিসপ্লে এবং টাচপ্যাড একসাথে কাজ করে সুবিধাজনক উপায়ে সোয়াইপযোগ্য কার্ড প্রদর্শন করে। আপনি স্ট্যান্ডার্ড অ্যান্ড্রয়েড ViewPager এপিআই ব্যবহার করে আপনার কার্যকলাপে সোয়াইপযোগ্য পৃষ্ঠা তৈরি করতে পারেন।

কার্ড বা স্ক্রিন স্ক্রোল করার জন্য অ্যান্ড্রয়েড ViewPager ব্যবহার করার পদ্ধতি সম্পর্কে আরও তথ্যের জন্য স্ক্রিন স্লাইড প্রশিক্ষণ ডকুমেন্টেশনটি দেখুন।