নমনীয় উইজেট লেআউট প্রদান করুন

এই পৃষ্ঠাটি Android 12 (API লেভেল 31) এ প্রবর্তিত উইজেট সাইজিং এবং বৃহত্তর নমনীয়তার জন্য পরিমার্জন বর্ণনা করে। এটি আপনার উইজেটের আকার কীভাবে নির্ধারণ করতে হয় তারও বিশদ বিবরণ দেয়৷

উইজেট আকার এবং লেআউটের জন্য উন্নত API ব্যবহার করুন

অ্যান্ড্রয়েড 12 (এপিআই স্তর 31) দিয়ে শুরু করে, আপনি নিম্নলিখিতগুলি করে আরও পরিমার্জিত আকারের বৈশিষ্ট্য এবং নমনীয় লেআউটগুলি প্রদান করতে পারেন, যা অনুসরণ করা বিভাগগুলিতে বর্ণিত হয়েছে:

  1. অতিরিক্ত উইজেট সাইজিং সীমাবদ্ধতা নির্দিষ্ট করুন।

  2. প্রতিক্রিয়াশীল লেআউট বা সঠিক লেআউট প্রদান করা।

অ্যান্ড্রয়েডের পূর্ববর্তী সংস্করণগুলিতে, OPTION_APPWIDGET_MIN_WIDTH , OPTION_APPWIDGET_MIN_HEIGHT , OPTION_APPWIDGET_MAX_WIDTH , এবং OPTION_APPWIDGET_MAX_HEIGHT ব্যবহার করে একটি উইজেটের আকারের ব্যাপ্তি পাওয়া সম্ভব, কিন্তু তারপরে অতিরিক্ত আকারের অনুমান করা হবে এবং তারপরে লগ করা হবে সব পরিস্থিতিতে কাজ করে না। অ্যান্ড্রয়েড 12 বা উচ্চতরকে লক্ষ্য করা উইজেটগুলির জন্য, আমরা প্রতিক্রিয়াশীল বা সঠিক লেআউট প্রদান করার পরামর্শ দিই৷

অতিরিক্ত উইজেট সাইজিং সীমাবদ্ধতা নির্দিষ্ট করুন

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

বিদ্যমান minWidth , minHeight , minResizeWidth , এবং minResizeHeight বৈশিষ্ট্যগুলি ছাড়াও, নিম্নলিখিত নতুন appwidget-provider বৈশিষ্ট্যগুলি ব্যবহার করুন:

  • targetCellWidth এবং targetCellHeight : লঞ্চার গ্রিড সেলের পরিপ্রেক্ষিতে উইজেটের টার্গেট আকার নির্ধারণ করুন। যদি সংজ্ঞায়িত করা হয়, এই বৈশিষ্ট্যগুলি minWidth বা minHeight এর পরিবর্তে ব্যবহার করা হয়।

  • maxResizeWidth এবং maxResizeHeight : লঞ্চার ব্যবহারকারীকে উইজেটের আকার পরিবর্তন করতে দেয় এমন সর্বাধিক আকার নির্ধারণ করুন।

নিচের XML দেখায় কিভাবে সাইজিং এট্রিবিউট ব্যবহার করতে হয়।

<appwidget-provider
  ...
  android:targetCellWidth="3"
  android:targetCellHeight="2"
  android:maxResizeWidth="250dp"
  android:maxResizeHeight="110dp">
</appwidget-provider>

প্রতিক্রিয়াশীল লেআউট প্রদান

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

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

নিম্নলিখিত কোড উদাহরণ দেখায় কিভাবে লেআউটের একটি তালিকা প্রদান করতে হয়।

কোটলিন

override fun onUpdate(...) {
    val smallView = ...
    val tallView = ...
    val wideView = ...

    val viewMapping: Map<SizeF, RemoteViews> = mapOf(
            SizeF(150f, 100f) to smallView,
            SizeF(150f, 200f) to tallView,
            SizeF(215f, 100f) to wideView
    )
    val remoteViews = RemoteViews(viewMapping)

    appWidgetManager.updateAppWidget(id, remoteViews)
}

জাভা

@Override
public void onUpdate(...) {
    RemoteViews smallView = ...;
    RemoteViews tallView = ...;
    RemoteViews wideView = ...;

    Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
    viewMapping.put(new SizeF(150f, 100f), smallView);
    viewMapping.put(new SizeF(150f, 200f), tallView);
    viewMapping.put(new SizeF(215f, 100f), wideView);
    RemoteViews remoteViews = new RemoteViews(viewMapping);

    appWidgetManager.updateAppWidget(id, remoteViews);
}

অনুমান করুন উইজেটের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

<appwidget-provider
    android:minResizeWidth="160dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="250dp"
    android:maxResizeHeight="200dp">
</appwidget-provider>

পূর্ববর্তী কোড স্নিপেট নিম্নলিখিত মানে:

  • smallView 160dp ( minResizeWidth ) × 110dp ( minResizeHeight ) থেকে 160dp × 199dp (পরবর্তী কাটঅফ পয়েন্ট - 1dp) পর্যন্ত সমর্থন করে।
  • tallView 160dp × 200dp থেকে 214dp (পরবর্তী কাটঅফ পয়েন্ট - 1) × 200dp পর্যন্ত সমর্থন করে।
  • wideView 215dp × 110dp ( minResizeHeight ) থেকে 250dp ( maxResizeWidth ) × 200dp ( maxResizeHeight ) পর্যন্ত সমর্থন করে।

আপনার উইজেটটি অবশ্যই minResizeWidth × minResizeHeight থেকে maxResizeWidth × maxResizeHeight পর্যন্ত আকার পরিসীমা সমর্থন করবে৷ সেই পরিসরের মধ্যে, আপনি লেআউট পরিবর্তন করতে কাটঅফ পয়েন্ট নির্ধারণ করতে পারেন।

প্রতিক্রিয়াশীল বিন্যাসের উদাহরণ
চিত্র 1. একটি প্রতিক্রিয়াশীল বিন্যাসের উদাহরণ।

সঠিক লেআউট প্রদান করুন

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

এই সমাধানটি বাস্তবায়ন করতে, আপনার অ্যাপটিকে নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করতে হবে:

  1. ওভারলোড AppWidgetProvider.onAppWidgetOptionsChanged() , যা আকারের সেট পরিবর্তিত হলে বলা হয়।

  2. AppWidgetManager.getAppWidgetOptions() কল করুন, যা মাপ সম্বলিত একটি Bundle ফেরত দেয়।

  3. AppWidgetManager.OPTION_APPWIDGET_SIZES অ্যাক্সেস করুন৷ Bundle থেকে OPTION_APPWIDGET_SIZES কী৷

নিম্নলিখিত কোড উদাহরণ দেখায় কিভাবে সঠিক লেআউট প্রদান করতে হয়।

কোটলিন

override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        id: Int,
        newOptions: Bundle?
) {
    super.onAppWidgetOptionsChanged(context, appWidgetManager, id, newOptions)
    // Get the new sizes.
    val sizes = newOptions?.getParcelableArrayList<SizeF>(
            AppWidgetManager.OPTION_APPWIDGET_SIZES
    )
    // Check that the list of sizes is provided by the launcher.
    if (sizes.isNullOrEmpty()) {
        return
    }
    // Map the sizes to the RemoteViews that you want.
    val remoteViews = RemoteViews(sizes.associateWith(::createRemoteViews))
    appWidgetManager.updateAppWidget(id, remoteViews)
}

// Create the RemoteViews for the given size.
private fun createRemoteViews(size: SizeF): RemoteViews { }

জাভা

@Override
public void onAppWidgetOptionsChanged(
    Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle newOptions) {
    super.onAppWidgetOptionsChanged(context, appWidgetManager, appWidgetId, newOptions);
    // Get the new sizes.
    ArrayList<SizeF> sizes =
        newOptions.getParcelableArrayList(AppWidgetManager.OPTION_APPWIDGET_SIZES);
    // Check that the list of sizes is provided by the launcher.
    if (sizes == null || sizes.isEmpty()) {
      return;
    }
    // Map the sizes to the RemoteViews that you want.
    Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
    for (SizeF size : sizes) {
        viewMapping.put(size, createRemoteViews(size));
    }
    RemoteViews remoteViews = new RemoteViews(viewMapping);
    appWidgetManager.updateAppWidget(id, remoteViews);
}

// Create the RemoteViews for the given size.
private RemoteViews createRemoteViews(SizeF size) { }

আপনার উইজেটের জন্য একটি আকার নির্ধারণ করুন

প্রতিটি উইজেটকে অবশ্যই Android 12 বা তার বেশি চলমান ডিভাইসগুলির জন্য একটি targetCellWidth এবং targetCellHeight নির্ধারণ করতে হবে—অথবা অ্যান্ড্রয়েডের সমস্ত সংস্করণের জন্য minWidth এবং minHeight —ডিফল্টভাবে এটি যে ন্যূনতম স্থান খরচ করে তা নির্দেশ করে৷ যাইহোক, যখন ব্যবহারকারীরা তাদের হোম স্ক্রিনে একটি উইজেট যোগ করে, তখন এটি সাধারণত আপনার নির্দিষ্ট করা ন্যূনতম প্রস্থ এবং উচ্চতার চেয়ে বেশি দখল করে।

অ্যান্ড্রয়েড হোম স্ক্রীন ব্যবহারকারীদের উপলব্ধ স্থানগুলির একটি গ্রিড অফার করে যাতে তারা উইজেট এবং আইকন রাখতে পারে। এই গ্রিড ডিভাইস দ্বারা পরিবর্তিত হতে পারে; উদাহরণস্বরূপ, অনেক হ্যান্ডসেট একটি 5x4 গ্রিড অফার করে এবং ট্যাবলেট একটি বড় গ্রিড অফার করতে পারে। যখন আপনার উইজেট যোগ করা হয়, তখন এটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে ন্যূনতম সংখ্যক কক্ষ দখল করতে প্রসারিত করা হয়, Android 12 বা উচ্চতর ডিভাইসে চালিত ডিভাইসগুলিতে এর targetCellWidth এবং targetCellHeight সীমাবদ্ধতাগুলি পূরণ করতে বা minWidth এবং minHeight সীমাবদ্ধতাগুলি (অ্যান্ড্রয়েডএপিআই 1 চালিত ডিভাইসগুলিতে) স্তর 30) বা নীচে।

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

কক্ষের সংখ্যা (প্রস্থ x উচ্চতা) পোর্ট্রেট মোডে উপলব্ধ আকার (ডিপি) ল্যান্ডস্কেপ মোডে উপলব্ধ আকার (ডিপি)
1x1 57x102dp 127x51dp
2x1 130x102dp 269x51dp
3x1 203x102dp 412x51dp
4x1 276x102dp 554x51dp
5x1 349x102dp 697x51dp
5x2 349x220dp 697x117dp
5x3 349x337dp 697x184dp
5x4 349x455dp 697x250dp
... ... ...
nxm (73n - 16) x (118m - 16) (142n - 15) x (66m - 15)

minWidth , minResizeWidth , এবং maxResizeWidth বৈশিষ্ট্যগুলির জন্য আপনি যে মানগুলি প্রদান করেন তা জানাতে পোর্ট্রেট মোড ঘরের আকারগুলি ব্যবহার করুন৷ একইভাবে, minHeight , minResizeHeight , এবং maxResizeHeight বৈশিষ্ট্যগুলির জন্য আপনি যে মানগুলি প্রদান করেন তা জানাতে ল্যান্ডস্কেপ মোড ঘরের আকারগুলি ব্যবহার করুন৷

এর কারণ হল ঘরের প্রস্থ সাধারণত ল্যান্ডস্কেপ মোডের তুলনায় পোর্ট্রেট মোডে ছোট হয়—এবং একইভাবে, পোর্ট্রেট মোডের তুলনায় ল্যান্ডস্কেপ মোডে সেলের উচ্চতা সাধারণত ছোট হয়।

উদাহরণস্বরূপ, আপনি যদি চান যে আপনার উইজেটের প্রস্থ একটি Google Pixel 4-এ একটি কক্ষে পরিবর্তনযোগ্য হতে পারে, তাহলে আপনাকে আপনার minResizeWidth সর্বাধিক 56dp-এ সেট করতে হবে যাতে minResizeWidth অ্যাট্রিবিউটের মান 57dp-এর চেয়ে ছোট হয়—কারণ একটি সেল প্রতিকৃতিতে কমপক্ষে 57dp প্রশস্ত। একইভাবে, আপনি যদি একই ডিভাইসের একটি কক্ষে আপনার উইজেটের উচ্চতা পরিবর্তনযোগ্য করতে চান, তাহলে minResizeHeight বৈশিষ্ট্যের মান 51dp-এর চেয়ে ছোট তা নিশ্চিত করতে আপনাকে আপনার minResizeHeight সর্বোচ্চ 50dp-এ সেট করতে হবে-কারণ একটি কক্ষ কমপক্ষে 51dp আড়াআড়ি মোডে উচ্চ.

প্রতিটি উইজেট minResizeWidth / minResizeHeight এবং maxResizeWidth / maxResizeHeight অ্যাট্রিবিউটের মধ্যে সাইজ রেঞ্জের মধ্যে রিসাইজ করা যায়, যার মানে তাদের মধ্যে যেকোনো সাইজ রেঞ্জের সাথে মানিয়ে নিতে হবে।

উদাহরণস্বরূপ, প্লেসমেন্টে উইজেটের ডিফল্ট আকার সেট করতে, আপনি নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করতে পারেন:

<appwidget-provider
    android:targetCellWidth="3"
    android:targetCellHeight="2"
    android:minWidth="180dp"
    android:minHeight="110dp">
</appwidget-provider>

এর মানে হল উইজেটের ডিফল্ট আকার হল 3x2 সেল, যেমন targetCellWidth এবং targetCellHeight অ্যাট্রিবিউট দ্বারা নির্দিষ্ট করা হয়েছে—অথবা 180×110dp, যেমনটি Android 11 বা তার নিচের ডিভাইসগুলির জন্য minWidth এবং minHeight দ্বারা নির্দিষ্ট করা হয়েছে৷ পরবর্তী ক্ষেত্রে, কোষের আকার ডিভাইসের উপর নির্ভর করে পরিবর্তিত হতে পারে।

এছাড়াও, আপনার উইজেটের সমর্থিত আকারের রেঞ্জ সেট করতে, আপনি নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করতে পারেন:

<appwidget-provider
    android:minResizeWidth="180dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="530dp"
    android:maxResizeHeight="450dp">
</appwidget-provider>

পূর্ববর্তী গুণাবলী দ্বারা নির্দিষ্ট করা হয়েছে, উইজেটের প্রস্থ 180dp থেকে 530dp পর্যন্ত পরিবর্তনযোগ্য, এবং এর উচ্চতা 110dp থেকে 450dp পর্যন্ত পরিবর্তনযোগ্য। উইজেটটি তারপরে 3x2 থেকে 5x2 কোষের আকার পরিবর্তনযোগ্য, যতক্ষণ না নিম্নলিখিত শর্তগুলি উপস্থিত থাকে:

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

কোটলিন

val smallView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_small)
val mediumView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_medium)
val largeView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_large)

val viewMapping: Map<SizeF, RemoteViews> = mapOf(
        SizeF(180f, 110f) to smallView,
        SizeF(270f, 110f) to mediumView,
        SizeF(270f, 280f) to largeView
)

appWidgetManager.updateAppWidget(appWidgetId, RemoteViews(viewMapping))

জাভা

RemoteViews smallView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_small);
RemoteViews mediumView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_medium);
RemoteViews largeView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_large);

Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
viewMapping.put(new SizeF(180f, 110f), smallView);
viewMapping.put(new SizeF(270f, 110f), mediumView);
viewMapping.put(new SizeF(270f, 280f), largeView);
RemoteViews remoteViews = new RemoteViews(viewMapping);

appWidgetManager.updateAppWidget(id, remoteViews);

অনুমান করুন উইজেটটি পূর্ববর্তী কোড স্নিপেটে সংজ্ঞায়িত প্রতিক্রিয়াশীল লেআউট ব্যবহার করে। এর মানে হল R.layout.widget_weather_forecast_small হিসাবে নির্দিষ্ট করা লেআউটটি 180dp ( minResizeWidth ) x 110dp ( minResizeHeight ) থেকে 269x279dp (পরবর্তী কাটঅফ পয়েন্ট - 1) পর্যন্ত ব্যবহৃত হয়। একইভাবে, R.layout.widget_weather_forecast_medium 270x110dp থেকে 270x279dp পর্যন্ত ব্যবহার করা হয় এবং R.layout.widget_weather_forecast_large 270x280dp থেকে 530dp পর্যন্ত ব্যবহার করা হয় ( maxResizeWidth x 5dp maxResizeHeight )।

ব্যবহারকারী উইজেটের আকার পরিবর্তন করার সাথে সাথে ঘরের প্রতিটি আকারের সাথে খাপ খাইয়ে নিতে এর চেহারা পরিবর্তিত হয়, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

সবচেয়ে ছোট 3x2-গ্রিড আকারে আবহাওয়া উইজেটের উদাহরণ। UI দেখায়             অবস্থানের নাম (টোকিও), তাপমাত্রা (14°), এবং প্রতীক নির্দেশ করে             আংশিক মেঘলা আবহাওয়া।
চিত্র 2. 3x2 R.layout.widget_weather_forecast_small

একটি 4x2 'মাঝারি' আকারের আবহাওয়া উইজেটের উদাহরণ। উইজেটের আকার পরিবর্তন করা হচ্ছে             এইভাবে পূর্ববর্তী উইজেট আকার থেকে সমস্ত UI তৈরি করে,             এবং 'মোস্টলি মেঘলা' লেবেল এবং থেকে তাপমাত্রার পূর্বাভাস যোগ করে             বিকাল ৪টা থেকে সন্ধ্যা ৭টা।
চিত্র 3. 4x2 R.layout.widget_weather_forecast_medium

5x2 'মাঝারি' আকারের আবহাওয়া উইজেটের উদাহরণ। উইজেটের আকার পরিবর্তন করা হচ্ছে             এইভাবে পূর্ববর্তী আকারের মতো একই UI ফলাফল হয়, এটি ছাড়া             আরও অনুভূমিক স্থান নিতে এক কোষের দৈর্ঘ্য দ্বারা প্রসারিত।
চিত্র 4. 5x2 R.layout.widget_weather_forecast_medium

5x3 'বড়' আকারের আবহাওয়া উইজেটের উদাহরণ। উইজেটের আকার পরিবর্তন করা হচ্ছে             এইভাবে পূর্ববর্তী উইজেট আকার থেকে সমস্ত UI তৈরি করে,             এবং আবহাওয়ার পূর্বাভাস সহ উইজেটের ভিতরে একটি দৃশ্য যুক্ত করে             মঙ্গলবার এবং বুধবার। রৌদ্রোজ্জ্বল বা বৃষ্টির আবহাওয়া নির্দেশ করে প্রতীক             এবং প্রতিটি দিনের জন্য উচ্চ এবং নিম্ন তাপমাত্রা।
চিত্র 5. 5x3 R.layout.widget_weather_forecast_large

একটি 5x4 'বড়' আকারের আবহাওয়া উইজেটের উদাহরণ। উইজেটের আকার পরিবর্তন করা হচ্ছে             এইভাবে পূর্ববর্তী উইজেট আকার থেকে সমস্ত UI তৈরি করে,             এবং বৃহস্পতিবার এবং শুক্রবার যোগ করে (এবং তাদের সংশ্লিষ্ট চিহ্ন             আবহাওয়ার প্রকারের পাশাপাশি উচ্চ এবং নিম্ন তাপমাত্রা নির্দেশ করে             প্রতিটি দিনের জন্য)।
চিত্র 6. 5x4 R.layout.widget_weather_forecast_large