如何在 Microsoft Band 的自定义布局中创建图标？

Question

我正在阅读Microsoft band SDK 文档。它在页面布局中提到了自定义图标，但我不知道如何创建一个。而且我没有在 SDK 示例中找到它。有人可以举例说明如何在 Android 的页面布局中使用图标吗？我正在寻找类似 Android 应用程序 MediaPlayer for Microsoft Band 的东西，它在一个页面上有三个圆形图标。

Answer 1

Microsoft Band 的 MediaPlayer 有图标按钮，这是一个稍微不同的东西，图标被按钮覆盖，但这也是我所做的，正如您在我的以下代码片段中看到的那样：

private boolean addTile(BandClient client) 抛出 BandIOException， InterruptedException，BandException {

    /* Set the options */
    Options opts = new Options();
    opts.inPreferredConfig = Bitmap.Config.ARGB_8888;
    opts.inScaled = false; /* Flag for no scalling */

    Bitmap tileIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.play_pause_tile, opts);
    Bitmap playPauseIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.play_pause, opts);
    Bitmap nextIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.next, opts);
    Bitmap previousIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.previous, opts);
    Bitmap volumeUpIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.volume_up, opts);
    Bitmap volumeDownIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.volume_down, opts);
    Bitmap ringingPhoneIcon = BitmapFactory.decodeResource(getBaseContext()
            .getResources(), R.raw.ringing_phone_large, opts);

    int hardwareVersion = Integer.parseInt(client.getHardwareVersion().await());
    PageLayout layout1 = createLayout1(hardwareVersion);
    PageLayout layout2 = createLayout2(hardwareVersion);

    BandTile tile = new BandTile.Builder(tileUUIDNew, "Media Control Tile", tileIcon)
            .setPageLayouts(layout1, layout2)
            .setPageIcons(playPauseIcon, nextIcon, previousIcon, volumeUpIcon, volumeDownIcon, ringingPhoneIcon).
                    setScreenTimeoutDisabled(true).build();
    if (client.getTileManager().addTile(this, tile).await()) {
        return true;
    }
    return false;
}

private PageLayout createLayout1(int hardwareVersion) {
    FilledPanel panel;
    if (hardwareVersion >= 20) {
        panel = new FilledPanel(0, 0, 245, 128);
        addLargeElements(panel, 4, 35, TileEventReceiver.PREVIOUS, ElementColorSource.BAND_HIGHLIGHT);
        addLargeElements(panel, 68, 35, TileEventReceiver.PLAY_PAUSE, ElementColorSource.BAND_HIGHLIGHT);
        addLargeElements(panel, 132, 35, TileEventReceiver.NEXT, ElementColorSource.BAND_HIGHLIGHT);
        addElements(panel, 196, 14, TileEventReceiver.VOLUME_UP, ElementColorSource.BAND_HIGHLIGHT);
        addElements(panel, 196, 72, TileEventReceiver.VOLUME_DOWN, ElementColorSource.BAND_HIGHLIGHT);
    } else {
        panel = new FilledPanel(0, 0, 245, 102);
        addLargeElements(panel, 4, 22, TileEventReceiver.PREVIOUS, ElementColorSource.BAND_HIGHLIGHT);
        addLargeElements(panel, 68, 22, TileEventReceiver.PLAY_PAUSE, ElementColorSource.BAND_HIGHLIGHT);
        addLargeElements(panel, 132, 22, TileEventReceiver.NEXT, ElementColorSource.BAND_HIGHLIGHT);
        addElements(panel, 196, 4, TileEventReceiver.VOLUME_UP, ElementColorSource.BAND_HIGHLIGHT);
        addElements(panel, 196, 56, TileEventReceiver.VOLUME_DOWN, ElementColorSource.BAND_HIGHLIGHT);
    }
    return new PageLayout(panel);
}

private PageLayout createLayout2(int hardwareVersion) {
    FilledPanel panel;
    if (hardwareVersion >= 20) {
        panel = new FilledPanel(0, 0, 245, 128);
        addVeryLargeElements(panel, 69, 27, TileEventReceiver.FIND_PHONE, ElementColorSource.BAND_HIGHLIGHT);
    } else {
        panel = new FilledPanel(0, 0, 245, 102);
        addVeryLargeElements(panel, 69, 14, TileEventReceiver.FIND_PHONE, ElementColorSource.BAND_HIGHLIGHT);
    }
    return new PageLayout(panel);
}

private void addElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
    p.addElements(
            new Icon(x, y, 46, 46)
            .setId(iconIndex + 10)
            .setColorSource(color),
            new FilledButton(x, y, 46, 46)
                .setId(iconIndex).setBackgroundColor(Color.BLACK));
}

private void addLargeElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
    p.addElements(
            new Icon(x, y, 60, 60)
            .setId(iconIndex + 10)
            .setColorSource(color),
            new FilledButton(x, y, 60, 60)
                .setId(iconIndex).setBackgroundColor(Color.BLACK));
}

private void addVeryLargeElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
    p.addElements(
            new Icon(x, y, 146, 76)
            .setId(iconIndex + 10)
            .setColorSource(color),
            new FilledButton(x, y, 146, 76)
                .setId(iconIndex).setBackgroundColor(Color.BLACK));
}

private String updatePages(BandClient client) throws BandIOException, InterruptedException, BandException {
    PageData page1 = new PageData(UUID.randomUUID(), 0);
    addDataElement(page1, TileEventReceiver.PREVIOUS);
    addDataElement(page1, TileEventReceiver.PLAY_PAUSE);
    addDataElement(page1, TileEventReceiver.NEXT);
    addDataElement(page1, TileEventReceiver.VOLUME_UP);
    addDataElement(page1, TileEventReceiver.VOLUME_DOWN);

    PageData page2 = new PageData(UUID.randomUUID(), 1);
    addLargeDataElement(page2, TileEventReceiver.FIND_PHONE);

    client.getTileManager().setPages(tileUUIDNew, page2, page1).await();
    return null;
}

private void addDataElement(PageData page, int iconIndex) {
    page
    .update(new FilledButtonData(iconIndex, Color.GRAY))
    .update(new IconData(iconIndex + 10, iconIndex));
}

private void addLargeDataElement(PageData page, int iconIndex) {
    page
    .update(new FilledButtonData(iconIndex, Color.GRAY))
    .update(new IconData(iconIndex + 10, iconIndex));
}

希望对您有所帮助。

P.S。当您为图标制作图像时，Microsoft Band SDK 当前仅读取图像的 alpha 通道。这意味着您的图像需要基于透明度，而不是颜色，如果您希望它显示在 Band 上。

如何在 Microsoft Band 的自定义布局中创建图标？

How to create an icon in custom layout in Microsoft band?

android

microsoft-band