Appcelerator实现相册全览、图片多选及自定义视图技术求助

我明白你遇到的痛点了——Ti.Media.openPhotoGallery在iOS上确实默认只支持单图选择，而且原生UI的自定义空间非常有限，没法满足你全览相册、多选图片并创建订单的需求。下面给你两个可行的解决方案，按需选择：

方案1：开启原生相册的多选功能（快速实现） #

其实Ti.Media.openPhotoGallery本身就支持iOS的多选特性，只是需要显式配置allowMultipleSelection参数。这个方案适合你只需要多选功能，对UI没有特别定制需求的场景：

Ti.Media.openPhotoGallery({
    allowMultipleSelection: true, // iOS下开启多选开关
    mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO], // 只显示图片
    success: function(e) {
        // e.media 返回选中的图片数组
        const selectedImages = e.media;
        console.log(`已选中 ${selectedImages.length} 张图片`);
        
        // 调用你的订单创建逻辑
        createOrderWithImages(selectedImages);
    },
    cancel: function() {
        console.log("用户取消了图片选择");
    },
    error: function(e) {
        console.error(`相册选择出错：${e.error}`);
    }
});

// 示例：创建订单的核心函数
function createOrderWithImages(images) {
    // 这里可以实现订单逻辑：比如上传图片、保存订单信息等
    images.forEach((img, index) => {
        console.log(`图片${index+1}本地路径：${img.nativePath}`);
        // 可通过nativePath获取图片本地地址，用于上传或本地存储
    });
}

方案2：自定义相册浏览UI（完全控制视图） #

如果原生相册的UI不符合你的产品设计，那最好的方式是自己通过Ti.Media.queryPhotos获取所有相册图片，再用Ti.UI组件搭建自定义的浏览界面，这样你能完全控制布局、选中样式、交互逻辑：

// 第一步：查询设备相册中的所有图片
Ti.Media.queryPhotos({
    mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO],
    sort: Ti.Media.SORT_BY_DATE_DESCENDING, // 按拍摄时间倒序
    success: function(e) {
        const allPhotos = e.photos;
        let selectedPhotos = [];

        // 第二步：创建自定义相册浏览窗口
        const galleryWin = Ti.UI.createWindow({
            title: "全览相册",
            layout: "vertical",
            backgroundColor: "#f5f5f5"
        });

        // 第三步：用CollectionView展示图片网格
        const collectionView = Ti.UI.createCollectionView({
            layout: {
                type: Ti.UI.COLLECTION_VIEW_LAYOUT_GRID,
                columns: 3,
                spacing: 4
            },
            items: allPhotos.map(photo => ({
                properties: { photo, isSelected: false },
                image: {
                    image: photo.thumbnail, // 用缩略图提升加载性能
                    width: Ti.UI.FILL,
                    height: Ti.UI.FILL,
                    borderRadius: 4
                },
                overlay: {
                    backgroundColor: "rgba(0,0,0,0.5)",
                    visible: false,
                    width: Ti.UI.FILL,
                    height: Ti.UI.FILL,
                    borderRadius: 4
                },
                checkmark: {
                    image: "/images/checkmark.png", // 自定义选中图标
                    visible: false,
                    right: 8,
                    bottom: 8,
                    width: 24,
                    height: 24
                }
            }))
        });

        // 处理图片选中/取消事件
        collectionView.addEventListener("itemclick", function(e) {
            const item = e.item;
            item.properties.isSelected = !item.properties.isSelected;
            item.overlay.visible = item.properties.isSelected;
            item.checkmark.visible = item.properties.isSelected;

            // 更新选中图片数组
            if (item.properties.isSelected) {
                selectedPhotos.push(item.properties.photo);
            } else {
                const idx = selectedPhotos.indexOf(item.properties.photo);
                idx > -1 && selectedPhotos.splice(idx, 1);
            }
            // 更新确认按钮文字
            confirmBtn.title = `确认选择(${selectedPhotos.length})`;
        });

        // 第四步：添加确认按钮
        const confirmBtn = Ti.UI.createButton({
            title: "确认选择(0)",
            bottom: 20,
            width: Ti.UI.FILL,
            height: 50,
            backgroundColor: "#007aff",
            color: "#fff",
            borderRadius: 8
        });

        confirmBtn.addEventListener("click", function() {
            if (selectedPhotos.length === 0) {
                alert("请至少选择一张图片");
                return;
            }
            // 跳转到订单创建流程
            createOrderWithImages(selectedPhotos);
            galleryWin.close();
        });

        // 组装窗口并打开
        galleryWin.add(collectionView);
        galleryWin.add(confirmBtn);
        galleryWin.open();
    },
    error: function(e) {
        console.error(`查询相册失败：${e.error}`);
    }
});

注意事项 #

• 内存优化：展示图片时优先使用thumbnail（缩略图），避免直接加载原图导致内存溢出；上传时再通过nativePath获取原图地址。
• 权限配置：在tiapp.xml中添加iOS相册权限描述，确保App能正常访问相册：

  <ios>
      <plist>
          <dict>
              <key>NSPhotoLibraryUsageDescription</key>
              <string>需要访问您的相册以选择图片创建订单</string>
          </dict>
      </plist>
  </ios>
  

内容的提问来源于stack exchange，提问作者user3752705