0
Thumbsup

いい質問だ

0

Thumbsdown

うーん

scrollViewの上に載ったimageViewをタップできない

uuutee
uuutee 0

投稿日:2013-03-27 18:52:59

お世話になっております。
現在Titaniumで写真のギャラリーアプリを作っております。

scrollViewの上にimageViewをタイル状に配置して、タップするとscrollableViewのウインドウが開き、スワイプで次々画像を閲覧できるiOSの写真アプリのようなものを作っているのですが、
最初のいくつかのimageViewをタップするとなぜか後ろにあるscrollViewがタップ検知されてしまいます。正常にタップできるものもあるのですが、違いが不明で原因がわかりません。
ネット上の記事を参考にしたり、クリーン→ビルド、無名関数でくくったりしてみたのですが、どれもうまくいかず。八方塞がりの状態です。

お分かりになる方がいらっしゃいましたらご回答いただけると幸いです。

よろしくお願いします。

SDK: Titanium Studio 3.0.2
OS: iOS

参考にしたサイト
http://old.imthinker.net/2011/12/%E3%80%90titanium-advent-calendar-2011%EF%BC%9A%E5%85%AD%E6%97%A5%E7%9B%AE%E3%80%91titanium%E3%81%A7%E3%82%82%E4%BE%BF%E5%88%A9%E3%81%AAjs%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/
http://old.imthinker.net/2012/12/titanium-3-ui-event-bubbling/



回答

uuutee
uuutee
0

Thumbsup

いい回答

0

Thumbsdown

うーん

コードの部分がはじかれるので、こちらに掲載させてください

    var scrollView = Ti.UI.createScrollView({
        contentWidth: Ti.Platform.displayCaps.platformWidth,
        contentHeight: 'auto',
        layout: 'horizontal',
        scrollType: 'vertical'
    });
    win.add(scrollView);

    // JSONデータを取得
    app.fn.loadjson = function (jsonUrl){
        var xhr = Ti.Network.createHTTPClient();
        xhr.open('GET', jsonUrl);
        xhr.onload = function(){
            json = JSON.parse(this.responseText);
            app.fn.createThumbnail(json);
        };
        xhr.onerror = function(error){
            Ti.API.info(error);
        }
        xhr.send();
    }

    // サムネイル一覧を生成
    app.fn.createThumbnail = function (data){
        var thumbnail = {};
        for (var i = 0; i < data.length; i++) {
            thumbnail[i] = Ti.UI.createImageView({
                image: data[i].image.resized.s100,
                top: 0,
                left: 0,
                width: thumbSize,
                height: thumbSize,
                textAlign: 'center',
                extend:{
                    index: i,
                    id: data[i].id,
                    date: data[i].date,
                    title: data[i].title,
                    image: {
                        original: data[i].image.original,
                        resized: {
                            s100: data[i].image.resized.s100,
                            s400: data[i].image.resized.s400
                        }
                    },
                    category: data[i].category,
                    shop: data[i].shop
                }
            });
            scrollView.add(thumbnail[i]);
        };
        scrollView.addEventListener('singletap', setEvent);
    }

yagi_
yagi_
2540
Tcad_icon Tcmd_icon Tce_icon

Thumbsup

いい回答

0

Thumbsdown

うーん

imageViewを作成する際にbubbleParentをfalseにするとイベントは伝播しません。デフォルトではtrueなのでイベントは伝播するようになっています。

thumbnail[i] = Ti.UI.createImageView({
            bubbleParent: false,
            image: data[i].image.resized.s100,

ryugoo
ryugoo
330
Tcad_icon Tcmd_icon Tce_icon

Thumbsup

いい回答

0

Thumbsdown

うーん

参考にして頂いたブログを書いたものです。
実現したいのであろう、アプリケーションを書いてみました。
以下のコードを参考にしてみてください。 SDK は 3.0.2.GA で、 iOS で動作確認をしてあります。

/*jslint devel:true */
/*global Titanium */
(function (Ti) {
    "use strict";
    var tabGroup, tab, win, sview;
    tabGroup = Ti.UI.createTabGroup();
    win = Ti.UI.createWindow({
        backgroundColor: "#FFFFFF",
        title: "Photo Gallery",
        tabBarHidden: true
    });
    tab = Ti.UI.createTab({
        window: win
    });
    sview = Ti.UI.createScrollView({
        contentWidth: Ti.Platform.displayCaps.platformWidth,
        contentHeight: "auto",
        width: Ti.UI.FILL,
        height: Ti.UI.FILL,
        showVerticalScrollIndicator: true,
        showHorizontalScrollIndicator: true,
        layout: "horizontal"
    });
    win.add(sview);

    // アプリを開いたら行う処理
    tab.addEventListener("focus", function () {
        var http;
        http = Ti.Network.createHTTPClient();
        http.open("get", "http://imthinker.net/sample.json?rnd=" + Date.now());
        http.onload = function () {
            var thums = [],
                views = [],
                scWin,
                scView,
                data = (JSON.parse(http.responseText)).data,
                i,
                l;

            scWin = Ti.UI.createWindow({
                backgroundColor: "#FFFFFF"
            });

            thums = data.map(function (item) {
                var imgView;
                imgView = Ti.UI.createImageView({
                    hires: true,
                    image: item.img,
                    width: 57,
                    height: 57,
                    top: 6,
                    left: 6,
                    backgroundColor: "#000000",
                    imgId: item.id
                });
                imgView.addEventListener("click", function () {
                    scView.currentPage = imgView.imgId - 1;
                    tab.open(scWin);
                });
                sview.add(imgView);
                return imgView;
            });

            views = data.map(function (item) {
                var view, imgView;
                view = Ti.UI.createView({
                    backgroundColor: "#FFFFFF",
                    width: Ti.UI.FILL,
                    height: Ti.UI.FILL
                });
                imgView = Ti.UI.createImageView({
                    hires: true,
                    image: item.img,
                    width: 57,
                    height: 57
                });
                view.add(imgView);
                return view;
            });

            scView = Ti.UI.createScrollableView({
                views: views,
                backgroundColor: "#FFFFFF"
            });

            scWin.add(scView);

        };
        http.onerror = function (err) {
            alert("HTTPClient でエラーが発生しました。詳細はコンソールログを見てください。");
            console.log("-- Start httpclient log -------------------------------------------------------");
            console.log(JSON.stringify({
                status: http.status,
                error: err
            }));
            console.log("-- End httpclient log ---------------------------------------------------------");
        };
        http.send(null);
    });

    tabGroup.addTab(tab);
    tabGroup.open();
}(Titanium));

ログインすると回答することができます。