2008-09-29 6 views
2

누군가가 버튼 컨트롤에 표시하기에는 너무 긴 스크롤 텍스트에 대한 정보를 찾을 수있는 예제 나 리소스가 있습니까? 나는이 선을 따라 뭔가를 생각하고있다. 많은 텍스트가 마지막에 '...'으로 현재 RECT에 맞 것이다버튼에서 오버플로 텍스트를 스크롤하는 쉬운 방법은 무엇입니까?

  • 디스플레이 오버 플로우를 의미합니다.
  • 일시 중지 (예 : 1 초) 한 다음 문자열의 오른쪽 부분을 표시하는 오른쪽 가장자리로 텍스트를 천천히 스크롤합니다.
  • 많은 수의 텍스트가 현재 rect 내에서 처음에 '...'로 표시되어 오버플로를 나타냅니다.
  • 전체를 뒤집습니다.

특정 모바일 장치에서 "코어"또는 내장 "애니메이션"프레임 워크를 사용하여 쉽게 수행 할 수 있습니까?

[편집] 사람들이 더 집중적으로 집중하고 있는지, 아니면 성취하려고 노력하고있는 것이 적절하지 않은지 생각해 보았습니다. 버튼은 퀴즈 게임에 대한 답변입니다. 특정 UI 기능을 수행하지는 않지만 대답을 표시하기위한 것입니다. 애플 스스로가 아이팟 나노에서 iQuiz 퀴즈 게임을하고 있는데, 제 단추의 너비보다 더 길다는 대답은 꽤 우아한 해결책이라고 생각합니다.

'...'이 경우의 어려운 부분입니다. 이 요구 사항을 삭제했다고 가정 해 보겠습니다. 버튼의 레이블을 전체 크기로 만들지 만 버튼의 클라이언트 rect에 클립핑하고 일부 애니메이션 메서드를 사용하여 클리핑 rect 내에서 스크롤 할 수 있습니까? 이것은 나에게 타원을 뺀 것과 거의 같은 효과를 줄 것입니다.

답변

2

타원체 (...) 대신 각면에 그라데이션을 사용하여 추가 텍스트가 배경색으로 희미 해집니다. 그런 다음 세 개의 CALayers (텍스트 용 및 페이드 효과 용)로이 작업을 수행 할 수 있습니다.

페이드 마스크는 투명에서 배경색으로가는 그래디언트가있는 직사각형입니다. 텍스트 레이어 위에 위치해야합니다. 텍스트는 텍스트 레이어에 그려지며 사용자가 설명하는 방식으로 앞뒤로 움직이는 방식으로 움직입니다. 패스를 설명하는 CGPath 객체를 생성하고이를 텍스트 레이어에 추가하는 CAKeyframeAnimation 객체에 추가 할 수 있습니다.

"쉬운 일"이라고 생각하는지 여부는 Core Animation을 잘 아는 지에 달려 있지만 일단 API를 배우면 나쁘지는 않을 것이며 문제가 될만한 가치가 있다는 것을 알게 될 것입니다.

0

확실히 UILineBreakMode가 아닌 표준 API를 사용하면 그렇게 할 수 없습니다. 또한 스타일 가이드에 따르면 생략하면 버튼을 누를 때 자세한 정보를 묻는 메시지가 표시됩니다 (예 : 파일 열기 ... 파일 이름을 묻는 메시지). 귀하가 제안한 줄임표 사용은이 지침에 위배됩니다.

설명하는 동작을 구현하는 데 사용자 지정 논리가 필요하지만 어쨌든 그렇게 할 생각은 아닙니다.

2

무뚝뚝하지 않으려면 문제를 재고해야합니다. 버튼에는 명확하고 예측 가능한 기능이 있어야합니다. 텍스트를 저장하고 표시 할 장소가 아닙니다. 아마도 아래에 멋진 표준 단추가있는 화면에 설명이 표시 될 수 있습니까?

0

이것은 아주 좋은 UI 관행은 아니지만, 여전히하고 싶다면 버튼처럼 보이도록 스타일이 지정된 클릭 가능한 div를 통해 수행하는 것이 가장 좋습니다.

div의 너비를 명시 적 값으로 설정하고 오버플로를 hidden으로 설정 한 다음 해당 간격으로 실행되는 스크립트를 사용하여이 div의 scrollLeft 속성을 조정합니다. 소스 코드 예제와

2

업데이트 :

Here is some ready to use source code example (이미지와 펜촉 파일과 일부 소스 코드를 실제로 전체 압축 Xcode 프로젝트)뿐만 아니라 간단한 NSImages의 몇 가지를 사용하여, 코어 애니메이션을 사용하지 않는 아이폰에 대한 및 NSImageView. 그것은 단지 값싼 해킹 일 뿐이며 요청한 모든 기능을 구현하지는 않습니다 (미안하지만, 소스 코드를 작성하는 느낌이 들지 않습니다 : -P), 끔찍한 코드 레이아웃 (이봐, 난 그냥 몇 분이 남았으므로 조금이라도 더 기대할 수는 없지만 ;-)) 이것은 어떻게 수행 될 수 있는지를 보여줍니다. Core Animation으로도 가능하지만이 방법은 더 간단합니다.버튼 애니메이션을 NSImageView로 작성하는 것은 NSView를 서브 클래스로 만들고 그 컨텍스트에 직접 페인트 칠하는 것만 큼 좋지는 않지만 훨씬 간단합니다 (가능한 가장 간단한 솔루션을 함께 해킹하고 싶었습니다). 오른쪽으로 끝까지 스크롤하면 다시 스크롤되지 않습니다. 따라서 다시 스크롤하여 왼쪽에 점을 그린 후 2 초 후에 다른 NSTimer를 시작하는 또 다른 방법이 필요합니다.

Xcode에서 프로젝트를 열고 실행하면됩니다. 그런 다음 소스 코드를 살펴보십시오. 실제로 그렇게 복잡하지는 않습니다 (그러나 먼저 레이아웃을 다시 잡아야 할 수도 있습니다, 레이아웃은 엉망이됩니다). 때문에 내 대답에 주석의


업데이트 : 당신이 모든 애플의 UI 요소를 사용하지 않는 경우

, 나는 문제를보고 실패합니다. 이 경우 버튼은 버튼이 아니라 클릭 할 수있는 뷰 (코코아를 사용하는 경우 NSView)입니다. NSView를 MyAnswerView로 하위 클래스로 만들 수 있으며 원하는대로보기에 페인트하기 위해 paint 메소드를 덮어 쓸 수 있습니다. 멀티 라인 텍스트, 스크롤 텍스트, 3D 텍스트 애니메이션, 그것은 완전히 당신의 상상력에 달려 있습니다.

Here's an example 누군가 NSView를 서브 클래 싱하여 기본적으로 존재하지 않는 완전한 사용자 정의 컨트롤을 만드는 방법을 보여줍니다. 이 컨트롤은 다음과 같습니다

alt text http://katidev.com/blog/wp-content/uploads/2008/03/asimocontrol.jpg

은 왼쪽 상단 모서리에있는 재미있는 점을 참조하십시오? 그것은 통제입니다. 여기 그것이 작동하는 방법있다 : 그것은 당신의 질문에 대한 답은 없지만, "! 그렇게하지 마십시오"로

alt text http://katidev.com/blog/wp-content/uploads/2008/03/conroldiagram.jpg


내가 그 말을 싫어한다. Apple은 사용자 인터페이스를 구현하는 방법에 대한 가이드 라인을 가지고 있습니다. 당신이 자유롭게 무시할 수있는 동안, 애플 사용자는이 가이드 라인을 따르는 UI를 가지고 있으며, 따르지 않으면 애플 사용자가보기 흉하고 매력적이지 않은 애플리케이션을 만들 것이다.

Here are Apple's Human Interface Guidelines

이 이미지를 포함하지 않는, 푸시 버튼은 항상 텍스트가 포함되어 나를

거기에서 푸시 버튼 내용 및 라벨링

을 인용 보자. 당신이 버튼 아이콘이나 다른 이미지를 표시 을해야하는 경우, 대신에 설명 경사 버튼, 사용 "베벨 버튼을."

푸시 버튼의 라벨을 설명하는 동사 나 동사구해야한다 작업 수행 - 저장, 닫기, 인쇄, 삭제, 암호 변경 등. 푸시 버튼이 단일 설정에서 작동하는 경우 버튼을 가능한 한 구체적으로 으로 지정합니다. 예를 들어, " 그림 선택 ..."은 "선택 ..."보다 더 많은 입니다. 버튼이 즉각적인 조치를하기 때문에 은 "지금" (예 : 지금 검색)을 사용할 필요가 없습니다 .

푸시 버튼 레이블에 설명 로, 제목 스타일의 총액을 가져야한다 " 인터페이스 요소 레이블 및 텍스트의 대문자." 경우 푸시 버튼 즉시 다른 창, 대화, 또는 그 작업을 수행 할 수있는 응용 프로그램 열립니다 , 레이블에 줄임표를 사용할 수 있습니다. 예를 들어, 메일 환경 설정은 그림 15-8에 표시된대로 .Mac 시스템 환경 설정을 열면 생략 기호 을 포함하는 푸시 버튼을 표시합니다.

버튼에는 퀴즈 게임에 대한 답변이 아닌 단일 동사 또는 동사가 포함되어야합니다! 2 ~ 5 개의 대답이있는 경우 라디오 단추를 사용하여 사용자가 대답을 선택하게하고 확인 단추를 사용하여 사용자가 대답을 수락하도록해야합니다. 5 가지가 넘는 답변을 보려면 지침에 따라 팝업 선택기를 고려해야합니다.이 경우에는 다소 추해 보일 것입니다.

답변이 매우 길고 중단해야하는 경우 하나의 열, 답변 당 한 행 및 각 셀이 여러 줄인 테이블을 사용할 수 있습니다. 따라서 사용자는 테이블 행을 클릭하여 테이블 행을 선택하고 표 셀을 강조 표시 한 다음 OK 버튼을 클릭하여 완료합니다. 또는 사용자가 임의의 표 셀을 선택하자마자 (즉 실수로 클릭을 교정 할 수있는 기회를 갖도록) 즉시 계속할 수 있습니다. 반면에, 여러 줄짜리 셀을 가진 테이블은 MacOS X에서 다소 드물다. 아이폰은 일부 텍스트를 사용하지만 텍스트는 거의 없다 (최대 2 줄).

+0

내 UI는 UI 요소가 내장 된 사과의 주식을 사용하지 않으므로 그대로 유지하려고합니다. 귀하의 테이블 제안을 존중하지만 그것은 내 주제에 맞지 않을 것입니다. http://driph.com/words/2008/08/game-trivia-catechism-iphone-teaser/를 참조하여 왜이 작업을 수행하려고하는지 알 수 있습니다. – Lounges

+0

코드 샘플을 보내 주셔서 감사합니다. 실용적인 프로그래머 핵심 애니메이션 책을 실제로 집어 냈고 핵심 애니메이션에서 매우 유사한 샘플을 얻었으며 4 개의 버튼 스크롤 텍스트로보기에는 좋지 않으므로 함께 가지 않기로 결정했습니다. 시도하는 것은 깔끔한 생각이었습니다. – Lounges

관련 문제