Modo semplice per scorrere il testo di overflow su un pulsante?

StackOverflow https://stackoverflow.com/questions/147154

Domanda

Qualcuno ha qualche esempio o risorsa in cui potrei trovare informazioni sullo scorrimento del testo che è troppo lungo per essere visualizzato in un controllo pulsante? Sto pensando a qualcosa di simile.

  • Mostra quanto testo si adatterà all'interno del rettangolo corrente con un '...' alla fine per indicare l'overflow.
  • Metti in pausa per 1 secondo, quindi scorri lentamente il testo verso il bordo destro mostrando la parte destra della stringa.
  • Mostra quanto testo si adatterà all'interno del rettangolo corrente con un '...' all'inizio per indicare l'overflow.
  • Ricomincia da capo al contrario.

Esiste un modo semplice per farlo utilizzando il "core" o incorporato in " animazione " framework su un determinato dispositivo mobile?

[modifica] Volevo aggiungere qualche dettaglio in più perché penso che le persone siano più concentrate sul fatto che ciò che sto cercando di realizzare sia appropriato. Il pulsante è per le risposte in un gioco a quiz. Non esegue alcuna specifica funzione dell'interfaccia utente ma è per visualizzare la risposta. La stessa Apple lo sta facendo nel suo gioco a quiz su iQuiz su iPod Nano e penso che sia una soluzione abbastanza elegante per risposte più lunghe della larghezza del mio pulsante.

Nel caso sia il '...' che è la parte difficile di questo. Diciamo che ho rimosso questo requisito. Potrei avere l'etichetta per il pulsante di dimensioni standard ma ritagliata al rect client del pulsante e utilizzare alcuni metodi di animazione per scorrere all'interno del rettangolo di ritaglio? Questo mi darebbe quasi lo stesso effetto meno le ellissi.

È stato utile?

Soluzione

Ecco un'idea: invece delle ellissi (...), usa una sfumatura su ciascun lato, in modo che il testo in eccesso svanisca nel colore di sfondo. Quindi potresti farlo con tre CALayer: uno per il testo e due per l'effetto di dissolvenza.

Le maschere di dissolvenza sarebbero solo rettangoli con una sfumatura che va dal trasparente al colore di sfondo. Dovrebbero essere posizionati sopra il livello di testo. Il testo verrebbe disegnato sul livello testo, e poi lo animerai semplicemente scorrendo avanti e indietro nel modo che descrivi. Puoi creare un oggetto CGPath che descriva il percorso e aggiungerlo a un oggetto CAKeyframeAnimation che aggiungi al livello testo.

Per quanto riguarda se pensi che sia "facile" dipende da quanto conosci Core Animation, ma penso che una volta che avrai appreso l'API scoprirai che non è poi così male e varrebbe la pena.

Altri suggerimenti

Senza voler essere ottuso, forse dovresti ripensare il tuo problema. Un pulsante dovrebbe avere una funzione chiara e prevedibile. Non è un posto dove archiviare e visualizzare testo. Forse potresti avere una descrizione mostrata sullo schermo con un bel pulsante standard qui sotto?

Aggiornamento con esempio di codice sorgente:

Ecco alcuni esempi di codice sorgente pronti all'uso (in realtà un progetto Xcode con zip completo con immagine e pennino e un po 'di codice sorgente), non per iPhone, non usando Core Animation, usando solo un paio di semplici NSImages e un NSImageView. È solo un trucco economico, non implementa la piena funzionalità richiesta (mi dispiace, ma non ho voglia di scrivere il tuo codice sorgente per te :-P), layout di codice orribile (ehi, l'ho appena hackerato insieme in un un paio di minuti, quindi non puoi aspettarti di meglio ;-)) ed è solo una dimostrazione di come questo può essere fatto. Può essere fatto anche con Core Animation, ma questo approccio è più semplice. Comporre l'animazione del pulsante in un NSImageView non è bello come sottoclassare un NSView e dipingere direttamente sul suo contesto, ma è molto più semplice (volevo solo hackerare insieme la soluzione più semplice possibile). Inoltre, non scorrerà indietro una volta che scorre completamente verso destra. Quindi hai solo bisogno di un altro metodo per scorrere indietro e avviare un altro NSTimer che si attiva 2 secondi dopo aver disegnato i punti a sinistra.

Basta aprire il progetto in Xcode e premere Esegui, è tutto quello che c'è da fare. Dai un'occhiata al codice sorgente. Non è poi così complicato (tuttavia, potresti doverlo riformattare prima, il layout fa schifo).

Aggiorna a causa di un commento alla mia risposta:

Se non usi affatto gli elementi dell'interfaccia utente di Apple, non riesco a vedere il problema. In quel caso il tuo pulsante non è nemmeno un pulsante, è solo una vista cliccabile (NSView se usi Cocoa). Puoi semplicemente sottoclassare NSView come MyAnswerView e sovrascrivere il metodo di disegno per disegnare nella vista quello che desideri. Testo multilinea, testo scorrevole, testo 3D animato, dipende completamente dalla tua immaginazione.

Ecco un esempio , che mostra come qualcuno abbia eseguito la sottoclasse di NSView per creare un controllo personalizzato completo che non esiste per impostazione predefinita. Il controllo è simile al seguente:

alt text

Vedi la cosa divertente nell'angolo in alto a sinistra? Questo è un controllo. Ecco come funziona:

alt text

Odio dirlo, poiché non è una risposta alla tua domanda, ma " Non farlo! " ;. Apple ha linee guida su come implementare un'interfaccia utente. Mentre sei libero di ignorarli, gli utenti Apple sono abituati ad avere UI che seguono queste linee guida e non seguirle creerà applicazioni che gli utenti Apple trovano brutte e poco attraenti.

Ecco le Linee guida per l'interfaccia umana di Apple

Lasciami citare da lì

  

Contenuto pulsante ed etichettatura

     

Un pulsante contiene sempre del testo   non contiene un'immagine. Se hai bisogno   per visualizzare un'icona o un'altra immagine su a   pulsante, utilizzare invece un pulsante smussato,   descritto in & # 8220; Pulsanti conici. & # 8221;

     

L'etichetta su un pulsante dovrebbe essere a   verbo o verbo che descrive il   azione che esegue & # 8212; Salva, Chiudi, Stampa,   Elimina, Cambia password e così via. Se   un pulsante agisce su un singolo   impostazione, etichettare il pulsante come   nel modo più specifico possibile; & # 8220; Scegli   Immagine & # 8230; & # 8221; per esempio, è di più   utile di & # 8220; Scegli & # 8230; & # 8221; Perché i pulsanti   avviare un'azione immediata, esso   non dovrebbe essere necessario utilizzare & # 8220; ora & # 8221;   (Scansiona ora, ad esempio) nell'etichetta.

     

Le etichette dei pulsanti dovrebbero avere   capitalizzazione in stile titolo, come   descritto in & # 8220; Capitalizzazione di   Etichette e testo degli elementi dell'interfaccia. & # 8221; Se   il pulsante si apre immediatamente   un'altra finestra, finestra di dialogo o applicazione   per eseguire la sua azione, puoi usare un   puntini di sospensione nell'etichetta. Per esempio,   Le preferenze di posta elettronica mostrano una spinta   pulsante che include i puntini di sospensione   perché apre il sistema .Mac   preferenze, come mostrato nella Figura 15-8.

I pulsanti dovrebbero contenere un singolo verbo o una frase verbale, non risposte al gioco a quiz! Se hai tra 2 e 5 risposte, dovresti usare i pulsanti di opzione per fare in modo che l'utente selezioni la risposta e un pulsante OK per fare in modo che l'utente accetti la risposta. Per più di 5 risposte, dovresti prendere in considerazione un selettore pop-up invece secondo le linee guida, anche se credo che sarebbe piuttosto brutto in questo caso.

Potresti considerare di usare una tabella con una sola colonna, una riga per risposta e ogni cella essendo multilinea se la risposta è molto lunga e deve essere interrotta. Quindi l'utente seleziona una riga della tabella facendo clic su di essa, evidenziando la cella della tabella e facendo clic su un pulsante OK per terminare. In alternativa, è possibile continuare direttamente, non appena l'utente seleziona una cella della tabella (ma in questo modo l'utente ha la possibilità di correggere un clic accidentale). D'altra parte, i tavoli con celle multilinea sono piuttosto rari su MacOS X. L'iPhone ne utilizza alcuni, ma di solito con pochissimo testo (al massimo due righe).

Abbastanza sicuro che non puoi farlo usando l'API standard, certamente non con UILineBreakMode. Inoltre, la guida di stile afferma che i puntini di sospensione indicano che il pulsante premuto ti chiederà ulteriori informazioni, ad esempio Apri file ... chiederà il nome di un file. L'uso proposto di ellissi viola questa linea guida.

Avresti bisogno di una logica personalizzata per implementare il comportamento che descrivi, ma non penso che sia comunque la strada da percorrere.

Questa non è una buona pratica dell'interfaccia utente, ma se vuoi ancora farlo, la soluzione migliore è farlo tramite un div cliccabile in stile simile a un pulsante.

Imposta la larghezza del div su un valore esplicito e il suo overflow su nascosto, quindi usa uno script in esecuzione su un intervallo per regolare la proprietà scrollLeft di questo div.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top