2014년 롤리팝이 나오면서 같이 나온 머티리얼 디자인에대해서 

머티리얼 디자인은 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 

우선영어로 써있는것을 번역하였는데 맞는 건지는 모르겠습니다,


머티리얼은 3D world이다.


머티리얼 환경은 모든 개체가 x, y 및 z 치수가 3 차원 공간을 의미한다.Z 축은 수직 양의 Z 축 뷰어를 향해 연장하여, 디스플레이의 평면에 정렬된다. 모든 재료의 시트는 Z 축을 따라 하나의 위치를 점유하고 표준 1DP 두께를 갖는다.

빛과 그림자.

머티리얼환경에서 가상 라이트는 네모난 종이를 비춥니 다. 주위의 빛이 모든 각도에서 부드러운 그림자를 만들면서 키 라이트는 방향성의 그림자를 만듭니다.

머티리얼환경에서의 그림자는이 두 광원에 의해 주조됩니다. 응용 프로그램 개발에서 그림자는 광원이 z 축을 따라 다양한 위치에 자재의 시트에 의해 차단되었을 때 발생합니다. 웹상에서 그림자는 y 축을 조작하여 표시하고 있습니다. 다음 예제에서는 6dp 높이의 카드를 보여줍니다.


물리적 특성.

1. 머티리얼은 X 및 Y 치수 (DP 측정) 및 균일한 두께 (1DP)을 변화하고있다.


2. 머티리얼은 그림자를 캐스팅 합니다.

그림자는 머티리얼 요소 사이의 상대적인 높이 (Z-위치)에서 자연적으로 발생.
그림자는 머티리얼 요소 사이의 상대적인 높이를 묘사.


http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSmZ5VlNBRHBXNXM/inline%20whatismaterial-materialprop-physicalprop-PaperShadow_01_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼 콘텐츠는 어떤 모양이든 색상이든 표시된다.
   하지만 두꼐는 표현하지 않는다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsUGtDSTgtekFORGs/whatismaterial-materialprop-physicalprop-InkDisplay_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


4. 머티리얼의 컨텐츠는 머티리얼안에서는 독립적인 동작을 할수있지만
   머티리얼 범위 내로 국한된다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



5. 머티리얼은 입체(고체?)이다.

do
입력이벤트는 오직 foreground 머티리얼에만 영향을 미칩니다. 


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


6. 여러개의 머티리얼 요소는 공간에서 동시에 동일한 점을 점유 할 수 없습니다.

대신에 머티리얼 요소를 분리하기 위한 하나의 방법은 고도를 사용하여 동시에 동일한점의 점유를 방지합니다.


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



7. 머티리얼은 다른 물질을 통과 할 수 없습니다.

고도를 변경하는 경우, 예를 들어, 하나의 마티리얼의 시트는 또 다른 머티리얼 시트를 통과 할 수 없습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/whatismaterial_properties_physical_07_xhdpi_009.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


머티리얼 변형.

1. 머티리얼은 모양을 변경할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsMndnRld3dl9nVU0/whatismaterial-materialprop-transformingmaterial-PaperShape_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 평면을 따라서 증대되거나 축소됩니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsLVpqQ0pBOXY3WDQ/whatismaterial-materialprop-transformingmaterial-PaperShapeLinear_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼은 굴절하거나 접히지않는다.


4. 머티리얼의 여러개의 시트는 또다른 하나의 머티리얼의 시트와 합칠 수 있습니다.
5. 머티리얼의 시트가 분할할때 머티리얼의 시트는 다시 합쳐질수 있습니다.


※머티리얼의 이동(운동)

1. 머티리얼은 자발적을 생성 또는 그밖에 환경으로 소멸 될 수 잇다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTUF0YzJrX0xfWmc/whatismaterial-materialprop-movementmaterial-PaperPointExpand_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 축 방향으로 이동할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsYXIyWl9fZURydTA/whatismaterial-materialprop-movementmaterial-PaperMove_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. Z 축 방향 운동은 전형적으로 머티리얼과 사용자의 상호 작용의 결과이다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQW1HYnpicTVySG8/whatismaterial-materialprop-movementmaterial-Material_Response_xhdpi_003.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


원래는 동영상이 있어야지 저 글귀들이 이해가 아주 잘가는데 설마 있겠나싶지만 저작권이 혹시 있을지도 몰라서...
아무튼 직접 해당 페이지에 들어가셔서 보시면 잘이해되실겁니다.

이글의 원본은
http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material
이곳에 있습니다.


728x90
반응형

이번에는 GitHub에서 예제를 다운로드하는 방법에 대해서 알아볼것입니다.

GitHub이란?

GitHub의 친구, 동료, 급우, 완전한 낯선 사람과 코드를 공유 할 수있는 최고의 장소입니다. 많은 개발자들이 함께 놀라운 일들을 구축 하며 GitHub을 사용합니다.

GitHub.com, 우리의 데스크톱 응용 프로그램 및 GitHub의 기업의 협업 기능으로, 더 빨리, 더 나은 코드를 작성하는 개인과 팀을 위해 쉽게되어있다.

원래 공유 코드를 단순화하기 위해 톰 프레스턴 - 베르너, 크리스 Wanstrath 및 PJ Hyett에 의해 설립되었고
GitHub은 세계 최대의 코드 호스트로 성장했습니다.

아무튼 다른 사람들과의 개발을 협업할 수 있는 제일 좋은 방법이라 소개하는것 같군요

-홈페이지에서 발췌 

-공식 사이트 https://github.com/

아무튼 이제 GitHub에 있는 방대한 자료들을 다운로드 해볼까요?

1.Github 홈페이지에 들어가면 다음과 같이 화면이 보입니다.
  검색창에 다음과같이 원하는 위젯명이나 소스명 등등...을 입력해줍니다.
  저는 LIstView를 검색해 보겟습니다.


2.ListView를 검색해보면 여러가지 예제소스나 라이브러리 리스트가 나타납니다. 
  ① 예제소스나 라이브러리 리스트
  ② 작성된 언어
  ③ 별은 즐겨찾기 그옆에는 공유한 숫자를 뜻하는것 같군요
  우선 저는 별표가 많아보이는(보통 별표가 많을수록 제대로된 소스더군요)

beworker/pinned-section-listview

두번째 여기로 들어가보겟습니다.


3. 들어가보니 다음과 같이 zip파일로 다운 받거나 git로 복사할수있게 되어있네요
   그리고 밑에부분에는 스크린샷이 찍혀져 잇네요~
 



4. 요즘은 이렇게 요기에서 다운 받을 수 있네요


아무튼 간단하게 GitHub에서 예제를 다운로드 받을수있는 방법에 대해서 얘기했습니다.
부족하지만 많은정보를 얻어 가시길;;









728x90
반응형



안녕하세요 이제 막 시작한블로거 입니다.

이번에는 카메라 크롭관련예제 링크를 올릴건데요

저도 이소스를 보고 많이 도움되고 덕분에 카메라 크롭기능을 완성시킬수 있었습니다.

 

 

 


출처는 이곳입니다.
https://github.com/lvillani/android-cropimage

즐거운 코딩하시길바랍니다.

728x90
반응형

핀터레스트 레이아웃입니다.

핀터레스트는 "Pinterest" 라는 미국 소셜 네트워크 서비스에서 유래됐다고 하는데요

음... 뭐 아무튼 한번 플레이스토어에 가셔서 보시는 것도 나쁘지않을거라 생각됩니다.

https://play.google.com/store/apps/details?id=com.pinterest

예제의 스크린샷입니다.


예제 다운로드 주소는

https://github.com/etsy/AndroidStaggeredGrid

 


 

728x90
반응형

+ Recent posts