Как реализовать GRID / TILED Image View с прокруткой в BB10
Я хочу реализовать GRID / TILED Image View, где мозаичные изображения будут нарисованы на лету после загрузки. Я хочу, чтобы в ней можно было выполнять пинч / зум и другие сенсорные действия. Скажем, если я панорамирую вид, новые плитки будут загружены и прорисованы на виде полностью или частично. Я не мог найти способ сделать это с любым существующим элементом управления пользовательского интерфейса. Также те существующие элементы управления пользовательского интерфейса не могут быть разделены на подклассы и не имеют никакого метода paint () / onDraw (например, view / canvas в android) для переопределения. Может быть, imageView с scrollview может решить проблему. Другим вариантом может быть использование внешнего окна. В обоих случаях я не уверен, как они могут быть реализованы или как жесты будут обрабатываться в этих случаях. Или есть ли другой способ сделать это. Пожалуйста, дайте мне некоторые идеи, чтобы решить это.
Решение
Создайте CustomImageView, который будет загружать изображение с удаленного устройства, и поместите этот CustomImageView в ListView с помощью GridListLayout. Вы можете использовать класс ListItemProvider для настройки вашего ListView. Я дал код для всех необходимых классов ниже.
//main.qml
import bb.cascades 1.0
import my.library 1.0 //Custom library where CustomImageView and our ListProvider resides
Page {
content: ScrollView {
gestureHandlers: [
PinchHandler {
onPinchUpdated: {
scrollView.zoomToPoint(event.midPointX, event.midPointY, event.pinchRatio)
}
}
]
id: scrollView
scrollViewProperties {
scrollMode: ScrollMode.None
pinchToZoomEnabled: true
}
ListView {
overlapTouchPolicy: OverlapTouchPolicy.Allow
objectName: "listView"layout: GridListLayout {
columnCount: 2
}
listItemProvider: CustomImageViewProvider { //Our list item provider
}
listItemComponents: [
ListItemComponent {
CustomImageView { //CustomImageView to load image from remote via internet
}
}
]
dataModel: XmlDataModel {
source: "model/path.xml"}
}
}
}
//CustomImageView.cpp CustomControl для загрузки изображения из удаленного местоположения через интернет
CustomImageView::CustomImageView(Container *parent) :
CustomControl(parent) {
Container *contentContainer = new Container();
DockLayout *contentLayout = new DockLayout();
contentContainer->setLayout(contentLayout);
mItemImage = ImageView::create("");
mItemImage->setHorizontalAlignment(HorizontalAlignment::Fill);
mItemImage->setVerticalAlignment(VerticalAlignment::Fill);
contentContainer->add(mItemImage);
setRoot(contentContainer);
}
void CustomImageView::updateItem(const QString imagePath) {
WebServiceRequest *webServiceRequest = new WebServiceRequest(imagePath);
connect(webServiceRequest, SIGNAL(complete(QByteArray, bool)), this,
SLOT(onComplete(QByteArray, bool)));
webServiceRequest->getResponse();
}
void CustomImageView::onComplete(QByteArray data, bool success) {
if (success) {
mItemImage->setImage(Image(data));
mItemImage->setVisible(true);
} else {
qDebug() << "Request failed";
}
}
void CustomImageView::select(bool select) {
}
void CustomImageView::reset(bool selected, bool activated) {
mItemImage->setVisible(false);
}
void CustomImageView::activate(bool activate) {
}
//WebServiceRequest.cpp Этот класс используется CustomImageView для отправки запроса на изображение через интернет
WebServiceRequest::WebServiceRequest(QString url) {
webServiceUrl = url;
}
WebServiceRequest::~WebServiceRequest() {
}
void WebServiceRequest::getResponse() {
QNetworkAccessManager* netManager = new QNetworkAccessManager();
if (!netManager) {
qDebug() << "Unable to create QNetworkAccessManager!";
emit complete("Unable to create QNetworkAccessManager!", false);
return;
}
QUrl url(webServiceUrl);
QNetworkRequest req(url);
QNetworkReply* ipReply = netManager->get(req);
connect(ipReply, SIGNAL(finished()), this, SLOT(onReply()));
}
void WebServiceRequest::onReply() {
QNetworkReply* reply = qobject_cast<QNetworkReply*>(sender());
QString response;
bool success = false;
if (reply) {
if (reply->error() == QNetworkReply::NoError) {
int available = reply->bytesAvailable();
if (available > 0) {
success = true;
emit complete(reply->readAll(), success);
}
} else {
response =
QString("Error: ") + reply->errorString()
+ QString(" status:")
+ reply->attribute(
QNetworkRequest::HttpStatusCodeAttribute).toString();
}
reply->deleteLater();
}
}
//CustomImageViewProvider.cpp Это наш ListItemProvider, используемый для настройки нашего ListView.
CustomImageViewProvider::CustomImageViewProvider() {
}
VisualNode * CustomImageViewProvider::createItem(ListView* list,
const QString &type) {
CustomImageView *myCustomImageView = new CustomImageView();
return myCustomImageView;
}
void CustomImageViewProvider::updateItem(ListView* list,
bb::cascades::VisualNode *listItem, const QString &type,
const QVariantList &indexPath, const QVariant &data) {
QVariantMap map = data.value<QVariantMap>();
CustomImageView *myCustomImageView = static_cast<CustomImageView *>(listItem);
qDebug() << indexPath;
QString imagePath = map["path"].toString();
myCustomImageView->updateItem(imagePath);
}
Зарегистрировать CustomImageView & CustomImageViewProvider с qml перед созданием и настройкой корня main.qml в конструкторе. Так что они доступны в нашем qml
qmlRegisterType < CustomImageView > ("my.library", 1, 0, "CustomImageView");
qmlRegisterType < CustomImageViewProvider > ("my.library", 1, 0, "CustomImageViewProvider");
//Path.xml Все пути хранятся в этом файле, который используется в качестве DataModel в виде списка
<root>
<image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/>
<image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/>
<image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/>
<image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/>
<image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/>
<image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/>
<image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/>
<image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/>
<image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/>
<image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/>
<image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/>
<image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/>
<image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/>
<image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/>
<image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/>
<image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/>
<image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/>
<image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/>
<image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/>
<image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/>
<image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/>
<image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/>
<image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/>
<image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/>
<image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/commons/e/eb/A_landscape_in_Peradeniya,_Sri_Lanka.jpg"/>
<image path="http://lejournaldelaphotographie.com/system/photos/54840/med_fernando-brito_lost-in-the-landscape_1-jpg.jpg"/>
<image path="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/modern-landscape.jpg"/>
<image path="http://cdn.c.photoshelter.com/img-get/I0000kRJbKDHBT30/s/900/720/Landscape-sunset-15.jpg"/>
<image path="http://www.cashmoredesign.com/images/large/landscape-5.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/11/50b7d0ddb3fc4b239a0000f2_arteology-atelier-37-2_-atelier37-2_arteologie-34-528x396.jpg"/>
<image path="http://upload.wikimedia.org/wikipedia/en/e/e8/Berchem,_Nicolaes_~_Landscape_with_Herdsmen_Gathering_Sticks,_early_1650s,_oil_on_panel,_private_collection,_New_York.jpg"/>
<image path="http://www.taschen.com/media/images/960/teaser_mi_arch_now_landscape_top_1203301047_id_536230.jpg"/>
<image path="http://lasersandlights.com/images/medium/landscape%20bliss%20spright.jpg"/>
<image path="http://uploads0.wikipaintings.org/images/pieter-bruegel-the-elder/landscape-with-the-flight-into-egypt-1563.jpg"/>
<image path="http://middo.me/wp-content/uploads/2012/07/Landscape-with-calm-river-1024x640.jpg"/>
<image path="http://ad009cdnb.archdaily.net/wp-content/uploads/2012/07/500de84928ba0d609d000038_fort-werk-aan-t-spoel-rietveld-landscape_rob6999kopierl-528x352.jpg"/>
</root>
Другие решения
Других решений пока нет …
detector