Простой способ прокрутки текста переполнения на кнопке?

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

Вопрос

Есть ли у кого-нибудь примеры или ресурсы, где я мог бы найти информацию о прокручиваемом тексте, который слишком длинный для отображения в элементе управления «кнопка»?Я думаю что-то в этом направлении.

  • Отображать столько текста, сколько поместится в текущем прямоугольнике, с символом «...» в конце, обозначающим переполнение.
  • Сделайте паузу, скажем, на 1 секунду, затем медленно прокрутите текст к правому краю, отображая правую часть строки.
  • Отображать столько текста, сколько поместится в текущем прямоугольнике, с символом «...» в начале, обозначающим переполнение.
  • Начните все сначала, в обратном порядке.

Есть ли простой способ сделать это, используя «ядро» или встроенные «анимационные» структуры на определенном мобильном устройстве?

РЕДАКТИРОВАТЬ] Я думаю, что я думаю, что люди больше сосредоточены на том, является ли я, что я пытаюсь достичь, уместно.Кнопка предназначена для ответов на викторину.Он не выполняет какой-либо конкретной функции пользовательского интерфейса, а предназначен для отображения ответа.Сама Apple делает это в своей викторине iQuiz на iPod Nano, и я думаю, что это довольно элегантное решение для ответов, длина которых превышает ширину моей кнопки.

В случае, если это «...», это самая трудная часть всего этого.Допустим, я удалил это требование.Могу ли я сделать метку для кнопки полноразмерной, но обрезать ее до клиентского прямоугольника кнопки и использовать некоторые методы анимации для ее прокрутки внутри прямоугольника отсечения?Это дало бы мне почти тот же эффект, за исключением эллипсов.

Это было полезно?

Решение

Вот идея:вместо эллипсов (...) используйте градиент с каждой стороны, чтобы лишний текст растворился в цвете фона.Тогда вы могли бы сделать это с тремя CALayers:один для текста и два для эффекта затухания.

Маски затухания будут представлять собой просто прямоугольники с градиентом от прозрачного до цвета фона.Они должны быть расположены над текстовым слоем.Текст будет нарисован на текстовом слое, а затем вы просто анимируете его скольжение вперед и назад так, как вы описываете.Вы можете создать объект CGPath, описывающий путь, и добавить его к объекту CAKeyframeAnimation, который вы добавляете в текстовый слой.

Что касается того, считаете ли вы, что это «легко», зависит от того, насколько хорошо вы знаете Core Animation, но я думаю, что как только вы изучите API, вы обнаружите, что это не так уж и плохо и стоит затраченных усилий.

Другие советы

Не желая показаться тупым, возможно, вам стоит переосмыслить свою проблему.Кнопка должна иметь четкую и предсказуемую функцию.Это не место для хранения и отображения текста.Возможно, вы могли бы отображать описание на экране с помощью красивой стандартной кнопки внизу?

Обновление с примером исходного кода:

Вот готовый к использованию пример исходного кода (на самом деле это полностью заархивированный проект Xcode с файлами изображений и перьев, а также некоторым исходным кодом), не для iPhone, без использования Core Animation, просто с использованием пары простых NSImages и NSImageView.Это всего лишь дешевый хак, он не реализует всю запрошенную вами функциональность (извините, но мне не хочется писать за вас исходный код :-P), ужасное расположение кода (эй, я только что взломал это в рамках пару минут, так что лучшего и не ждите ;-)) и это всего лишь демонстрация того, как это можно сделать.Это тоже можно сделать с помощью Core Animation, но этот подход проще.Составление анимации кнопки в NSImageView не так приятно, как создание подкласса NSView и прямая отрисовка его контекста, но это намного проще (я просто хотел найти самое простое возможное решение).Он также не будет прокручиваться назад после прокрутки до конца вправо.Поэтому вам просто нужен другой метод для прокрутки назад и запуска другого NSTimer, который срабатывает через 2 секунды после того, как вы нарисовали точки влево.

Просто откройте проект в Xcode и нажмите «Выполнить», это все, что вам нужно сделать.Тогда взгляните на исходный код.На самом деле это не так уж и сложно (однако сначала вам, возможно, придется его переформатировать, макет — отстой).


Обновление из-за комментария к моему ответу:

Если вы вообще не используете элементы Apple UI, я не вижу проблемы.В этом случае ваша кнопка даже не кнопка, а просто кликабельный вид (NSView, если вы используете Cocoa).Вы можете просто создать подкласс NSView как MyAnswerView и перезаписать метод рисования, чтобы рисовать в представлении все, что пожелаете.Многострочный текст, прокручиваемый текст, анимация 3D-текста — все зависит от вашего воображения.

Вот пример, показывающий, как кто-то создал подкласс NSView для создания полноценного пользовательского элемента управления, которого нет по умолчанию.Управление выглядит следующим образом:

alt text

Видите забавную вещь в верхнем левом углу?Это контроль.Вот как это работает:

alt text


Ненавижу это говорить, поскольку это не ответ на ваш вопрос, но "Не делай этого!".У Apple есть рекомендации по реализации пользовательского интерфейса.Хотя вы можете их игнорировать, пользователи Apple привыкли к тому, что пользовательский интерфейс соответствует этим рекомендациям, и несоблюдение их приведет к созданию приложений, которые пользователи Apple находят уродливыми и малопривлекательными.

Вот рекомендации Apple по пользовательскому интерфейсу.

Позвольте мне процитировать оттуда

Содержимое кнопок и маркировка

Кнопка всегда содержит текст, не содержит изображения.Если вам нужно отобразить значок или другое изображение на кнопке, вместо этого используйте кнопку скоси, описанную в «Кнопках скоси».

Метка на кнопке должна быть глаголой или глаголой, которая описывает действие, которое он выполняет - выдвинуть, закрывать, печатать, удалять, менять пароль и так далее.Если кнопка действует на одну настройку, отметьте кнопку как можно больше;«Выберите изображение…», например, более полезно, чем «Выберите…». Поскольку кнопки инициируют немедленное действие, нет необходимости использовать «сейчас» (например, сканирование сейчас) на этикетке.

Метки кнопок должны иметь капитализацию в стиле заголовка, как описано в «Капитализации меток и текста интерфейса и текста». Если кнопка немедленно открывает другое окно, диалоговое окно или приложение для выполнения его действия, вы можете использовать Ellipsis на метке.Например, почтовые настройки отображают кнопку, которая включает в себя эллипсис, потому что она открывается. MAC System Preferences, как показано на рисунке 15-8.

Кнопки должны содержать один глагол или глагольную фразу, а не ответы на викторины!Если у вас от 2 до 5 ответов, вам следует использовать переключатели, чтобы пользователь мог выбрать ответ, и кнопку ОК, чтобы пользователь принял ответ.Если у вас более 5 ответов, вам следует рассмотреть возможность использования всплывающего селектора в соответствии с рекомендациями, хотя я думаю, что в данном случае это было бы довольно некрасиво.

Вы можете рассмотреть возможность использования таблицы только с одним столбцом, одной строкой на ответ и каждой ячейкой, состоящей из нескольких строк, если ответ очень длинный и его необходимо разбить.Таким образом, пользователь выбирает строку таблицы, щелкая по ней, при этом ячейка таблицы выделяется, а затем нажимает кнопку «ОК» для завершения.В качестве альтернативы вы можете продолжить сразу, как только пользователь выберет любую ячейку таблицы (но таким образом вы лишите пользователя возможности исправить случайный щелчок).С другой стороны, таблицы с многострочными ячейками в MacOS X встречаются довольно редко.iPhone использует некоторые из них, но обычно с очень небольшим количеством текста (максимум две строки).

Я почти уверен, что вы не сможете сделать это, используя стандартный API, и уж точно не с помощью UILineBreakMode.Кроме того, в руководстве по стилю сказано, что многоточие указывает на то, что при нажатии кнопки будет запрашиваться дополнительная информация — например, «Открыть файл…»запросит имя файла.Предлагаемое вами использование многоточия нарушает это правило.

Вам понадобится некоторая специальная логика для реализации описанного вами поведения, но я все равно не думаю, что это лучший вариант.

Это не очень хорошая практика пользовательского интерфейса, но если вы все еще хотите это сделать, лучше всего сделать это с помощью кликабельного элемента div, стилизованного под кнопку.

Установите для ширины div явное значение, а для его переполнения — скрытое, затем используйте скрипт, выполняющийся с интервалом, чтобы настроить свойство ScrollLeft этого div.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top