버튼에서 오버플로 텍스트를 스크롤하는 쉬운 방법?
https://stackoverflow.com/questions/147154
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
버튼 컨트롤에 표시하기에는 너무 긴 텍스트에 대한 정보를 찾을 수있는 예나 리소스가 있습니까? 나는이 라인을 따라 무언가를 생각하고있다.
- 오버 플로우를 의미하기 위해 끝에 '...'가있는 현재 텍스트에 맞는 텍스트가 많은 텍스트를 표시합니다.
- 1 초에 일시 중지 한 다음 문자열의 오른쪽 부분을 표시하여 텍스트를 오른쪽 가장자리에 천천히 스크롤하십시오.
- 오버플로를 의미하기 위해 처음에 '...'가있는 현재 텍스트에 맞는 많은 텍스트를 표시합니다.
- 모든 것을 반대로 시작하십시오.
특정 모바일 장치에서 "코어"또는 내장 된 "애니메이션"프레임 워크를 사용하여이를 수행하는 쉬운 방법이 있습니까?
편집] 사람들이 내가 성취하려는 것이 적절하다고 생각하기 때문에 더 많은 세부 사항을 추가하기 위해 더 많은 세부 사항을 추가했습니다. 버튼은 퀴즈 게임의 답변입니다. Speciffic UI 기능을 수행하지는 않지만 답을 표시하기위한 것입니다. Apple 자체는 iPod Nano의 Iquiz Trivia 게임 에서이 작업을 수행하고 있으며 버튼의 너비보다 긴 답변에 대한 매우 우아한 솔루션이라고 생각합니다.
그것이 '...'라는 경우 그것은 이것의 어려운 부분입니다. 이 요구 사항을 제거했다고 가정 해 봅시다. 버튼의 레이블을 전체 크기로 만들었지 만 버튼의 클라이언트 낙타에 자르고 일부 애니메이션 메소드를 사용하여 클리핑 낙타 내에서 스크롤하십시오. 이것은 나에게 타원을 빼고 거의 동일한 효과를 줄 것이다.
해결책
아이디어는 다음과 같습니다. 타원 대신 (...) 각 측면에 기울기를 사용하여 추가 텍스트가 배경색으로 사라집니다. 그런 다음 세 명의 칼레이와 함께 할 수 있습니다 : 텍스트는 하나, 페이드 효과를위한 2 개.
페이드 마스크는 투명에서 배경색으로가는 그라디언트가있는 직사각형 일뿐입니다. 텍스트 계층 위에 위치해야합니다. 텍스트는 텍스트 레이어에 그려지고 설명하는 방식으로 앞뒤로 미끄러지는 애니메이션입니다. 경로를 설명하는 cgpath 객체를 만들어 텍스트 레이어에 추가하는 CakeyFrameAnimation 객체에 추가 할 수 있습니다.
이것이 "쉬운"이라고 생각하는지 여부는 핵심 애니메이션을 얼마나 잘 알고 있는지에 달려 있지만, 일단 API를 배우면 너무 나쁘지 않으며 문제가 될 가치가 있다고 생각합니다.
다른 팁
둔감하고 싶지 않으면 문제를 다시 생각해야 할 것입니다. 버튼에는 명확하고 예측 가능한 기능이 있어야합니다. 텍스트를 저장하고 표시 할 곳이 아닙니다. 아래에 멋진 표준 버튼이있는 화면에 설명 쇼가있을 수 있습니까?
소스 코드로 업데이트 예 :
다음은 소스 코드 예제를 사용할 준비가되었습니다 (실제로 이미지 및 NIB 파일과 일부 소스 코드가 포함 된 완전 Zipped Xcode 프로젝트)는 iPhone이 아니라 코어 애니메이션을 사용하지 않고 몇 가지 간단한 nsimages와 nsimageview를 사용합니다. 그것은 단지 저렴한 해킹이며, 요청한 전체 기능을 구현하지는 않습니다 (죄송합니다. 그러나 소스 코드를 작성하고 싶지는 않습니다 : -P), 끔찍한 코드 레이아웃 (이봐, 나는 이것을 함께 해킹했습니다. 몇 분, 그래서 당신은 더 나은 것을 기대할 수 없습니다 ;-))) 그리고 그것은 단지 이것이 어떻게 할 수 있는지 데모 일뿐입니다. 핵심 애니메이션으로도 수행 할 수 있지만이 접근 방식은 더 간단합니다. 버튼 애니메이션을 nsimageview로 구성하는 것은 nsview를 서브 클래스하고 컨텍스트에 직접 페인트하는 것만 큼 좋지는 않지만 훨씬 간단합니다 (가능한 가장 간단한 솔루션을 해킹하고 싶었습니다). 또한 오른쪽으로 스크롤되면 뒤로 스크롤되지 않습니다. 따라서 뒤로 스크롤하고 왼쪽으로 점을 그린 후 2 초를 발사하는 다른 NSTIMER를 시작하려면 다른 방법이 필요합니다.
Xcode에서 프로젝트를 열고 히트 런을 열면 그게 전부입니다. 그런 다음 소스 코드를 살펴보십시오. 그다지 복잡하지는 않습니다 (그러나 먼저 그것을 재구성해야 할 수도 있습니다. 레이아웃이 짜증납니다).
내 답변에 대한 의견으로 인해 업데이트 :
Apple UI 요소를 전혀 사용하지 않으면 문제를 보지 못합니다. 이 경우 버튼은 버튼이 아니며 클릭 가능한보기 (코코아를 사용하는 경우 NSVIEW) 일뿐입니다. NSView 하위 클래스 NSView 만 MyAnsWerview로 표시되고 페인트 방법을 덮어 쓸 수있어 원하는대로보기에 페인트를 칠할 수 있습니다. 멀티 라인 텍스트, 스크롤 텍스트, 3D 텍스트 애니메이션, 상상력에 완전히 달려 있습니다.
여기 예입니다, 누군가가 NSView를 서브 클래스 한 방법을 보여주기 위해 기본적으로 존재하지 않는 완전한 사용자 정의 컨트롤을 작성하는 방법을 보여줍니다. 컨트롤은 다음과 같습니다.
왼쪽 상단의 재미있는 것을 보십니까? 그것은 통제입니다. 작동 방식은 다음과 같습니다.
나는 당신의 질문에 대한 대답이 아니기 때문에 그렇게 말하는 것을 싫어합니다.그렇게하지 마십시오!"Apple은 사용자 인터페이스를 구현하는 방법 가이드 라인이 있습니다. 자유롭게 무시할 수는 있지만 Apple 사용자는 이러한 지침에 따라 UIS를 사용하는 데 사용되며 Apple 사용자가 추악하고 거의 매력적이지 않은 응용 프로그램을 만들 수 있습니다.
거기에서 인용하겠습니다
푸시 버튼 내용 및 라벨링
푸시 버튼에는 항상 텍스트가 포함되어 있으므로 이미지가 포함되어 있지 않습니다. 버튼에 아이콘이나 다른 이미지를 표시 해야하는 경우 "Bevel 버튼"에 설명 된 베벨 버튼을 사용하십시오.
푸시 버튼의 레이블은 수행하는 동사 또는 동사 구문이어야합니다.이 동작은 수행하는 동작, 닫기, 인쇄, 삭제, 비밀번호 변경 등을 설명합니다. 푸시 버튼이 단일 설정에서 작동하는 경우 버튼에 가능한 한 구체적으로 레이블을 지정하십시오. “그림 선택…
푸시 버튼 레이블에는 "인터페이스 요소 레이블 및 텍스트의 대문자"에 설명 된 바와 같이 제목 스타일의 대문자가 있어야합니다. 푸시 버튼이 즉시 다른 창, 대화 상자 또는 응용 프로그램을 엽니다면 동작을 수행하는 경우 라벨에서 타원을 사용할 수 있습니다. 예를 들어, 메일 환경 설정은 그림 15-8과 같이 .mac 시스템 환경 설정을 열기 때문에 엘립스 시스를 포함하는 푸시 버튼을 표시합니다.
버튼에는 퀴즈 게임에 대한 답변이 아닌 단일 동사 나 동사 문구가 포함되어야합니다! 2에서 5 사이의 답변이있는 경우 라디오 버튼을 사용하여 사용자에게 답과 확인 버튼을 선택하여 사용자가 답을 수락하도록해야합니다. 5 회 이상의 답변의 경우 가이드 라인에 따라 팝업 선택기를 고려해야하지만,이 경우에는 다소 추악 할 것 같습니다.
답변이 매우 길고 파손되어야하는 경우 단 하나의 열, 답당 한 행, 각 셀이 여러 셀 인 테이블을 사용하는 것을 고려할 수 있습니다. 따라서 사용자는 테이블 행을 클릭하여 테이블 행을 선택하여 테이블 셀을 강조 표시 한 다음 확인 버튼을 클릭하여 완료합니다. 또는 사용자가 테이블 셀을 선택하자마자 직접 계속 계속 될 수 있습니다 (그러나 그 방법으로 우발적 인 클릭을 수정할 수있는 기회). 반면에, 멀티 라인 셀이있는 테이블은 MacOS X에서는 다소 드물다. iPhone은 일부를 사용하지만 일반적으로 텍스트는 거의 없습니다 (최대 두 줄).
Uilinebreakmode가 아닌 표준 API를 사용하여 그렇게 할 수 없습니다. 또한 스타일 가이드에 따르면 Ellipsis는 눌렀을 때의 버튼이 더 많은 정보를 요청할 것임을 나타냅니다. 귀하의 제안 된 Ellipsis 사용은이 가이드 라인을 위반합니다.
설명하는 동작을 구현하려면 사용자 정의 논리가 필요하지만 어쨌든 갈 길이 아니라고 생각합니다.
이것은 매우 좋은 UI 연습은 아니지만 여전히하고 싶다면 버튼처럼 보이도록 클릭 가능한 DIV를 통해 그렇게하는 것이 가장 좋습니다.
DIV의 너비를 명시적인 값으로 설정하고 오버플로가 숨겨져있는 다음 간격으로 실행되는 스크립트를 사용 하여이 DIV의 ScROLLLEFT 속성을 조정하십시오.
