가이드라인

 

 

1) 가이드라인 추가를 위해 해당 메뉴를 찾은 후, 선택하자.

 

가이드라인은 Vertical (세로) 와 Horizontal (가로) 2종류가 있다.

 

 

 

 

 

2) 가로, 세로 가이드라인을 잡아준 모습이다.

 

 

 

 

 

3) 버튼을 배치했다. 지정한 가이드 라인에 위치를 잡아주어서, 편하게 위치 조정을

해줄 수 있다.

 

 

 

 

 

 

 

 

 

 

'안드로이드 > Component' 카테고리의 다른 글

ConstraintLayout Animation -6  (0) 2017.06.22
ConstraintLayout -5 ConstraintSet Animation  (0) 2017.06.21
ConstraintLayout -3 체인속성  (0) 2017.06.20
ConstraintLayout -2 체인  (0) 2017.06.20
Constraint Layout -1  (0) 2017.06.19
Posted by 자바리즘
,

체인의 속성



1) Spread

기본속성

적당한 거리로 체인을 유지 시켜 준다.



2) Spread inside

처음과, 나중의 컴포넌트가 각각 부모쪽으로 붙으면서 정렬이 된다.



3) Weighted

기존에 LinearLayout 에 있던 WEIGHT 과 비슷하다. 비율을 정해서 공간을 차지하게 정렬 한다.



4) Packed

컴포넌트들이 마진(여백) 값 없이 정렬된다.





 

 

 

출처 : 안드로이드 개발자 사이트

'안드로이드 > Component' 카테고리의 다른 글

ConstraintLayout -5 ConstraintSet Animation  (0) 2017.06.21
ConstraintLayout -4 GuideLine  (0) 2017.06.21
ConstraintLayout -2 체인  (0) 2017.06.20
Constraint Layout -1  (0) 2017.06.19
ListView Background Selector  (0) 2015.03.20
Posted by 자바리즘
,

Chain

 

  체인

 

 

 

 

 

1) 버튼을 예로 들어보면,

버튼 위젯을 아무렇게나 배치 한 후,

 

 

 

 

 

2) 각 컴포넌트의 왼쪽과 상단 기준을 Parent 로 잡아주자.

 

 

 

 

 

 

 

3) 전체 컴포넌트 영역을 잡은 후, 오른쪽 마우스 클릭

 

Center Horizontally Chain 을 걸어주자!!

 

 

 

 

 

 

4) 가로 가운데 정렬 체인이 걸려서 정렬이 잘 되는 것을 확인할 수 있다.

첫번째 버튼을 끌어다 놓으니 쇠사슬 같은 모양으로 연결되어 있다.

이게 바로 체인 연결이 된 것이다.

 

 

 

 

 

Posted by 자바리즘
,

안드로이드 Constraint Layout 에 대해 알아보고자 한다.


Constraint ? 제약 ?



안드로이드에서는 Editor 창에서 드래그 앤 드랍을 하는 것이 익숙치가 않았는데,


Constraint Layout 에서는 그런게 가능해서 많이 낯설다.


속성을 대략 살펴보면


app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"


뭔가 생소하다.


위에 명시된 속성을 설명하자면 constraintBottom_toBottomOf = "parent"


Bottom 에서 Bottom 으로 연결 된 것을 말하며 기준은 최상위 루트인 parent 에 두겠다는 의미이다. 잘모르겠지요?


아래 캡쳐된 그림을 기준으로 보면, 상하좌우를 부모에 기준을 두고 정렬을 할 수 있다.







아직 잘 모르겠어요. bias 라는 weight 속성이 있는데 더 알아보고 포스팅 하겠습니다 ㅠ

Posted by 자바리즘
,

Gruntfile.js 설정 - 1

GRUNT 2017. 2. 9. 11:21

http://gruntjs.com/sample-gruntfile


위 페이지에서 Sample Gruntfile 을 복사한 후, Gruntfile.js 라는 이름으로 파일 생성 후

붙여 넣는다.


Grunt 설정이 처음이라면 실행이 안될 수 있다.


module.exports = function(grunt) {


  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    concat_css: {

        options: {

          // Task-specific options go here.

        },

        all: {

          src: ["src/*.css"],

          dest: "src/styles.css"

        },

      }

  });


    grunt.loadNpmTasks('grunt-concat-css');


    grunt.registerTask('default', ['concat_css']);

};


이렇게만 입력 한 후, 저장하자.





1. 프로젝트에 사용할 packge 다운로드


https://www.npmjs.com/ 접속


(NPM 이란 Node Package Manager 의 약자 이다)





2. 위 사이트에서 grunt-concat-css 검색한다.


해당하는 작업의 설명이 나온다.

설명대로 원하는 프로젝트 폴더에서 명령어를 입력하고, 필요한 명령어를

Gruntfile.js 에 등록해준다.





all 이라는 속성에는 개별 지정이 아닌 모든 css 파일을 선택하는 부분이다.

경로는 알아서 잘 지정 해주자.

css 위치 정도는 알겠죠? 'ㅂ' 

자신의 프로젝트 폴더의 css 파일이 어디 있는지 찾아보세요.

dest 는 style.css 라는 이름으로 어디에 만들어질지 결정해주는 곳입니다.



그리고 나서, 콘솔창의 해당폴더에서 grunt 라고 입력해주면. 자동으로 빌드가 됩니다.



'GRUNT' 카테고리의 다른 글

시작하기 - 0  (0) 2017.02.09
Posted by 자바리즘
,

시작하기 - 0

GRUNT 2017. 2. 9. 11:14

Grunt


자동화 툴에 대해 무지한 나는 Grunt 를 알고서, 와 이런게 있구나 라는 생각이 들었다.


  • Task 중심의 자바스크립트 빌드 도구.
  • Node.js 기반



이런 툴을 써보지 않아서, 접근이 다소 어려웠다.




Nodejs 설치

  • www.nodejs.org 다운로드 후, 설치
  • 터미널 창에서 node --version 입력 했을 때 버전정보가 나오면 설치가 정상적으로 된 것이다.



Grunt-cli 설치

  • npm install grunt-cli -g
  • 혹시 맥에서 설치 안되면 명령어 앞에 sudo 를 붙히세요. (관리자모드)



Grunt 설정 파일

  • gruntfile.js
  • packge.json


'GRUNT' 카테고리의 다른 글

Gruntfile.js 설정 - 1  (0) 2017.02.09
Posted by 자바리즘
,

이것도 많은 삽질 끝에 알아 냈다.



Navigation Bar 를 최 상단에 선언 해놔야 정상적으로 보이는 것이 가능했다.



app.component.ts 에 메뉴가 정의 되어서,


다른 페이지 (클래스) 에서 어떻게 접근을 할 까 많은 고민과 검색을 했다.


단순했다.


커스텀 클래스에서


생성자 선언할 때,




export class AnyPage

{

constructor(public appCtrl: App)

{

this.appCtrl.getRootNav().push( 페이지클래스 );

}

}





사용하려면 아래 항목을 import 해주어야 합니다.


import { App } from 'ionic-angular';

'하이브리드 > 아이오닉 (Ionic)' 카테고리의 다른 글

데이타 바인딩 하기  (0) 2017.02.02
angular2 api  (0) 2017.01.23
새로운 페이지 추가  (0) 2017.01.21
새 프로젝트 생성  (0) 2017.01.17
아이오닉 실행  (0) 2017.01.17
Posted by 자바리즘
,