画像を格子状に貼りたい

画面表示 - 画像

画像を格子状に貼りたい

Biz/Browser DTより、画像を格子状に並べて表示するIconViewクラスが新しく追加されました。

定義された画像は左上から右下に向かって横方向へ配置されます。
IconViewクラスでは画像を表示するだけでなく、チェックボックスの表示や項目名の編集、画像のドラッグ＆ドロップを行うことも可能です。

サンプルで使用している機能は以下のとおりです。

プロパティ名説明

checkBoxes アイコンにチェックボックスを表示するか否かを設定する

editable アイコンの項目名を編集可能するか否かを設定する

selectionMode 単一または複数の選択モードを設定する
MODE_SINGLE：単一アイテム、MODE_MULTI：複数アイテム

vertIconSpacing アイコンの縦方向の間隔をピクセル単位で設定する

horzIconSpacing アイコンの横方向の間隔をピクセル単位で設定する

dragStyle アイコンのドラッグ方法を設定する
DRAG_STD：固定表示、DRAG_MOVE：ドラッグ＆ドロップ可能

※ドラッグ＆ドロップしたい場合、dragStyleプロパティとacceptDropプロパティを設定し、onDroppedイベントハンドラにドロップ時の処理を記述する。

【サンプル実行イメージ】

チェックボックスを表示する

アイコン名を編集する
※アイコン名をマウスクリックすると入力可能になります。

アイコンを複数選択する
※ShiftキーまたはCtrlキーを押下した状態で選択してください。

複数行・列で表示する

アイコンをドラッグ＆ドロップする

Form form1 {
    width = 649;
    height = 665;
    
    Image ic1;
    Image ic2;
    Image ic3;
    
    /* アイコン用画像をロードする
        任意の画像を用意してご確認ください */
    ic1.loadImage("IconView_icon11.png");
    ic2.loadImage("IconView_icon12.png");
    ic3.loadImage("IconView_icon13.png");
    
    Label label1 {
        x = 24;
        y = 8;
        width = 272;
        height = 32;
        border = BORDER_PLANE;
        value = "IconView1\r\nチェックボックスを表示";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_MIDDLE;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview1 {
        x = 24;
        y = 40;
        width = 272;
        height = 168;
        
        /* チェックボックスを表示 */
        checkboxes = true;
        
        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 10;
        
        IconViewItem items[3] {
            this[0].title = "icon1";
            this[0].icon = ^.^.ic1;

            this[1].title = "icon2";
            this[1].icon = ^.^.ic2;

            this[2].title = "icon3";
            this[2].icon = ^.^.ic3;
        }
    }
    
    Label label2 {
        x = 320;
        y = 8;
        width = 272;
        height = 32;
        border = BORDER_PLANE;
        value = "IconView2\r\nアイコン名の編集可能";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_MIDDLE;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview2 {
        x = 320;
        y = 40;
        width = 272;
        height = 168;
        font = new Font("MS ゴシック",14) ;
        
        /* アイコン名の編集を可能に設定 */
        editable = true;
        
        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 30;
        
        IconViewItem items[3] {
            this[0].title = "icon1";
            this[0].icon = ^.^.ic1;

            this[1].title = "icon2";
            this[1].icon = ^.^.ic2;

            this[2].title = "icon3";
            this[2].icon = ^.^.ic3;
        }
    }
    
    Label label3 {
        x = 24;
        y = 216;
        width = 272;
        height = 32;
        border = BORDER_PLANE;
        value = "IconView3\r\n複数選択が可能";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_MIDDLE;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview3 {
        x = 24;
        y = 248;
        width = 272;
        height = 168;
        font = new Font("MS ゴシック",14) ;
        
        /* 複数選択が可能 */
        selectionMode = MODE_MULTI;
        
        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 30;
        
        IconViewItem items[3] {
            this[0].title = "icon1";
            this[0].icon = ^.^.ic1;

            this[1].title = "icon2";
            this[1].icon = ^.^.ic2;

            this[2].title = "icon3";
            this[2].icon = ^.^.ic3;
        }
    }
    
    Label label4 {
        x = 320;
        y = 216;
        width = 272;
        height = 32;
        border = BORDER_PLANE;
        value = "IconView4\r\n複数行・列で表示";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_MIDDLE;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview4 {
        x = 320;
        y = 248;
        width = 272;
        height = 168;
        font = new Font("MS ゴシック",14) ;

        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 30;
        /* アイコン間の縦方向のスペースを設定 */
        vertIconSpacing = 20;

        IconViewItem items[30] {
            var i;
            var ic = new Image();
            if (!Application.DESIGNTIME) {
                for (i = 0; i < this.length; i ++) {
                    Print("IconView_icon1" + str(i % 3 + 1) + ".png");
                    /* 交互にアイコンを設定するように計算
                       用意するファイル
                       IconView_icon11.png
                       IconView_icon12.png
                       IconView_icon13.png
                    */
                    ic.loadImage("IconView_icon1" + str(i % 3 + 1) + ".png");
                    
                    this[i].icon = ic;
                    this[i].title = "icon" + str(i + 1);
                }
            }
        };
    }
    
    Label label5 {
        x = 24;
        y = 424;
        width = 272;
        height = 40;
        border = BORDER_PLANE;
        value = "IconView5\r\nドラッグ＆ドロップが可能\r\n※IconView5⇔IconView6間でお試しください";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_TOP;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview5 {
        x = 24;
        y = 464;
        width = 272;
        height = 168;
        font = new Font("MS ゴシック",14) ;

        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 30;
        
        /* アイコンをドラッグ可能にする */
        dragStyle = DRAG_MOVE;

        /* IconViewItemのドロップを許可 */
        acceptDrop = DisplayObject.DROP_OBJECT + DisplayObject.DROP_MOVEMODE + DisplayObject.DROP_COPYMODE;
        
        IconViewItem items[3] {
            this[0].title = "icon1";
            this[0].icon = ^.^.ic1;

            this[1].title = "icon2";
            this[1].icon = ^.^.ic2;

            this[2].title = "icon3";
            this[2].icon = ^.^.ic3;
        }
        
        /* ドロップイベント */
        function onDropped(e) {
            ^.processDropped(e, this);
        }
    }
    
    Label label6 {
        x = 320;
        y = 424;
        width = 272;
        height = 40;
        border = BORDER_PLANE;
        value = "IconView6\r\nドラッグ＆ドロップが可能\r\n※IconView5⇔IconView6間でお試しください";
        horizontalAlign = ALIGN_CENTER;
        verticalAlign = ALIGN_TOP;
        bgColor = new Brush("#ffffaaff", Brush.SOLID);
    }
    
    IconView iconview6 {
        x = 320;
        y = 464;
        width = 272;
        height = 168;
        font = new Font("MS ゴシック",14) ;
        
        /* アイコン間の横方向のスペースを設定 */
        horzIconSpacing = 30;
        
        /* アイコンをドラッグ可能にする */
        dragStyle = DRAG_MOVE;

        /* IconViewItemのドロップを許可 */
        acceptDrop = DisplayObject.DROP_OBJECT + DisplayObject.DROP_MOVEMODE + DisplayObject.DROP_COPYMODE;
        
        IconViewItem items[3] {
            this[0].title = "icon1";
            this[0].icon = ^.^.ic1;

            this[1].title = "icon2";
            this[1].icon = ^.^.ic2;

            this[2].title = "icon3";
            this[2].icon = ^.^.ic3;
        }
        
        /* ドロップイベント */
        function onDropped(e) {
            ^.processDropped(e, this);
        }
    }
    
    function processDropped(e, iconViewDropped) {
        var items = e.data;
        var indexItem;
        var src;
        var dst;
        
        var indexAt = -1;
        if (e.dropitem != null) {
            /* 挿入位置を取得し、ドロップしたアイコンを挿入 */
            indexAt = e.dropitem.index;
            iconViewDropped.items[indexAt].insert(items.length);
        } else {
            /* ドロップしたアイコンを最後の要素へ挿入 */
            indexAt = iconViewDropped.items.length;
            iconViewDropped.items.insert(items.length);
        }

        for (indexItem = 0; indexItem < items.length; indexItem ++) {
            /* アイコンのプロパティ設定を反映 */
            src = items[indexItem];
            dst = iconViewDropped.items[indexAt + indexItem];
            dst.value = src.value;
            dst.icon = src.icon;
            dst.title = src.title;
            dst.toolTip = src.toolTip;
            dst.checked = src.checked;
            dst.selected = src.selected;
        }
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ