본문 바로가기

Programming

 (477)
3. 사용자 인터페이스 구현 (3) - 뷰의 기초 공통 속성 2 앞서 살펴본 id 속성에 이어서, 계속해서 뷰의 공통 속성을 살펴보도록 하겠습니다. ○ layout_width, layout_height 뷰의 화면 표시를 위한 속성 중 size(크기)는 필수 속성입니다. 선언하지 않으면 에러가 발생하게 되죠. 기본적으로 아래와 같은 형식으로 선언하게 됩니다. 기본적으로 크기를 지정하는 속성 값은 아래와 같이 네 가지로 지정할 수 있습니다. · match_parent · fill_parent · wrap_content · 100px match_parent와 fill_parent는 의미상 동일해 결과는 같습니다. 기본적으로 해당 속성이 적용된 뷰는, 부모 계층의 뷰가 지정한 크기에 꽉 들어차도록 자동으로 결정하게 됩니다. 뷰 계층 구조는 추후 따로 살펴볼 예정이니, 여기서..
3. 사용자 인터페이스 구현 (3) - 뷰의 기초 공통 속성 1 레이아웃 XML로 UI를 구성한다고 가정했을 때, 각각의 뷰 태그에는 여러가지 속성을 부여해 값을 조정할 수 있습니다. HTML의 태그 별 속성을 떠올리시면 쉽게 이해가 되실 것입니다. 이번 아티클에서는 가장 기본적이면서도 자주 사용하게 되는 뷰 - TextView를 기준으로 뷰 클래스의 공통적인 속성에 대해서 하나씩 살펴보도록 하겠습니다. ○ id 속성 id 속성은 필수 속성은 아닙니다. 각각의 뷰를 식별할 수 있는 구분자로 사용되는데, 이를 자바 코드에서 불러와 컨트롤하는데 사용하게 됩니다. 앞서서 setContentView( ) 함수에 대해서 살펴보았는데, 이와 연계하여 화면을 구성하는 데 사용하게 되죠. setContentView( ) 함수 호출 → 레이아웃 XML 호출 → XML에 선언해둔 객체..
3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [2/2] 앞선 아티클에서 우리는 자바 코드만으로 레이아웃에 뷰를 적용하고, 이를 출력하는 실습까지 진행해 보았습니다. 3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [1/2] 안드로이드 프로그래밍에서 UI를 만드는 방법은 이론적으로는 자바 코드로 직접 작성하기, 레이아웃 XML로 작성하기 - 이렇게 두 가지 방법이 있습니다. 물론 실제로는 대부분 레이아웃 XML을 활 nozeroslope.tistory.com 이번에는 익숙한(?) 방식인 XML을 사용해 UI를 구성하는 방법에 대해서 살펴보도록 하겠습니다. 이번에는 이전 아티클에서 생성했던 모듈에서, MainActivity는 그대로 두고 새로운 액티비티를 추가로 생성해서 진행해 보겠습니다. 프로젝트 메뉴에서 패키지명 com.examp..
3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [1/2] 안드로이드 프로그래밍에서 UI를 만드는 방법은 이론적으로는 자바 코드로 직접 작성하기, 레이아웃 XML로 작성하기 - 이렇게 두 가지 방법이 있습니다. 물론 실제로는 대부분 레이아웃 XML을 활용하는 것이 사실이지만, 기본적인 원리를 학습하는 차원에서 두 가지 방법 모두 학습해 보도록 하겠습니다. ○ 자바 코드 사용 자바 코드를 통해서 화면을 구성하게 되면 - 레이아웃 XML을 사용하지 않고, 자바 코드만으로 뷰 생성을 진행하고 메서드를 활용해 뷰의 속성 등을 일일이 지정하게 됩니다. 그리고 이렇게 준비한 뷰를 setContentView( ) 함수의 파라미터로 넘기는 방식으로 화면을 구현하게 됩니다. 안드로이드 스튜디오를 실행하고, 우리가 앞서서 사용한 AndroidLab 프로젝트를 다시 활용해 봅시다...
2. Javascript ES2015 (4) - 구조 분해 할당 구조 분해 할당을 사용하면, 객체와 배열로부터 속성 / 요소를 쉽게 꺼낼 수 있습니다. 우선 예를 들어서 바로 살펴보도록 하겠습니다. 아래 예제에서는, candyMachine이라는 객체에 할당된 속성 중 getCandy라는 함수 속성, 그리고 status 속성 내의 count라는 속성을 - 동일한 이름을 가진 전역 변수에 할당하는 코드입니다. (함수 자체를 할당하는 것입니다! 리턴 값을 할당하는 것이 아니기에 실행하지는 않습니다) var candyMachine = { status: { name: 'node', count: 5 }, // 호출 객체의 count를 1 감소하고 리턴한다. getCandy: function(){ this.status.count--; return this.status.count;..
2. Javascript ES2015 (3) - Arrow Function(화살표 함수) ES2015에서는 화살표 함수(arrow function)가 추가되었습니다. 물론 기존의 함수 리터럴도 그대로 사용이 가능합니다. 여기서 설명하는 화살표 함수는 람다식과 비슷한 형태로 생각해 주시면 이해가 빠를 것입니다. 간단한 add 함수 선언 예제를 살펴보겠습니다. function add1(x, y){ return x + y; } const add2 = (x, y) => { return x + y; }; /* const add2 = function(x, y){ return x + y; }; */ const add3 = (x, y) => x + y; const add4 = (x, y) => (x + y); function not1(x){ return !x; } const not2 = x => !x; a..
2. Javascript ES2015 (2) - 템플릿 문자열, 객체 리터럴 ○ 템플릿 문자열 ES2015 문법에 새로 생긴 문자열 표현에 대해서도 살펴보겠습니다. 요약하면, 이 새로운 문자열은 (큰 or 작은) 따옴표가 아닌 백틱(` , Tab 상단 키)을 사용한다는 점입니다. 이 새로운 문자열 사용 방식이 왜 필요한지에 대해서도 살펴보겠습니다. 우선, 우리가 아래 변수들을 이용해서 결과적으로 1 더하기 2는 '3' 이라는 텍스트를 출력한다고 가정해 보겠습니다. var num1 = 1; var num2 = 2; var result = 3; var string1 = num1 + ' 더하기 ' + num2 + ' 는 \'' + result +'\''; console.log(string1); // 1 더하기 2 는 '3' 잘 알고 있는 방식이지만, 생각보다 string1 변수를 선언..
2. Javascript ES2015 (1) - const, let 우선 자바스크립트와 관련해서 2015년 발표된 ES2015(ES6) 이후의 최신 문법에 대해서 차근차근 살펴보도록 하겠습니다. 본 블로그 내의 기본 자바스크립트 문법만을 공부한 상태라면, ES2015 이후의 업데이트 된 자바스크립트 문법에 대해서도 충분히 학습해야 할 필요성이 있습니다. ○ const, let 간단하게 요점만 먼저 설명하자면, const와 let은 var를 대체합니다. var와 const / let의 차이점은 무엇일까요? 코드에서의 스코프의 차이가 있습니다. 아래 예제를 비교해 보겠습니다. if (true) { var x = 3; } console.log(x); // 3 if (true) { var y = 3; } console.log(y); // Uncaught ReferenceErro..

티스토리툴바