2009-05-12 22 views
78

¿Hay alguna herramienta o sitio web que me pueda ayudar a crear una interfaz de usuario para una aplicación de Android usando la función de arrastrar y soltar?¿Forma fácil de construir la interfaz de usuario de Android?

Encontré this site pero quiero saber si hay una herramienta o sitio web más estable para esto?

+0

[Actualización] Android Studio está en versión beta pero parece prometedor .. http://developer.android.com/sdk/installing/studio.html –

+0

[Conceptos básicos de la interfaz de usuario de Android para principiantes] (http://www.singhajit.com/android-ui-for- principiantes /) –

Respuesta

28

el Android Development Tools (ADT) plug-in para Eclipse incluye un editor visual de archivos de diseño de aplicaciones para Android:

http://developer.android.com/tools/help/adt.html

+4

Especialmente el que viene con Android SDK 1.5, es mucho mejor que DroidDraw. –

+8

Si alguien tiene problemas para encontrar esto (sé que lo hice), simplemente abra su main.xml en Eclipse. Si eso falla, haga clic derecho en él, abra con> Android Layout Editor. Si eso falla, su ADT puede no instalarse correctamente. –

+12

El editor visual en Eclipse apesta. Realmente es inhibidor al permitir que el usuario plantee las cosas correctamente. –

5

Droiddraw es buena. Lo he estado utilizando desde hace mucho tiempo y aún no he tenido problemas (aunque a veces falla, pero está bien)

+3

"a veces se cuelga, pero eso está bien" - ese es mi mantra también;) – demoncodemonkey

+0

"a veces se cuelga, pero eso está bien" - lol. que realmente me hizo reír: D – mr5

8

DroidDraw parece ser muy útil. Tiene una interfaz limpia y fácil, y es un software gratuito. Disponible para Windows, Linux y Mac OS X. Aconsejo una donación.

Si no te gusta, deberías echarle un vistazo al this site. Hay algunas otras opciones y otras herramientas útiles.

+0

No tiene nada para el desarrollo nativo de Android con guis no estáticos fuera de línea. –

+0

Parece que DroidDraw está muerto. El enlace está activo pero muestra la página web del host del dominio.Está vacante ~ –

0

Encontré que usar el http://pencil.evolus.vn/ junto con las plantillas de lápiz del proyecto http://code.google.com/p/android-ui-utils/ funciona excepcionalmente bien. Muy simple de usar, es muy fácil simular diseños elaborados

+0

Tal vez me falta algo, pero, por lo que puedo ver, solo puedes colocar cosas en un Nexus y no estoy seguro de cómo obtener el código xml para main.xml –

45

Permítanme ser el que dé un toque de realidad a este tema. No hay una buena herramienta de GUI para trabajar con Android. Si vienes de un entorno de GUI de aplicaciones nativas como, por ejemplo, Delphi, estarás tristemente decepcionado con la experiencia del usuario con el editor de ADK y DroidDraw. He intentado varias veces trabajar con DroidDraw de forma productiva, y siempre vuelvo a rodar el XML a mano.

El ADK es un buen punto de partida, pero no es fácil de usar. Posicionar los componentes dentro de los diseños es una pesadilla. Parece que DroidDraw sería fantástico, pero ni siquiera puedo abrir diseños XML existentes y funcionales con él. De alguna manera pierde la mitad del diseño y no puede extraer las imágenes que he especificado para botones, fondos, etc.

La cruda realidad es que el espacio para desarrolladores de Android necesita urgentemente una solución flexible, fácil de usar. herramienta de desarrollo de GUI robusta y de uso similar a las utilizadas para el desarrollo de .NET y Delphi.

+9

Estoy de acuerdo. Trabajar con diseños en Android es un dolor en el culo! –

+4

Me gustaría que abandonaran XML completamente a favor de CSS en lo que respecta al diseño. –

+0

Todo el marco de la GUI de Android debe ir, rápido. Simplemente no es utilizable. –

0

No dice que este es el mejor camino a seguir, pero es bueno tener opciones. Necessitas es un proyecto que puertos Qt a Android. Todavía está en sus primeras etapas y carece de características completas, pero para aquellos que conocen Qt y no quieren molestarse con la terrible falta de buenas herramientas para la interfaz de usuario de Android, sería prudente al menos considerar usar esto.

1

http://www.appinventor.mit.edu/

Creación de una aplicación de App Inventor se inicia en el navegador, donde se diseña forma en que la aplicación se verá. Entonces, como encajar las piezas del rompecabezas, usted establece el comportamiento de su aplicación. Mientras tanto, a través de una conexión en vivo entre su computadora y su teléfono, su aplicación aparecerá en su teléfono.

6

También puedes intentar this.Si te gusta el concepto de modelo de controlador de vista y prototipado rápido, entonces yo diría que le va a gustar la idea detrás de él;)

SimpleUi (https://github.com/bitstars/SimpleUi)

La interfaz de usuario generada (código de abajo):

enter image description here

The complete code to create this Android UI:

enter image description here

I Úselo en aplicaciones reales, no solo para crear prototipos o diálogos rápidos, sino también probado a lo largo de los años. El concepto se basa en el principio de control de la vista modelo y para los escenarios más comunes hay componentes listos para usar que se ven automáticamente correctos en cualquier dispositivo. No digo que deba usarse para ninguna IU (por ejemplo, las listas deben hacerse a mano) pero para la mayoría de los usos esto debería ser muy útil;) Ah, y siéntase libre de bifurcarlo y mejorarlo si lo desea

1

Ésta es una cuestión de edad, que, lamentablemente, incluso varios años después no tiene una buena solución. Acabo de portar una aplicación de iOS (Obj C) a Android. El mayor problema no era el código de fondo (para mucha/la mayoría de la gente, si puedes codificar en Obj C puedes codificar en Java) sino para portar las interfaces nativas. Lo que dijo Todd anteriormente, el diseño de UI sigue siendo un dolor completo. En mi experiencia, el wat más rápido para desarrollar una interfaz de usuario confiable que admita múltiples formatos, etc., está en buen ol HTML.

8

La forma más fácil es con REBOL 3:

http://rebolforum.com/index.cgi?f=printtopic&permalink=Nick25-Aug-2013/10:08:38-7:00&archiveflag=new

Aquí hay 10 programas de demostración totalmente funcionales, con interfaces gráficas de usuario. Estos se ejecutan en Android y escritorio sistemas operativos, usando exactamente el mismo código:

REBOL [] 
load-gui 
view [text "Hello World!"] 


REBOL [title: "Tiny Note Editor"] 
do %r3-gui.r3 ; download this file manually or just use load-gui as above 
view [ 
    a1: area 
    button "Save" on-action [write %notes.txt get-face a1] 
    button "Load" on-action [set-face a1 to-string read %notes.txt] 
] 


REBOL [title: "Data Entry to CSV File"] 
do %r3-gui.r3 
view [ 
    text "First Name:" 
    f1: field 
    text "Last Name:" 
    f2: field 
    button "Submit" on-action [ 
     write/append %cntcts.txt rejoin [ 
      mold get-face f1 " " mold get-face f2 newline 
     ] 
     request "" "Saved" 
    ] 
    a1: area 
    button "Load" on-action [set-face a1 to-string read %cntcts.txt] 
] 


REBOL [title: "Text File Reader (How to use a text list file selector)"] 
do %r3-gui.r3 
view [ 
    a1: area 
    button "Load" on-action [ 
     files: read %./ 
     view/modal [ 
      text "File Name:" 
      t2: text-list files on-action [ 
       set-face a1 to-string read(to-file pick files get-face t2) 
       unview 
      ] 
     ] 
    ] 
] 


REBOL [title: "List-View (Grid) Example"] 
do %r3-gui.r3 
view [ 
    text-table ["1" 200 "2" 100 "3"][ 
     ["asdf" "a" "4"] 
     ["sdfg" "b" "3"] 
     ["dfgh" "c" "2"] 
     ["fghj" "d" "1"] 
    ] 
] 


REBOL [title: "Calculator"] 
do %r3-gui.r3 
stylize [ 
    btn: button [ 
     facets: [init-size: 50x50] 
     actors: [on-action:[set-face f join get-face f get-face face]] 
    ] 
] 
view [ 
    hgroup [ 
     f: field return 
     btn "1" btn "2" btn "3" btn " + " return 
     btn "4" btn "5" btn "6" btn " - " return 
     btn "7" btn "8" btn "9" btn " * " return 
     btn "0" btn "." btn "/" btn "=" on-action [ 
      attempt [set-face f form do get-face f] 
     ] 
    ] 
] 


REBOL [title: "Sliding Tile Puzzle"] 
do %r3-gui.r3 
stylize [ 
    p: button [ 
     facets: [init-size: 60x60 max-size: 60x60] 
     actors: [ 
      on-action: [ 
       t: face/gob/offset 
       face/gob/offset: x/gob/offset 
       x/gob/offset: t 
      ] 
     ] 
    ] 
] 
view/options [ 
    hgroup [ 
     p "8" p "7" p "6" return 
     p "5" p "4" p "3" return 
     p "2" p "1" x: box 60x60 white 
    ] 
] [bg-color: white] 


REBOL [title: "Math Test"] 
do %r3-gui.r3 
random/seed now 
x: does [rejoin [random 10 " + " random 20]] 
view [ 
    f1: field (x) 
    text "Answer:" 
    f2: field on-action [ 
     either (get-face f2) = (form do get-face f1) [ 
      request "Yes!" "Yes!"][request "No!" "No!" 
     ] 
     set-face f1 x 
     set-face f2 "" 
     focus f2 
    ] 
] 


REBOL [title: "Minimal Cash Register"] 
do %r3-gui.r3 
stylize [fld: field [init-size: 80]] 
view [ 
    hgroup [ 
     text "Cashier:" cashier: fld 
     text "Item:"  item: fld 
     text "Price:"  price: fld on-action [ 
      if error? try [to-money get-face price] [ 
       request "Error" "Price error" 
       return none 
      ] 
      set-face a rejoin [ 
       get-face a mold get-face item tab get-face price newline 
      ] 
      set-face item copy "" set-face price copy "" 
      sum: 0 
      foreach [item price] load get-face a [ 
       sum: sum + to-money price 
      ] 
      set-face subtotal form sum 
      set-face tax form sum * .06 
      set-face total form sum * 1.06 
      focus item 
     ] 
     return 
     a: area 600x300 
     return 
     text "Subtotal:" subtotal: fld 
     text "Tax:"  tax: fld 
     text "Total:"  total: fld 
     button "Save" on-action [ 
      items: replace/all (mold load get-face a) newline " " 
      write/append %sales.txt rejoin [ 
       items newline get-face cashier newline now/date newline 
      ] 
      set-face item copy "" set-face price copy "" 
      set-face a copy "" set-face subtotal copy "" 
      set-face tax copy "" set-face total copy "" 
     ] 
    ] 
] 


REBOL [title: "Requestors"] 
do %r3-gui.r3 
x: request/ask "Question" "Do you like this?." 
either x = false [print "No!"] [print "Yes!"] 
x: request/custom "" "Do you like this?" ["Yay" "Boo"] 
either x = false [print "Boo!"] [print "Yay!"] 
view [button "Click me" on-action[request "Ok" "You clicked the button."]] 
+1

+1 Bueno, no quiero ser sarcástico pero parece que necesito otro título de maestría para descifrar este código. Parece simple, pero me dio la sensación de que estoy escribiendo todo esto en asamblea. –

Cuestiones relacionadas