স্লাইস টেমপ্লেট

Slices তৈরি করার জন্য Android Jetpack-এ কীভাবে টেমপ্লেট বিল্ডার ব্যবহার করতে হয়, এই ডকুমেন্টে সেই বিষয়ে বিস্তারিত তথ্য দেওয়া আছে।

আপনার Slice টেমপ্লেট নির্ধারণ করুন

ListBuilder ব্যবহার করে স্লাইস তৈরি করা হয়। ListBuilder আপনাকে বিভিন্ন ধরনের সারি যোগ করার অনুমতি দেয় যা একটি তালিকায় দেখানো হয়। এই বিভাগে প্রতিটি সারির ধরন এবং সেগুলি কীভাবে তৈরি করা হয় তা বর্ণনা করা হয়েছে।

SliceAction

Slice টেমপ্লেটের সবচেয়ে প্রাথমিক এলিমেন্ট হল SliceAction। SliceAction-এ PendingIntent-এর সাথে লেবেল থাকে এবং এটি নিম্নলিখিতগুলির মধ্যে একটি:

• আইকন বোতাম
• ডিফল্ট টগল
• কাস্টম টগল (চালু/বন্ধ স্ট্যাটাস সহ একটি ড্রয়েবল)

এই বিভাগের বাকি অংশে বর্ণিত টেমপ্লেট বিল্ডাররা SliceAction ব্যবহার করে। SliceAction-এর একটি ইমেজ মোড থাকতে পারে যা নির্ধারণ করে যে অ্যাকশনের জন্য কীভাবে ছবিটি উপস্থাপন করা হবে:

• ICON_IMAGE: ছোট সাইজ ও টিন্ট করা যায়
• SMALL_IMAGE: ছোট সাইজ এবং টিন্ট করা যায় না
• LARGE_IMAGE: সবচেয়ে বড় সাইজ এবং টিন্ট করা যায় না

HeaderBuilder

বেশিরভাগ ক্ষেত্রে, আপনার টেমপ্লেটের জন্য একটি HeaderBuilder ব্যবহার করে হেডার সেট করা উচিত। হেডারে নিম্নলিখিত বিষয়গুলি থাকতে পারে:

• শীর্ষক
• সাবটাইটেল
• সারসংক্ষেপের সাবটাইটেল
• প্রাথমিক ক্রিয়া

নিচে কিছু উদাহরণস্বরূপ হেডার কনফিগারেশন দেখানো হল। মনে রাখবেন যে ধূসর রঙের বক্স সম্ভাব্য আইকন ও প্যাডিং লোকেশন দেখায়:

বিভিন্ন সারফেসে হেডার রেন্ডার করা

যখন কোনও Slice-এর প্রয়োজন হয়, তখন ডিসপ্লে সারফেস নির্ধারণ করে যে কীভাবে Slice রেন্ডার করতে হবে। মনে রাখবেন, হোস্টিং সারফেসের মধ্যে রেন্ডারিং কিছুটা আলাদা হতে পারে।

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

আপনি যদি নিজের টেমপ্লেটে কোনও হেডার নির্দিষ্ট না করে থাকেন, তাহলে সাধারণত আপনার ListBuilder-এ যোগ করা প্রথম সারিটি এর পরিবর্তে দেখানো হয়।

HeaderBuilder-এর উদাহরণ - হেডার সহ সাধারণ তালিকার Slice

Kotlin

fun createSliceWithHeader(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        setAccentColor(0xff0F9D) // Specify color for tinting icons
        header {
            title = "Get a ride"
            subtitle = "Ride in 4 min"
            summary = "Work in 1 hour 45 min | Home in 12 min"
        }
        row {
            title = "Home"
            subtitle = "12 miles | 12 min | $9.00"
            addEndItem(
                IconCompat.createWithResource(context, R.drawable.ic_home),
                ListBuilder.ICON_IMAGE
            )
        }
    }

জাভা

public Slice createSliceWithHeader(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }

    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .setAccentColor(0xff0F9D58) // Specify color for tinting icons.
            .setHeader( // Create the header and add to slice.
                    new HeaderBuilder()
                            .setTitle("Get a ride")
                            .setSubtitle("Ride in 4 min.")
                            .setSummary("Work in 1 hour 45 min | Home in 12 min.")
            ).addRow(new RowBuilder() // Add a row.
                    .setPrimaryAction(
                            createActivityAction()) // A slice always needs a SliceAction.
                    .setTitle("Home")
                    .setSubtitle("12 miles | 12 min | $9.00")
                    .addEndItem(IconCompat.createWithResource(getContext(), R.drawable.ic_home),
                            SliceHints.ICON_IMAGE)
            ); // Add more rows if needed...
    return listBuilder.build();
}

মনে রাখবেন: সহজভাবে বোঝানোর জন্য, উপরের ছবিতে দেখানো কিছু রঙ উদাহরণ কোডে বাদ দেওয়া হয়েছে

হেডারে SliceActions

SliceHeaders-এ SliceActions-ও দেখানো যেতে পারে:

Kotlin

fun createSliceWithActionInHeader(sliceUri: Uri): Slice {
    // Construct our slice actions.
    val noteAction = SliceAction.create(
        takeNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_pencil),
        ICON_IMAGE,
        "Take note"
    )

    val voiceNoteAction = SliceAction.create(
        voiceNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_mic),
        ICON_IMAGE,
        "Take voice note"
    )

    val cameraNoteAction = SliceAction.create(
        cameraNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_camera),
        ICON_IMAGE,
        "Create photo note"
    )

    // Construct the list.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        setAccentColor(0xfff4b4) // Specify color for tinting icons
        header {
            title = "Create new note"
            subtitle = "Easily done with this note taking app"
        }
        addAction(noteAction)
        addAction(voiceNoteAction)
        addAction(cameraNoteAction)
    }
}

জাভা

public Slice createSliceWithActionInHeader(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct our slice actions.
    SliceAction noteAction = SliceAction.create(takeNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_pencil),
            ListBuilder.ICON_IMAGE, "Take note");

    SliceAction voiceNoteAction = SliceAction.create(voiceNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_mic),
            ListBuilder.ICON_IMAGE,
            "Take voice note");

    SliceAction cameraNoteAction = SliceAction.create(cameraNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_camera),
            ListBuilder.ICON_IMAGE,
            "Create photo note");


    // Construct the list.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .setAccentColor(0xfff4b400) // Specify color for tinting icons
            .setHeader(new HeaderBuilder() // Construct the header.
                    .setTitle("Create new note")
                    .setSubtitle("Easily done with this note taking app")
            )
            .addRow(new RowBuilder()
                    .setTitle("Enter app")
                    .setPrimaryAction(createActivityAction())
            )
            // Add the actions to the ListBuilder.
            .addAction(noteAction)
            .addAction(voiceNoteAction)
            .addAction(cameraNoteAction);
    return listBuilder.build();
}

RowBuilder

আপনি RowBuilder ব্যবহার করে কন্টেন্টের সারি তৈরি করতে পারবেন। একটি সারি নিম্নলিখিত যেকোনও একটিকে সাপোর্ট করতে পারে:

• শীর্ষক
• সাবটাইটেল
• আইটেম শুরু করুন: SliceAction, আইকন বা টাইমস্ট্যাম্প
• শেষ আইটেম: SliceAction, আইকন বা টাইমস্ট্যাম্প
• প্রাথমিক ক্রিয়া

আপনি নিম্নলিখিত বিধিনিষেধ সাপেক্ষে বিভিন্ন উপায়ে সারির কন্টেন্ট একত্রিত করতে পারেন:

• স্লাইসের প্রথম সারিতে শুরুর আইটেম দেখানো হবে না
• SliceAction অবজেক্ট এবং Icon অবজেক্টের মিশ্রণ এন্ড আইটেম হতে পারে না
• একটি সারিতে শুধুমাত্র একটি টাইমস্ট্যাম্প থাকতে পারে

নিচের ছবিতে কন্টেন্টের উদাহরণ দেখানো হয়েছে। মনে রাখবেন যে ধূসর রঙের বক্স সম্ভাব্য আইকন ও প্যাডিং লোকেশন দেখায়:

RowBuilder-এর উদাহরণ - ওয়াই-ফাই টগল

নিচের উদাহরণে প্রাইমারি অ্যাকশন ও ডিফল্ট টগল সহ একটি সারি দেখানো হয়েছে।

Kotlin

fun createActionWithActionInRow(sliceUri: Uri): Slice {
    // Primary action - open wifi settings.
    val wifiAction = SliceAction.create(
        wifiSettingsPendingIntent,
        IconCompat.createWithResource(context, R.drawable.ic_wifi),
        ICON_IMAGE,
        "Wi-Fi Settings"
    )

    // Toggle action - toggle wifi.
    val toggleAction = SliceAction.createToggle(
        wifiTogglePendingIntent,
        "Toggle Wi-Fi",
        isConnected /* isChecked */
    )

    // Create the parent builder.
    return list(context, wifiUri, ListBuilder.INFINITY) {
        setAccentColor(0xff4285) // Specify color for tinting icons / controls.
        row {
            title = "Wi-Fi"
            primaryAction = wifiAction
            addEndItem(toggleAction)
        }
    }
}

জাভা

public Slice createActionWithActionInRow(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Primary action - open wifi settings.
    SliceAction primaryAction = SliceAction.create(wifiSettingsPendingIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_wifi),
            ListBuilder.ICON_IMAGE,
            "Wi-Fi Settings"
    );

    // Toggle action - toggle wifi.
    SliceAction toggleAction = SliceAction.createToggle(wifiTogglePendingIntent,
            "Toggle Wi-Fi", isConnected /* isChecked */);

    // Create the parent builder.
    ListBuilder listBuilder = new ListBuilder(getContext(), wifiUri, ListBuilder.INFINITY)
            // Specify color for tinting icons / controls.
            .setAccentColor(0xff4285f4)
            // Create and add a row.
            .addRow(new RowBuilder()
                    .setTitle("Wi-Fi")
                    .setPrimaryAction(primaryAction)
                    .addEndItem(toggleAction));
    // Build the slice.
    return listBuilder.build();
}

GridBuilder

GridBuilder ব্যবহার করে আপনি কন্টেন্টের গ্রিড তৈরি করতে পারবেন। গ্রিডে এই ধরনের ছবি ব্যবহার করা যেতে পারে:

• ICON_IMAGE: ছোট সাইজ ও টিন্ট করা যায়
• SMALL_IMAGE: ছোট সাইজ এবং টিন্ট করা যায় না
• LARGE_IMAGE: সবচেয়ে বড় সাইজ এবং টিন্ট করা যায় না

CellBuilder ব্যবহার করে গ্রিড সেল তৈরি করা হয়। একটি সেলে সর্বাধিক দুই লাইন টেক্সট ও একটি ছবি দেখানো যায়। কোনও সেল ফাঁকা থাকতে পারে না।

নিচের ছবিতে গ্রিডের উদাহরণ দেখানো হয়েছে:

GridRowBuilder-এর উদাহরণ - আশেপাশের রেস্তোরাঁ

নিচের উদাহরণে ছবি ও টেক্সট সহ গ্রিড সারি দেখানো হয়েছে।

Kotlin

fun createSliceWithGridRow(sliceUri: Uri): Slice {
    // Create the parent builder.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        header {
            title = "Famous restaurants"
            primaryAction = SliceAction.create(
                pendingIntent, icon, ListBuilder.ICON_IMAGE, "Famous restaurants"
            )
        }
        gridRow {
            cell {
                addImage(image1, LARGE_IMAGE)
                addTitleText("Top Restaurant")
                addText("0.3 mil")
                contentIntent = intent1
            }
            cell {
                addImage(image2, LARGE_IMAGE)
                addTitleText("Fast and Casual")
                addText("0.5 mil")
                contentIntent = intent2
            }
            cell {
                addImage(image3, LARGE_IMAGE)
                addTitleText("Casual Diner")
                addText("0.9 mi")
                contentIntent = intent3
            }
            cell {
                addImage(image4, LARGE_IMAGE)
                addTitleText("Ramen Spot")
                addText("1.2 mi")
                contentIntent = intent4
            }
        }
    }
}

জাভা

public Slice createSliceWithGridRow(Uri sliceUri) {
      if (getContext() == null) {
          return null;
      }
      // Create the parent builder.
      ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
              .setHeader(
                      // Create the header.
                      new HeaderBuilder()
                              .setTitle("Famous restaurants")
                              .setPrimaryAction(SliceAction
                                      .create(pendingIntent, icon, ListBuilder.ICON_IMAGE,
                                              "Famous restaurants"))
              )
              // Add a grid row to the list.
              .addGridRow(new GridRowBuilder()
                      // Add cells to the grid row.
                      .addCell(new CellBuilder()
                              .addImage(image1, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Top Restaurant")
                              .addText("0.3 mil")
                              .setContentIntent(intent1)
                      ).addCell(new CellBuilder()
                              .addImage(image2, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Fast and Casual")
                              .addText("0.5 mil")
                              .setContentIntent(intent2)
                      )
                      .addCell(new CellBuilder()
                              .addImage(image3, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Casual Diner")
                              .addText("0.9 mi")
                              .setContentIntent(intent3))
                      .addCell(new CellBuilder()
                              .addImage(image4, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Ramen Spot")
                              .addText("1.2 mi")
                              .setContentIntent(intent4))
                      // Every slice needs a primary action.
                      .setPrimaryAction(createActivityAction())
              );
      return listBuilder.build();
  }

RangeBuilder

RangeBuilder-এর সাহায্যে, আপনি এমন একটি সারি তৈরি করতে পারবেন যাতে প্রোগ্রেস বার বা ইনপুট রেঞ্জ, যেমন স্লাইডার থাকে।

প্রোগ্রেস ও স্লাইডারের উদাহরণ নিচের ছবিতে দেখানো হয়েছে:

RangeBuilder-এর উদাহরণ - স্লাইডার

নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে InputRangeBuilder ব্যবহার করে ভলিউম স্লাইডার সহ স্লাইস তৈরি করা যায়। প্রোগ্রেস রো তৈরি করতে, addRange() ব্যবহার করুন।

Kotlin

fun createSliceWithRange(sliceUri: Uri): Slice {
    return list(context, sliceUri, ListBuilder.INFINITY) {
        inputRange {
            title = "Ring Volume"
            inputAction = volumeChangedPendingIntent
            max = 100
            value = 30
        }
    }
}

জাভা

public Slice createSliceWithRange(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .addRow(new RowBuilder() // Every slice needs a row.
                    .setTitle("Enter app")
                      // Every slice needs a primary action.
                    .setPrimaryAction(createActivityAction())
            )
            .addInputRange(new InputRangeBuilder() // Create the input row.
                    .setTitle("Ring Volume")
                    .setInputAction(volumeChangedPendingIntent)
                    .setMax(100)
                    .setValue(30)
            );
    return listBuilder.build();
}

দেরিতে দেখানো কন্টেন্ট

SliceProvider.onBindSlice() থেকে যত দ্রুত সম্ভব আপনার Slice ফিরিয়ে দেওয়া উচিত। অনেকক্ষণ ধরে কল চললে ডিসপ্লেতে সমস্যা হতে পারে, যেমন স্ক্রিন ফ্লিকার করা এবং হঠাৎ করে ছোট বড় হয়ে যাওয়া।

আপনার কাছে এমন Slice কন্টেন্ট থাকলে যা দ্রুত লোড করা যায় না, তাহলে আপনি বিল্ডারে কন্টেন্ট লোড হচ্ছে বলে উল্লেখ করার সময় প্লেসহোল্ডার কন্টেন্ট দিয়ে Slice তৈরি করতে পারেন। কন্টেন্ট দেখানোর জন্য রেডি হয়ে গেলে, আপনার Slice URI ব্যবহার করে getContentResolver().notifyChange(sliceUri, null) কল করুন। এর ফলে SliceProvider.onBindSlice()-এ আরেকটি কল করা হয়, যেখানে আপনি নতুন কন্টেন্ট দিয়ে আবার Slice তৈরি করতে পারবেন।

দেরিতে দেখানো কন্টেন্টের উদাহরণ - অফিসে যাওয়ার রাইড

নিচে 'অফিসে যাওয়ার রাইড' সারিতে, অফিসে যাওয়ার দূরত্ব ডায়নামিকভাবে নির্ধারণ করা হয় এবং তা সাথে সাথে উপলভ্য নাও হতে পারে। কন্টেন্ট লোড হওয়ার সময় প্লেসহোল্ডার হিসেবে null সাবটাইটেল ব্যবহার করার জন্য উদাহরণ কোড দেখানো হয়েছে:

Kotlin

fun createSliceShowingLoading(sliceUri: Uri): Slice {
    // We’re waiting to load the time to work so indicate that on the slice by
    // setting the subtitle with the overloaded method and indicate true.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        row {
            title = "Ride to work"
            setSubtitle(null, true)
            addEndItem(IconCompat.createWithResource(context, R.drawable.ic_work), ICON_IMAGE)
        }
    }
}

জাভা

public Slice createSliceShowingLoading(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            // Construct the row.
            .addRow(new RowBuilder()
                    .setPrimaryAction(createActivityAction())
                    .setTitle("Ride to work")
                    // We’re waiting to load the time to work so indicate that on the slice by
                    // setting the subtitle with the overloaded method and indicate true.
                    .setSubtitle(null, true)
                    .addEndItem(IconCompat.createWithResource(getContext(), R.drawable.ic_work),
                            ListBuilder.ICON_IMAGE)
            );
    return listBuilder.build();
}

private SliceAction createActivityAction() {
    return SliceAction.create(
            PendingIntent.getActivity(
                    getContext(),
                    0,
                    new Intent(getContext(), MainActivity.class),
                    0
            ),
            IconCompat.createWithResource(getContext(), R.drawable.ic_home),
            ListBuilder.ICON_IMAGE,
            "Enter app"
    );
}

আপনার Slice-এর মধ্যে বন্ধ করা স্ক্রলিং ম্যানেজ করুন

আপনার Slice টেমপ্লেট দেখানো সারফেসে টেমপ্লেটের মধ্যে স্ক্রল করার সুবিধা নাও থাকতে পারে। এই ক্ষেত্রে, আপনার কিছু কন্টেন্ট হয়ত দেখানো হবে না।

উদাহরণ হিসেবে, ওয়াই-ফাই নেটওয়ার্কের তালিকা দেখানো Slice-এর কথা ভাবুন:

ওয়াই-ফাই নেটওয়ার্কের তালিকা দীর্ঘ হলে এবং স্ক্রল করার সুবিধা বন্ধ থাকলে, আপনি আরও দেখুন বোতাম যোগ করতে পারেন যাতে ব্যবহারকারীরা তালিকার সব আইটেম দেখতে পান। আপনি addSeeMoreAction() ব্যবহার করে এই বোতাম যোগ করতে পারবেন, যেমন নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

fun seeMoreActionSlice(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        // [START_EXCLUDE]
        // [END_EXCLUDE]
        setSeeMoreAction(seeAllNetworksPendingIntent)
        // [START_EXCLUDE]
        // [END_EXCLUDE]
    }

জাভা

public Slice seeMoreActionSlice(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY);
    // [START_EXCLUDE]
    listBuilder.addRow(new RowBuilder()
            .setTitle("Hello")
            .setPrimaryAction(createActivityAction())
    );
    // [END_EXCLUDE]
    listBuilder.setSeeMoreAction(seeAllNetworksPendingIntent);
    // [START_EXCLUDE]
    // [END_EXCLUDE]
    return listBuilder.build();
}

এটি নিচের ছবির মতো দেখায়:

আরও দেখুন বিকল্পে ট্যাপ করলে seeAllNetworksPendingIntent পাঠানো হয়।

বিকল্প হিসেবে, আপনি কাস্টম মেসেজ বা সারি দিতে চাইলে, RowBuilder যোগ করার কথা বিবেচনা করুন:

Kotlin

fun seeMoreRowSlice(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        // [START_EXCLUDE]
        // [END_EXCLUDE]
        seeMoreRow {
            title = "See all available networks"
            addEndItem(
                IconCompat.createWithResource(context, R.drawable.ic_right_caret), ICON_IMAGE
            )
            primaryAction = SliceAction.create(
                seeAllNetworksPendingIntent,
                IconCompat.createWithResource(context, R.drawable.ic_wifi),
                ListBuilder.ICON_IMAGE,
                "Wi-Fi Networks"
            )
        }
    }

জাভা

public Slice seeMoreRowSlice(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            // [START_EXCLUDE]
            .addRow(new RowBuilder()
                    .setTitle("Hello")
                    .setPrimaryAction(createActivityAction())
            )
            // [END_EXCLUDE]
            .setSeeMoreRow(new RowBuilder()
                    .setTitle("See all available networks")
                    .addEndItem(IconCompat
                                    .createWithResource(getContext(), R.drawable
                                            .ic_right_caret),
                            ListBuilder.ICON_IMAGE)
                    .setPrimaryAction(SliceAction.create(seeAllNetworksPendingIntent,
                            IconCompat.createWithResource(getContext(), R.drawable.ic_wifi),
                            ListBuilder.ICON_IMAGE,
                            "Wi-Fi Networks"))
            );
    // [START_EXCLUDE]
    // [END_EXCLUDE]
    return listBuilder.build();
}

এই পদ্ধতির মাধ্যমে যোগ করা সারি বা অ্যাকশন শুধুমাত্র তখনই দেখানো হয় যখন নিম্নলিখিত শর্তগুলির মধ্যে কোনও একটি পূরণ হয়:

• আপনার Slice-এর প্রেজেন্টার ভিউতে স্ক্রল করার সুবিধা বন্ধ করে দিয়েছেন
• উপলভ্য স্পেসে আপনার সব সারি দেখানো যাবে না

টেমপ্লেট একত্রিত করুন

একাধিক সারির ধরন একত্রিত করে আপনি একটি সমৃদ্ধ, ডায়নামিক Slice তৈরি করতে পারেন। যেমন, একটি স্লাইসে হেডার রো, একটি ছবি সহ গ্রিড এবং দুটি টেক্সট সেল সহ গ্রিড থাকতে পারে।

এখানে একটি Slice দেখানো হয়েছে যাতে হেডার সারি এবং তিনটি সেল সহ গ্রিড রয়েছে।