¿Una forma sencilla de desplazar el texto de desbordamiento en un botón?

Question

¿Alguien tiene algún ejemplo o recurso donde pueda encontrar información sobre el desplazamiento de texto que sea demasiado largo para mostrar en un control de botón? Estoy pensando algo en este sentido.

• Mostrar tanto texto se ajustará dentro del actual rect con un '...' al final para indicar el desbordamiento.
• Haga una pausa durante 1 segundo y luego desplace lentamente el texto hacia el borde derecho que muestra la parte derecha de la cadena.
• La visualización de la mayor cantidad de texto quepa en el rect actual con un '...' al principio para indicar el desbordamiento.
• Comience todo de nuevo a la inversa.

¿Hay una manera fácil de hacerlo usando el " núcleo " o construido en " animación " marcos en un determinado dispositivo móvil?

[editar] Quiero añadir algunos detalles más, ya que creo que las personas están más centradas en lo que estoy tratando de lograr, o no, lo que estoy tratando de lograr es apropiado. El botón es para las respuestas en un juego de trivia. No realiza ninguna función de IU específica, pero es para mostrar la respuesta. Los mismos Apple están haciendo esto en su juego de preguntas iQuiz en el iPod Nano y creo que es una solución bastante elegante para respuestas que son más largas que el ancho de mi botón.

En caso de que sea el '...' esa es la parte difícil de esto. Digamos que he eliminado este requisito. ¿Puedo hacer que la etiqueta del botón sea de tamaño completo pero que esté recortada al cliente directamente del botón y use algunos métodos de animación para desplazarla dentro del recorte de recortes? Esto me daría casi el mismo efecto menos los puntos suspensivos.

Answer 1

Aquí hay una idea: en lugar de puntos suspensivos (...), use un degradado en cada lado, de modo que el texto adicional se desvanezca en el color de fondo. Luego, puedes hacer esto con tres CALayers: uno para el texto y dos para el efecto de desvanecimiento.

Las máscaras de atenuación serían simplemente rectángulos con un degradado que va de transparente al color de fondo. Deben colocarse por encima de la capa de texto. El texto se dibujará en la capa de texto y luego lo animará deslizándolo de un lado a otro de la manera que describe. Puede crear un objeto CGPath que describa la ruta y agregarlo a un objeto CAKeyframeAnimation que agregue a la capa de texto.

En cuanto a si crees que esto es " fácil " depende de lo bien que sepa Core Animation, pero creo que una vez que aprenda la API encontrará que esto no es tan malo y que valdría la pena.

Answer 2

Sin querer ser obtuso, tal vez deberías repensar tu problema. Un botón debe tener una función clara y predecible. No es un lugar para almacenar y mostrar texto. ¿Quizás podrías tener una descripción en pantalla con un bonito botón estándar a continuación?

Answer 3

Ejemplo de actualización con código fuente:

Aquí hay algunos ejemplos de código fuente listos para usar (en realidad, un proyecto Xcode con cremallera completa con imagen) y archivos de plumillas y algún código fuente), no para el iPhone, no usa Core Animation, solo usa un par de NSImages simples y un NSImageView. Es solo un truco barato, no implementa la funcionalidad completa que solicitó (lo siento, pero no tengo ganas de escribir su código fuente para usted :-P), horrible diseño de código (hey, acabo de piratear esto juntos dentro de un Un par de minutos, así que no puedes esperar nada mejor ;-)) y es solo una demostración de cómo se puede hacer esto. También se puede hacer con Core Animation, pero este enfoque es más sencillo. Componer la animación del botón en un NSImageView no es tan bueno como crear una subclase de un NSView y pintar directamente a su contexto, pero es mucho más simple (solo quería hackear la solución más simple posible). Tampoco se desplazará hacia atrás una vez que se haya desplazado completamente hacia la derecha. Por lo tanto, solo necesita otro método para desplazarse hacia atrás e iniciar otro NSTimer que se dispare 2 segundos después de que dibujó los puntos a la izquierda.

Simplemente abre el proyecto en Xcode y pulsa ejecutar, eso es todo lo que hay que hacer. Entonces echa un vistazo al código fuente. Realmente no es tan complicado (sin embargo, es posible que tengas que reformatearlo primero, el diseño apesta).

---

Actualizar por comentario a mi respuesta:

Si no utilizas elementos de la interfaz de usuario de Apple, no veo el problema. En ese caso, su botón no es ni siquiera un botón, es solo una Vista que se puede hacer clic (NSView si usa Cocoa). Puede sub-clasificar NSView como MyAnswerView y sobrescribir el método de pintura para pintar en la vista lo que desee. El texto de varias líneas, texto de desplazamiento, texto 3D animado, depende completamente de su imaginación.

Aquí hay un ejemplo , que muestra cómo alguien subclasificó NSView para crear un control personalizado completo que no existe de forma predeterminada. El control se ve así:

¿Ves lo gracioso en la esquina superior izquierda? Eso es un control. Así es como funciona:

---

Odio decir eso, ya que no es una respuesta a tu pregunta, pero " ¡No hagas eso! " ;. Apple tiene pautas sobre cómo implementar una interfaz de usuario. Si bien eres libre de ignorarlos, los usuarios de Apple están acostumbrados a tener IU que siguen estas pautas y no seguirlas creará aplicaciones que a los usuarios de Apple les resultan feas y poco atractivas.

Aquí están las pautas de interfaz humana de Apple

Déjame citar desde allí

  

Contenido y etiquetado de los botones pulsadores

     

Un botón pulsador siempre contiene texto,   No contiene una imagen. Si necesitas   para mostrar un icono u otra imagen en una   botón, utilice en su lugar un botón biselado,   descrito en & # 8220; Botones de bisel. & # 8221;

     

La etiqueta de un botón pulsador debe ser una   verbo o frase verbal que describe la   acción que realiza & # 8212; Guardar, Cerrar, Imprimir,   Eliminar, cambiar contraseña, y así sucesivamente. Si   un pulsador actúa sobre una sola   ajuste, etiquetar el botón como   específicamente como sea posible; & # 8220; Elija   Imagen & # 8230;, & # 8221; por ejemplo, es mas   es útil que & # 8220; Elija & # 8230; & # 8221; Porque los botones   iniciar una acción inmediata,   no debería ser necesario usar & # 8220; ahora & # 8221;   (Escanear ahora, por ejemplo) en la etiqueta.

     

Las etiquetas de los botones pulsadores deberían tener   capitalización de estilo de título, como   descrito en & # 8220; Capitalización de   Etiquetas y texto de los elementos de la interfaz. & # 8221; Si   el pulsador se abre inmediatamente   Otra ventana, diálogo o aplicación.   Para realizar su acción, puedes utilizar un   puntos suspensivos en la etiqueta. Por ejemplo,   Preferencias de correo muestra un empuje   botón que incluye una elipsis   porque abre el sistema .Mac   preferencias, como se muestra en la Figura 15-8.

¡Los botones deben contener un solo verbo o una frase verbal, no respuestas al juego de preguntas! Si tiene entre 2 y 5 respuestas, debe usar los botones de radio para que el usuario seleccione la respuesta y un botón Aceptar para que el usuario acepte la respuesta. Para más de 5 respuestas, deberías considerar un Selector de elementos emergentes según las pautas, aunque supongo que eso sería bastante feo en este caso.

Podría considerar el uso de una tabla con solo una columna, una fila por respuesta y cada celda multilínea si la respuesta es muy larga y necesita interrumpirse. Por lo tanto, el usuario selecciona una fila de la tabla haciendo clic en ella, lo que resalta la celda de la tabla y luego hace clic en el botón Aceptar para finalizar. Alternativamente, puede continuar directamente, tan pronto como el usuario seleccione cualquier celda de la tabla (pero de esa manera, tendrá la oportunidad de corregir un clic accidental). Por otro lado, las tablas con celdas multilínea son bastante raras en MacOS X. El iPhone usa algunas, pero generalmente con muy poco texto (a lo sumo dos líneas).

Answer 4

Bastante seguro de que no puedes hacer eso usando la API estándar, ciertamente no con UILineBreakMode. Además, la guía de estilo dice que los puntos suspensivos indican que cuando se presiona el botón le pedirá más información, por ejemplo, Abrir archivo ... le pedirá el nombre de un archivo. Su uso propuesto de elipsis viola esta guía.

Necesitaría una lógica personalizada para implementar el comportamiento que describe, pero no creo que sea el camino a seguir.

Answer 5

Esta no es una muy buena práctica de UI, pero si aún quieres hacerlo, lo mejor es hacerlo a través de un div divisible para hacer clic como un botón.

Establezca el ancho de la div en un valor explícito, y su desbordamiento se oculte, luego use un script que se ejecute en un intervalo para ajustar la propiedad scrollLeft de esta div.