From Design pattern
Jump to: navigation, search
(Example : Android_Noom Diet Coach)
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
Spinner는 기지정 정보를 입력하기 위하여 사용되는 패턴이다. 입력된 정보를 현재 화면에서 학인할 수 있으며, 입력을 위하여 선택을 하면 현재 화면 위로 선택가능한 기지정 정보 리스트가 새로운 창으로 나타난다. 새로운 창에서 선택이 이루어지면 창은 사라지고, 선택되어진 정보가 화면에 표시되는 것이 특징이다. 주로 설정화면에서 사용된다.
  
{{#css:
+
Spinner의 기지정 정보 리스트는 Radio button, Checkboxers, Time and date pickers와 함께 사용된다. Radio button을 가지고 있는 Spinner의 경우 1개의 기지정 정보만을 선택하도록 되어 있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
=== With this pattern, we can solve... ===
font-weight: 600;
+
Spinner는 현재 화면에서 선택가능한 기지정정보 리스트를 모두 표시 할 수 없을 때 사용한다. 기존의 화면 위에 새로운 창을 이용하여 기지정정보 리스트를 효과적으로 보여주며, 부적절한 값을 입력하는 상황을 막을 수 있다.
}
+
  
span.mw-editsection {
+
* Spinner는 빠르게 정확한 정보를 입력할 수 있도록 한다.
font-weight: 200;
+
* 유사한 패턴으로는 [[Dropdown list]]나 [[Arccodion list]]가 있다. 기지정 정보 리스트를 보여주는 방식이 현재 화면에서 이루어지는 것이 아닌, 새로운 창으로 보여주는 것이 기존의 패턴과의 차이점이다.
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
=== Example : Android_Noom Diet Coach ===
font-weight: 200;
+
[[File:Spinner2.jpg]]
}
+
  
.art-subpage {
 
background: #F7F7F7;
 
}
 
 
#mw-content-text p {
 
padding-top: 0px;
 
padding-bottom: 6px;
 
}
 
 
.mw-content-ltr ul {
 
margin: 0.3em 0 0 42px;
 
}
 
 
 
hr {
 
margin-top: 0px;
 
margin-bottom: 0px;
 
margin-left: -31px;
 
width: 720px;
 
border-bottom: 1px solid #E0E0DD;
 
border-left: 0px;
 
border-right: 0px;
 
border-top: 30px solid #F7F7F7;
 
}
 
<!--
 
#sun-col {
 
-webkit-column-count:2; /* Chrome, Safari, Opera */
 
-moz-column-count:2; /* Firefox */
 
column-count:2;
 
}
 
 
#sun-col p {
 
padding-left: 0px;
 
-->
 
}
 
 
}}
 
 
Spinner은 app에서 숫자 입력 컨트롤로 쓰이는 pattern이다. 주로 편집 필드와 우측 또는 좌측 옆의 작고 납작한 두 개의 화살표로 구성되어 있다.
 
 
현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나, 편집 필드에 직접 원하는 숫자값을 입력한다.
 
 
=== With this pattern, we can solve... ===
 
app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Diald은 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.
 
 
* Dial은 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다.
 
* Dial은 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
 
* Dial은 현실에서 사용자가 손으로 직접 Dial을 잡고 좌우측으로 돌려 값을 조절하는 실제 기계의 메타포를 적용시킨 pattern이다.
 
 
=== Example : ===
 
{{#Widget:Vimeo|id=|width=300|height=533|start=4s}}
 
  
 
----
 
----
  
== Spinner ==
+
===  Android_Noom Diet Coach ===
<div id="sun-col">
+
{{#Widget:Vimeo|id=93361933|width=300|height=480}}
 
+
===  ===
+
  
 +
=== Android_Expedia ===
 +
{{#Widget:Vimeo|id=96420814|width=300|height=541}}
  
</div>
 
  
[[Category:Enter a continuous value]]
+
[[Category:Select pre-defined values]]

Latest revision as of 23:58, 24 July 2014

Spinner는 기지정 정보를 입력하기 위하여 사용되는 패턴이다. 입력된 정보를 현재 화면에서 학인할 수 있으며, 입력을 위하여 선택을 하면 현재 화면 위로 선택가능한 기지정 정보 리스트가 새로운 창으로 나타난다. 새로운 창에서 선택이 이루어지면 창은 사라지고, 선택되어진 정보가 화면에 표시되는 것이 특징이다. 주로 설정화면에서 사용된다.

Spinner의 기지정 정보 리스트는 Radio button, Checkboxers, Time and date pickers와 함께 사용된다. Radio button을 가지고 있는 Spinner의 경우 1개의 기지정 정보만을 선택하도록 되어 있다.

With this pattern, we can solve...

Spinner는 현재 화면에서 선택가능한 기지정정보 리스트를 모두 표시 할 수 없을 때 사용한다. 기존의 화면 위에 새로운 창을 이용하여 기지정정보 리스트를 효과적으로 보여주며, 부적절한 값을 입력하는 상황을 막을 수 있다.

  • Spinner는 빠르게 정확한 정보를 입력할 수 있도록 한다.
  • 유사한 패턴으로는 Dropdown listArccodion list가 있다. 기지정 정보 리스트를 보여주는 방식이 현재 화면에서 이루어지는 것이 아닌, 새로운 창으로 보여주는 것이 기존의 패턴과의 차이점이다.

Example : Android_Noom Diet Coach

Spinner2.jpg



Android_Noom Diet Coach

Android_Expedia