Problema con createImageView

You must Login before you can answer or comment on any questions.

Hola buenas!

Tengo un problema con una aplicación que estoy haciendo y espero que me podáis ayudar.

Esta es la estructura de los archivos:

Resources
-img
--1.png
-ui
--common
---DetailView.js
---MasterView.js
--handheld
---android
---ApplicationWindow.js
Y este es el contenido de los archivos:

ApplicationWindow.js

function ApplicationWindow() {
    //declare module dependencies
    var MasterView = require('ui/common/MasterView'),
        DetailView = require('ui/common/DetailView');
 
    //create object instance
    var self = Ti.UI.createWindow({
        title:'Titulo',
        backgroundColor:'#ffffff'
    });
 
    //construct UI
    var masterView = new MasterView();
    self.add(masterView);
 
    //add behavior for master view
    masterView.addEventListener('itemSelected', function(e) {
        //create detail view container
        var detailView = new DetailView();
        var detailContainerWindow = Ti.UI.createWindow({
            title:e.name+' Cheat Sheet',
            navBarHidden:false,
            backgroundColor:'#ffffff'
        });
        detailContainerWindow.add(detailView);
        detailView.fireEvent('itemSelected',e);
        detailContainerWindow.open();
    });
 
    return self;
};
 
module.exports = ApplicationWindow;
MasterView.js
//Master View Component Constructor
function MasterView() {
    //create object instance, parasitic subclass of Observable
    var self = Ti.UI.createView({
        backgroundColor:'#334455'
    });
 
    //some dummy data for our table view
    var tableData = [
        {title:'1', height:70, hasChild:true, backgroundColor:"#334455", color:"#fff", className:"layout_one"},
        {title:'2', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'3', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'4', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'5', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'6', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'7', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'8', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'9', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'},
        {title:'10', height:70, hasChild:true, className:"layout_one", imagen:'../../img/1.png'}
    ];
 
    var table = Ti.UI.createTableView({
        data:tableData
    });
    self.add(table);
 
    //add behavior
    table.addEventListener('click', function(e) {
        self.fireEvent('itemSelected', {
            name:e.rowData.title,
            imagen:e.rowData.imagen
        });
    });
 
    return self;
};
 
module.exports = MasterView;
DetailView.js
function DetailView() {
    var self = Ti.UI.createView({
 
    touchEnabled : true
 
    });
 
    self.addEventListener('itemSelected', function(e) {
 
    // Create an ImageView.
    var anImageView = Ti.UI.createImageView({
        touchEnabled : true,
        backgroundImage : e.imagen,
        /*width : 763,
        height : 1037,*/
        top : 0,
        left : 0
    });
 
    // Add to the parent view.
    self.add(anImageView);
 
    });
 
    return self;
};
app.js
if (Ti.version < 1.8 ) {
    alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');          
}
 
// This is a single context application with mutliple windows in a stack
(function() {
    //determine platform and form factor and render approproate components
    var osname = Ti.Platform.osname,
        version = Ti.Platform.version,
        height = Ti.Platform.displayCaps.platformHeight,
        width = Ti.Platform.displayCaps.platformWidth;
 
    //considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
    //yourself what you consider a tablet form factor for android
    var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));
 
    var Window;
    if (isTablet) {
        Window = require('ui/tablet/ApplicationWindow');
    }
    else {
        // iPhone and Mobile Web make use of the platform-specific navigation controller,
        // all other platforms follow a similar UI pattern
        if (osname === 'iphone') {
            Window = require('ui/handheld/ios/ApplicationWindow');
        }
        else if (osname == 'mobileweb') {
            Window = require('ui/handheld/mobileweb/ApplicationWindow');
        }
        else {
            Window = require('ui/handheld/android/ApplicationWindow');
        }
    }
    new Window().open();
})();
Y bueno la aplicación funciona bien, pero cuando la imagen se abre, no me deja desplazarme por la pantalla para poderla ver entera.

¿Sabéis algo al respecto?

Gracias!

— asked 9 months ago by David Ortega
1 Comment
  • Missing from your question are a number of important pieces of information. I suggest you take a look at the Using Questions and Answers article, specifically the Q&A Question Checklist. The missing information is critical to reproducing problems in a test environment and often indicates other factors that cause the undesirable outcome you are experiencing.

    — commented 9 months ago by Stephen Feather

4 Answers

/*width : 763,
height : 1037,*/
If this is about the size of your image, and you are trying to load it on a handheld screen, place it into a view that can be scrolled. This would allow the user to pan across the image.

— answered 9 months ago by Stephen Feather
answer permalink
11 Comments
  • Raúl y yo hemos dicho lo que hacer. Coloca el imageView dentro de un ScrollView para que usted pueda ver la imagen a tamaño completo y el usuario podrá recorrer.

    Es contraproducente para escribir en español en lo que es principalmente un foro de Inglés como otros usuarios no va a obtener un beneficio a partir de las respuestas en este hilo.

    — commented 9 months ago by Stephen Feather

  • That being said:

    var scrollView = Ti.UI.createScrollView({
      bottom:120,
      contentHeight: 'auto',
     ContentWidth: 'auto',
      layout: 'vertical'
    });
     
    scrollView.add(anImageView);
    The other oddity in your code is that you are assigning your image as the backgroundImage: and not as the image: of your image view.

    — commented 9 months ago by Stephen Feather

  • adjust the scrollView actual height, width, top, bottom as needed. Just noticed that the bottom:120 was in there

    — commented 9 months ago by Stephen Feather

  • Show 8 more comments

No has comentado que es lo que debería hacer la aplicación, pero si lo que buscas es tener una imagen "grande" en el DetailView tendrías que usar un ScrollView y meter la imagen allí adentro

Efectivamente, lo que quiero hacer es tener una tabla con diferentes opciones y al pinchar en cada una de ellas me lleve a una imagen. La imágenes son de 763x1037 px por lo que necesito poder hacer scroll y actualmente como lo tengo ahora no me lo permite.

Sorry,But Not able to Understand your Question,Can you Please Tell your problem in English.

Your Answer

Think you can help? Login to answer this question!