'분류 전체보기'에 해당되는 글 236건

안녕하세요. 제임스 입니다. 

Android 개발 중에 DP, SP, PX 등의 치수 단위를 많이 보게 됩니다. 

일전에 개념 정리한 내용이 있으니 참조 하시면 좋을 것 같구요.

http://jamesdreaming.tistory.com/41

이번에는 이 단위 변환 방법에 대해 정리해 보겠습니다. 

■ DP 를 PX 로 변환

import android.util.DisplayMetrics;
import android.util.TypedValue;

public static int convertDpToPixels(float dp, Context context) {
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
    return px;
}

■ SP 를 PX 로 변환

public static int convertSpToPixels(float sp, Context context) {
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, context.getResources().getDisplayMetrics());
    return px;
}

■ DP 를 SP 로 변환???

public static int convertDpToSp(float dp, Context context) {
    int sp = (int) (convertDpToPixels(dp, context) / (float) convertSpToPixels(dp, context));
    return sp;
}

코드를 위와 같이 작성 하긴 했지만 실제로 사용할 일이 없습니다. 

sp 는 텍스트 사이즈를 정의 할때 사용하고 dp 는 그 이외 모든 사이즈를 정의할때 사용합니다. 

만약 텍스트 사이즈를 dp 로 정의 했다면 문제가 될 수도 있겠지만 sp 로 정의 했다면 특별히 문제가 될 것은 없을 것이며 변환식 자체가 의미 없습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

추석이 아주 길었습니다. 즐거운 시간이 될것이라는 기대감과는 다른게 육아로 지친 몸을 이끌고 집으로 돌아 왔습니다 :D

역시 육아는쉬운일이 아닙니다 ^^;

어머니라는 이름이 얼마나 위대한 단어인지 새삼 느끼게 됩니다. 

일전에 온라인에서 합성 사진 만들기에 관해 포스팅 한 적이 있습니다.

http://jamesdreaming.tistory.com/64

이와 비슷한 사이트를 하나 더 찾아서 소개 드리고자 합니다. 

Photo Funia 라는 사이트 입니다. 링크는 아래 참조 하세요 :)

http://photofunia.com/

이 사이트에서도 내 사진을 사이트에서 제공하는 프레임에 합성하는 방식으로 이미지를 만들어 낼 수 있습니다. 

또한 원하는 텍스트를 입력하여 뽑아 내는 방식도 있는데요, 지금부터 정리해 보겠습니다. 

■ 합성 사진 만들기

여기서 제공하는 이미지중 미화 100달러에 원하는 이미지를 넣는 것이 있더군요. 

그래서 저는 또다시 14개월된 공주 사진을 이용하여 저만의 100달러 이미지를 만들어 보겠습니다. 

우선 완성본 부터 올려 봅니다 :) 

그럴듯 하죠? 

방법은 아래와 같습니다. 

1. 100 Dollars 라는 이미지를 찾습니다.

2. Choose photo 를 클릭합니다.

3. 사진이 있는 윈도우 창을 열어 둔 상태이면 드래그 앤 드롭으로 (끌어오기) 추가 할 수 있으며 그렇지 않다면 아래 Upload from PC 를 클릭하여 가져 오거나 카메라 또는 온라인에서 가져오기 등이 가능합니다. 

저는 PC 에 사진을 저장해 두었으므로 바로 끌어오기로 사진을 추가 했습니다. 

4. 제가 선택한 사진이 업로드 되고 원하는 부분을 선택 하는 모습닙니다. 

사각형 꼭지점을 클릭하여 움직여서 원하는 부분을 맞추시면 됩니다. 

5. 제가 원하는 부분을 선택 완료 후 Crop (잘라내기) 를 클릭하시면 다음으로 넘어 갑니다.

6. 선택한 이미지 확인 및 GO 를 클릭하여 이미지 합성을 시작합니다.

7. 합성 결과 화면에서 이미지를 확인 하시고 우상단의 Download 를 클릭하여 가장 큰 사이즈의 이미지를 다운 받으시거나 좌측 하단의 Download 아래 Large / Regular / Small 을 직접 선택 하셔서 이미지 사이즈를 선택 하셔도 됩니다. 

다운로드 된 이미지를 원하시는 곳에 사용하시면 됩니다 :)

간단하죠?

나만의 미화 100달러 뿐 아니라 많은 합성 이미지들이 있으니 잘 사용하시면 좋을 것 같습니다. 

■ 이미지에 텍스트 넣기

특정 이미지에 원하는 텍스트를 넣는 기능도 제공하고 있습니다. 

모든 이미지에서 가능한것은 아니구요. 아래와 같이 이미지 상에 Text 라는 문구가 있는 경우에 입력 가능합니다. 

사진 합성과는 다르게 이미지를 입력 하는 것이 아니라 텍스트만 입력 하면 됩니다. 

저는 Hello! 라는 문구를 입력하고 제공되는 Background 이미지 중 세번째 것을 선택 후 GO 를 클릭 했습니다.

Hello! 라는 문구가 아래와 이미지와 같이 프린트 되어 나와 있습니다. 

이미지 다운 받는 방법은 사진 합성과 동일 합니다. 

이 사이트에서도 재미 있는 많은 사진 합성도 가능하고 텍스트 입력도 가능하여 나만의 이미지를 만드는데 좋을 것 같습니다. 

절대 저작권법 따위 신경쓰지 않고 내 블로그를 내 사이트를 가꾸어 갈 수 있는 또 하나의 팁이었습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다.

요즘 카카오 페이지에 캐시 프렌즈 라는 녀석이 있더군요. 

여러 제휴 광고를 하고 있는데요. 이 중에 본인이 원하는 광고를 클릭하고 참여 하는 방식으로 카카오 페이지에서 사용 가능한 캐시를 획득하는 방식입니다. 

솔로 일때와는 다르게 월급 받아서 마나님께 모두 드리고 용돈 타서 쓰는 지금 상황에서는 캐시 구매후 글을 보는 것도 쉽지 않습니다. 

그래서 더 반가운 시스템인데요. 

문제는 이벤트 참여를 선택 시 아래와 같이 오류 팝업이 뜨면서 이벤트 참여를 할 수 가 없습니다. 

참 불친절 한게... 어디서 어떻게 해제를 하라는 건지 나오지 않습니다. 

그.래.서. 준비 했습니다. 

■ 광고 맞춤설정 선택 해제 비활성화 하기

휴대폰내 아이콘 목록에서 위와 같이 생긴 설정 아이콘을 찾으시거나 

상단 알림 바를 아래로 내려서 위와 같이 생긴 설정 버튼을 찾아서 클릭합니다.

설정 화면에서 Google 을 찾아 들어 갑니다.

서비스 항목에서 광고를 찾아 클릭 합니다.

광고 화면으로 진입하면 광고 맞춤설정 선택 해제 라는 항목이 있고 이것이 위와 같이 ON 상태로 되어 있는 것을 확인 하실 수 있습니다. 

이를 위와 같이 OFF 상태로 변경하여 줍니다.

이제 다시 카카오 페이지로 이동하여 캐시 받기 이벤트를 진행 하시면 됩니다.

생각보다 쉽죠? ^^ 

저도 요즘 닥터 최태수 라는 소설에 꽂혀서 미친듯이 읽어 대고 있습니다. 너무 재미 있어서 여기저기 알려 주고 싶습니다 :)

기회가 되시는 분들은 한번 보시길 강력히 추천 드립니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 자바 랜덤 함수에 대한 포스팅을 하고자 합니다. 

아니... 사실은 발행 버튼만 누르면 포스팅이 끝났는데... 뜬금없이 블루 스크린이 발생하면서... 날려 먹었습니다. 

그래서 다시 쓴 포스팅 입니다. ㅠㅠ

우선 시작전에 int 형 랜덤함수 조회 공식을 선 공개 하겠습니다. 

int intValue =  (int)( Math.random()*x ) + y;

여기서 x, y 는 물론 변수 입니다 :) 

이 두친구가 무엇을 하는 친구 들인지는 아래에서 정리 하겠습니다. 

■ Java Random Function (자바 랜덤 함수)

자바에서 제공하고 있는 랜덤함수를 사용하면 간단하게 랜덤 값을 반환 할 수 있습니다. 

바로 Math 클라스의 random() 이라는 함수 이야기 인데요. 

이친구가 바로 오늘의 주인공입니다. 

Math.random() 의 값은 double 형으로 0.0 과 1.0 보다 작은 수 (1.0 은 해당사항 없습니다) 사이의 값을 반환하게 됩니다. 

■ int 형의 랜덤 값 반환하기

일반적으로 랜덤하게 int 값을 뽑아 오는 작업을 많이 하는데요. 이때 이 double 로 반환된 값을 int 로 형변환 해주는 작업이 필요 합니다. 이를 위해 아래와 같이 코드를 작성해 봤습니다. 

int intValue = (int)( Math.random() );

0.0 보다 크거나 같고 1.0 보다 작은 값을 (최대 0.9999... 인 값) int 로 형변환 합니다. 

결과 값은 0 만 나오게 되어 있습니다. 

처음 시작할때 x, y 값이 있었는데요. 여기서는 그 값이 빠져 있습니다. 

이제 x, y 값에 대해 알아 보겠습니다. 

■ int 형의 랜덤 값 범위내의 숫자 갯수

우선 x 값이 무엇인지 부터 알아 보겠습니다. 

여기서 예제를 하나 더 보겠습니다. 

원하는 숫자의 범위가 0 ~ 9 까지 입니다. 총 10개의 숫자가 필요 하죠. 그렇다면 이 코드를 어떻게 짜면 될까요? 

int intValue = (int)( Math.random()*10 );

0.0 * 10 , 0.1 *10, .... , 0.99999999*10 을 한 결과는 0 ~ 9.999999.... 라는 double 형의 값이 반환됩니다. 

이를 int 로 형변환 하게 되면 0, 1, 2, .... , 8, 9 까지 결과 값이 10개가 나올 수 있습니다. 

즉, x 라는 값은 랜덤 숫자가 나올수 있는 범위내 존재 하는 숫자 갯수를 의미 한다고 볼수 있습니다. 

이번에는 0 부터 15 까지 원하는 값을 랜덤하게 가져오기 위해서는 아래와 같이 작성하면 됩니다. 

총 16개의 숫자가 필요 하므로 x 값을 16으로 셋팅 해주시면 됩니다. 

int intValue = (int)( Math.random()*16 );

■ int 형의 랜덤 값의 시작값 정의

이번에는 y 값에 대해 알아 보겠습니다. 

x 값에 대해 이야기 하면서 처음 예제가 0 ~ 9 까지였죠. 

이번에는 1 ~ 10 까지 값을 가져오고 싶습니다. 물론 시작 값이 1 이죠? 

그렇다면 y 값에 1을 넣어 주면 됩니다. 

int intValue = (int)( Math.random()*10 ) + 1;

반환되는 값은 1 ~ 10 까지 10개의 값중 하나가 리턴 됩니다. 

다른 예를 들어 보겠습니다. 

만약 3 ~ 12 까지 10개의 값을 원한다면 아래와 같이 작성 하면 됩니다. 

int intValue =  (int)( Math.random()*10 ) + 3;

■ 응용하기

먼저 언급한 x, y 값을 잘 사용하면 조금 다른 범주의 랜덤값들도 가져 올 수 있습니다. 

예를 들어 11, 12, 13 이 세개의 숫자만 랜덤하게 가져 오는 코드를 작성 한다면 어떻게 해야 할까요? 

우선 숫자 갯수가 3개 입니다. x 값은 3이겠죠? 

시작 숫자가 11 입니다. 그렇다면 y 값은 11입니다. 

그럼 코드 작성 해보겠습니다. 

int intValue =  (int)( Math.random()*3 ) + 11;

■ 내용 정리

1. 자바 랜덤은 Math.random() 함수를 사용합니다. 

2. int 형의 랜덤 값을 가져 오는 공식은 아래와 같습니다. 

int intValue =  (int)( Math.random()*x ) + y;

3. x 값은 랜덤 숫자가 나올 수 있는 범위내에 존재하는 숫자의 갯수를, y 값은 시작 값을 의미 합니다. 

위 세가지만 알면 자바에서 랜덤값은 쉬운 녀석입니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 Java에서 배열을 정렬하는 방법에 대해 알아 보겠습니다. 

Java 에서 배열(array)을 정렬하는 방법은 간단합니다. 바로 자바에서 제공하고 있는 함수를 사용하는 것이죠. 

제목에도 보시면 아시겠지만 Arrays.sort(배열) 이라는 함수를 사용하면 됩니다. 

■ 숫자 배열의 정렬

int numSort[] = {37, 27, 40, 30, 28, 19};
Arrays.sort(numSort);

for(int i = 0; i < numSort.length; i++){
    System.out.println("[ i = "+i+" ]--------[ "+numSort[i]+" ]");
}

numSort 라는 배열에 6개의 숫자를 추가 했습니다. 

그리고 Arrays.sort() 함수를 이용하여 numSort 배열을 정렬 합니다. 

그리고 그것을 for loop 을 돌려서 로그를 찍어 봤습니다. 

물론 결과는 예상 하시는 대로 나옵니다 :)

[ i = 0 ]--------[ 19 ]

[ i = 1 ]--------[ 27 ]

[ i = 2 ]--------[ 28 ]

[ i = 3 ]--------[ 30 ]

[ i = 4 ]--------[ 37 ]

[ i = 5 ]--------[ 40 ]

이쁘게 정렬이 되었습니다. 

■ 영문 배열의 정렬

숫자는 위와 같이 정렬이 됨을 확인 했지만.... 문자열은? 영문 배열은? 이라는 의문 부호가 붙을 수 있습니다. 

영문 배열도 숫자와 동일한 방식으로 처리 하면 됩니다. 

아래 예제를 함께 보시겠습니다. 

String engStrSort[] = {"lovely", "random", "uptown", "girl", "extra"};
Arrays.sort(engStrSort);

for(int i = 0; i < engStrSort.length; i++){
    System.out.println("[ i = "+i+" ]--------[ "+engStrSort[i]+" ]");
}

처음 숫자 배열과 다른건 딱 하나 있습니다. 바로 배열 형이 int 에서 String 으로 바뀐것 그리고 배열 값들이 숫자가 아닌 영문으로 바뀐 것이죠? 

결과는 역시 아래와 같이 나옵니다 :)

[ i = 0 ]--------[ extra ]

[ i = 1 ]--------[ girl ]

[ i = 2 ]--------[ lovely ]

[ i = 3 ]--------[ random ]

[ i = 4 ]--------[ uptown ]

■ 한글 배열의 정렬

숫자도 해봤고 영문도 해봤는데 특별히 다를게 있을까요? 

당연히 영문 배열의 정렬때와 동일하게 처리 하면 됩니다. 다만 텍스만 영문을 한글로 바꾸는 거죠? 

한글도 당연히 이쁘게 정렬을 해줍니다. 

String korStrSort[] = {"박길동", "이영자", "홍길동", "장발장", "신발장"};
Arrays.sort(korStrSort);

for(int i = 0; i < korStrSort.length; i++){
    System.out.println("[ i = "+i+" ]--------[ "+korStrSort[i]+" ]");
}

결과는 당연히 아래와 같이 이쁘게 정렬되어 나옵니다. 

[ i = 0 ]--------[ 박길동 ]

[ i = 1 ]--------[ 신발장 ]

[ i = 2 ]--------[ 이영자 ]

[ i = 3 ]--------[ 장발장 ]

[ i = 4 ]--------[ 홍길동 ]

고맙게도 자바에서 sort 함수를 제공해주어 우리는 편하게 배열의 정렬을 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요.  제임스 입니다. 

블로그나 SNS 또는 카페 그외 어떤 작업을 하든 상관 없이 이미지를 참 많이 사용하게 되는데요. 

이미지 잘못 사용하면 저작권법에 위배 되어 잘못하면 정말 험한꼴(?)을 당하는 경우도 있다고 합니다. 

그렇다면 나만의 합성 사진을 만들수 있다면 어떨까요? 

나는 포토샵 따윈 할줄 몰라!!!

이런 분들 많으실 꺼예요. 

그런 분들을 위해 이번 포스팅을 준비 했습니다. 

원하는 이미지를 이용하여 다양한 합성 이미지를 만들어 주는 무료 사이트가 있어 소개해 드립니다. 

Loonapix 라는 사이트 입니다

http://www.loonapix.com/

참고로 저는 이 사이트 및 몇개의 다른 합성 이미지 만들어 주는 사이트를 이용하여 셀프 돌영상 제작시 사용했습니다.

제 딸 사진을 이용하여 사용 방법을 알려 드리겠습니다. 

원본 이미지 입니다. 

제 딸이지만 참 이쁩니다 ^^

원하는 합성 사진을 선택 합니다. 

사진 선택을 클릭 합니다.

From Disk 에서 또는 Web 에 저장 하고 계사다면 From Web 을 선택 하시면 되겠죠? 

저는 로컬 피씨에 저장된 이미지를 사용하여 From disk 에서 Browse 버튼을 클릭 했습니다. 

이미지 선택을 위한 윈도우 창이 뜨면 저 위의 제 딸 사진을 선택 했습니다. 

그러면 이미지 업로드를 시작합니다. 

이미지에서 사용할 영역을 지정 하는데요. 저는 최대한 크기를 키웠습니다. 

격자 무늬가 처음 이미지보다 넓게 포진했죠? 

이상태로 Create Image 를 클릭 합니다. 

이렇게 이쁜 합성 사진이 바로 나옵니다 

완성이죠 ^^

이런 사진 합성 외에도 여러가지 기능들을 제공하고 있으니 차근차근 둘러 보시면서 나만의 이쁜 합성 사진을 만들어 보시는건 어떨까요? 

오늘 소개 드린 사이트는 참 재미있고 이쁜 합성 사진을 쉽게 만들 수 있는 사이트 입니다. 

물론 이렇게 나만의 사진을 이용하여 만들게 되면 저작권 등의 문제가 생길일은 전혀 없겠죠? 

잘 사용하셔서 나만의 이쁜 이미지 만드시길 바랍니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

저녁에 안드로이드 프로그램 깔작 작업좀 하고자 안드로이드 스튜디오를 켰는데 갑자기 아래와 같은 오류 메세지가 뜹니다. 

Error:Could not find com.android.tools.build:gradle:3.0.0-beta6.

Searched in the following locations:

    file:/C:/Program Files/Android/Android Studio/gradle/m2repository/com/android/tools/build/gradle/3.0.0-beta6/gradle-3.0.0-beta6.pom

    file:/C:/Program Files/Android/Android Studio/gradle/m2repository/com/android/tools/build/gradle/3.0.0-beta6/gradle-3.0.0-beta6.jar

    https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.0-beta6/gradle-3.0.0-beta6.pom

    https://jcenter.bintray.com/com/android/tools/build/gradle/3.0.0-beta6/gradle-3.0.0-beta6.jar

Required by:

    project :

무섭게 왜 이러냐 ㅠㅠ

모든 에러는 에러 메세지에서 원인을 찾을 수 있습니다 :)

com.android.tools.build:gradle:3.0.0-beta6 를 찾을 수 있게 해주면 되겠죠? 

build.gradle 파일을 열어 줍니다. 

build.gradle (AS-IS)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.0-beta6'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

buildscript 의 repositories 에 아래 두줄을 추가 해주면 됩니다. 

mavenCentral()
maven { url "https://maven.google.com" }

build.gradle (TO-BE)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        mavenCentral()
        maven { url "https://maven.google.com" }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.0-beta6'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

파일을 저장 후 아래와 같이 Clean Project 를 해줍니다. 

잠시 기다리면 오류가 나던 부분은 더이상 볼 수 없게 됩니다. 

위와 같은 오류가 발생 한다면 도움이 되시길 바랍니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

블로그 (홈페이지 또는 카페도 동일) 운영 중에 키워드 정의하는데 많은 고민을 하게 됩니다. 

이때 우리가 사용할 수 있는 좋은 아이템이 있어 소개 시켜 드리고자 합니다. 

일반적으로 우리가 키워드 관리를 하게 된다는 것은 실제 광고 키워드 관리라고 생각하면 크게 틀린 이야기는 아닙니다. 

포탈 사이트 별로 어떤 키워드가 많이 검색 되었는지를 알아 보고 검색 량이 높은 키워드를 이용하는 것이 내 블로그나 홈페이지 또는 카페를 상위 노출 시키는데 유리 합니다. 

그러면 우리가 많이 사용하는 네이버, 구글, 다음 이 세가지 퍼털 사이트의 키워드 검색 빈도수를 알 수 있다면 좋겠죠? 

이번에는 그 첫번째 글로 다음에서 제공하고 있는 카카오 광고에 대해 알아 보겠습니다. 

■ 카카오 광고 (다음 제공)

우선 카카오 광고 오피셜 사이트로 접속 합니다. 

접속 링크는 여기를 클릭해 주세요. ( http://ad.kakaocorp.com/)

카카오 광고 메인 화면입니다. 스크롤을 내리면 아래 이미지와 같이 광고관리시스템 영역에 CLIX 라는 텍스트가 보입니다. 

CLIX 를 클릭 하여  CLIX 메인 화면으로 이동 합니다. 

참고 : 클릭스 메인 URL > https://clix.biz.daum.net 

클릭스 처음 접속 시 위와 같은 화면이 나옵니다. 

회원가입은 무료이니 회원이 아니신 분께서는 가입 절차를 진행 하시면 됩니다. 

로그인 후 메인 화면으로 진입하게 됩니다. 

클릭스 홈 탭 바로 옆에 있는 광고관리 탭을 클릭하고 왼쪽 사이드바에 있는 메뉴 중 "키워드 맞춤제안" 이라는 메뉴를 선택 하시면 아래와 같은 화면을 보실 수 있습니다. 

키워드에 원하는 키워드를 입력하고 검색을 진행하면 해당 키워드와 관련된 모든 키워드들이 조회 되며 전월 조회수 및 입찰가 등이 나타납니다. 

저는 샘플로 "피부과" 를 입력 검색 하였으며 결과 값이 나왔을때 "전월 조회수"를 클릭하여 높은 조회수 부터 정렬을 시켰습니다. 

보기 쉽게 키워드 조회수가 나열 됩니다. 

검색율이 높은 키워드 들을 이용하면 검색에 걸릴 확율도 높아 지고 그만큼 상위 노출리 쉬워 지게 됩니다. 

물론 검색수가 많다는 것은 다른 블로거 들과의 경쟁이 심해 진다는 이야기 일 수도 있습니다. 

이는 옆에 입찰가를 확인 하시면 입찰 1순위가 되기 위한 입찰가가 표기되고 있습니다. 

금액이 높다는 것은 그 만큼 경쟁이 심할 수 있다는 이야기 입니다. 

이는 다음 사이트에서 키워드 검색을 해보면 됩니다. 

피부과 검색 결과 비립종이 1위 피부과가 4위 구요 검색량은 거의 3배 정도 차이가 나고 있습니다. 

이 두가지 키워드를 가지고 다음 사이트에서 검색을 해보겠습니다. 

피부과에 대한 블로그 검색결과를 확인 해봤습니다. 

165만 건 정도 조회가 됩니다. 엄청 많죠? 

비립종에 대한 블로그 검색 결과 입니다. 

19700건이 전부 입니다.

조회수는 비립종이 3배 정도 많지만 검색 조회 글 수는 비립종이 비교하기 부끄러울 정도로 적습니다. 

그렇다면 피부과 관련 글을 쓰더라도 비립종 관련 글을 쓰면서 비립종 및 피부과 키워드를 추가 하는 방법으로 블로그, 홈페이지 및 카페 글 작성을 진행 한다면 효과 적이겠죠? 

이상 다음클릭스를 이용한 블로그 상위 노출 시키기에 대한 내용 마무리 하겠습니다. 

안녕하세요. 제임스 입니다. 

이번에는 안드로이드 레이아웃 종류 중 가장 기본중의 기본 Linear Layout 을 예제와 함께 정리해 보겠습니다. 

위와 같은 UI를 구성할 경우 아래와 같이 작성하게 됩니다. 

Example 1

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:background="@android:color/holo_blue_bright">

</LinearLayout>

layout_width 및 layout_height 는 match_parent (부모뷰의 크기에 맞춤) 또는 wrap_content (자식 뷰의 크기에 맞춤) 두가지 옵션과 함께 직접 고정값을 주는 방식이 있습니다. 

width (길이) 를 match_parent (부모 View 의 크기에 맞춤) 로 설정했지만 marginLeft 및 marginRight 옵션을 추가 하여 양엽으로 20dp 씩 공백을 줬습니다. height (높이)는 30dp 로 고정값을 적용했습니다. 

그리고 배경색은 background 에 안드로이드에서 제공하는 색중 holo_blue_bright 라는 값을 참조하였습니다. 

Example 2

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:padding="10dp"
    android:background="@android:color/holo_orange_light"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_purple">

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_green_light">

    </LinearLayout>
</LinearLayout>

padding 10dp 를 줘서 예제 1번과 동일한 길이의 레이아웃 내부로 10dp 만큼 들어 간 형태로 자리 잡았습니다. 

orientation 이라는 값은 레이아웃이 수직구조를 가질 것인지 수평구조를 가질 것인지를 결정하는 속성입니다. 

만약 vertical(수직)로 설정 시 자식뷰들은 수직 방향으로 구성됩니다. 

예제에서는 horizontal (수평) 으로 설정하여 두개의 자식 LinearLayout 을 가지도록 설정했습니다. 

여기서 특이하게 layout_width 를 0dp 로 설정하고 weight 라는 속성 값을 둘다 동일하게 1 로 적용했습니다. 

이는 길이를 두개의 LinearLayout 이 똑같이 1:1 로 나눈다는 의미입니다. 

만약 한쪽이 weight="2" 다른 한쪽이 weight="1" 로 설정이 되었다면 부모 LinearLayout 내에서 화면을 2:1 로 나누게 됩니다. 

주의 할 점은 부모 LinearLayout 의 orientation 이 horizontal 이면 길이 방향으로 weight 값이 적용되고 

부모 LinearLayout 의 orientation 값이 vertical 이면 높이 방향으로 weight 값이 적용됩니다. 

Example 3

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp"
    android:padding="10dp"
    android:background="@android:color/holo_orange_light"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="100dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_purple">

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="30dp"
        android:background="@android:color/holo_green_light">

    </LinearLayout>
</LinearLayout>

예제 2번과 동일한 구조이지만 width 값만 100dp VS 0dp 로 잡았습니다. 

이경우 한쪽은 100dp 만큼 또 다른 한쪽은 0dp 만큼 길이를 가진채 나머지 남은 길이를 1:1 로 배분하게 됩니다. 

예를 들어 부모 LinearLayout 의 길이가 400dp 라고 했을때 위와 같은 경우 왼쪽은 100dp + 150dp 오른쪽은 150dp 의 길이를 가지게 된다는 것을 보여주는 예제 입니다. 

Example 4

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#58ac92"
    android:gravity="center"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gravity center"
        android:textSize="10dp"/>

</LinearLayout>

이번 예제에는 부모 LinearLayout 에 gravity 라는 속성 값을 추가 했습니다. 

이는 부모 LinearLayout 내부에서 자식 뷰의 위치를 지정하는 속성값으로 center / right / left / bottom / top 등의 값들이 있으며 서로 상반되는 값이 아니라면 "|" 기로를 이용하여 동시 적용이 가능합니다. 

4번 예제는 gravity 값을 center 로 지정하여 자식뷰인 버튼이 레이아웃의 한 가운데 들어 오게 한 예제 입니다. 

Example 5

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#58ac92"
    android:gravity="right|bottom"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginBottom="10dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gravity right and bottom"
        android:textSize="10dp"/>

</LinearLayout>

예제 4번 설명중 언급한 부분인데요. 

gravity 값을 "|" 기호를 이용하여 설정한 예제 입니다. 

gravity="right|bottom" 으로 설정하여 자식뷰를 부모뷰의 오른쪽 아래 방향에 위치하도록 설정했습니다. 

그 외에도 많은 속성 값들이 있지만 특히 많이 사용하는 속성 값들을 이용하여 예제를 작성 하였습니다. 

LinearLayout 을 이해하는데 많은 도움이 되었길 바라며 다음에는 RelativeLayout 에 대해 준비해 보겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 뷰 계층 구조에 대해 언급해 보고자 합니다. 

사용자 인터페이스는 레이아웃들의 집합입니다. 그리고 각각의 레이아웃에 포함되는 위젯 (컴포넌트) 들은 뷰의 서브 클래스로 모두 뷰입니다. 그런 뷰들은 계층 구조를 가지게 됩니다. 이번에는 이 뷰 계층 구조에 대해 정리해 보겠습니다. 

■ 뷰 계층 구조

사용자 인터페이스의 각 뷰는 화면상의 직사각형 영역을 나타냅니다. 뷰는 그 직사각형 안에 그려지는 것에 대한 책임이 있으며, 화면의 뷰 영역에서 발생하는 이벤트(터치, 스와이프, 롱클릭 등등)에 응답해야할 책임도 있습니다. 

사용자 인터페이스 화면은 뷰 계층 구조로 구성되어 집니다. 그리고 뷰 계층 구조는 계층 구조 트리(tree)의 맨 위에 위치한 루트(root) 뷰와 그 밑의 가지에 위치한 자식 뷰로 되어 있습니다. 컨테이너 뷰의 자식 뷰는 자신의 부모 뷰 위에 포개져서 화면에 나타나며, 부모 뷰의 화면 영역 경계 안에만 나타나도록 그 범위가 제한됩니다. 

위 사용자 인터페이스는 버튼과 체크박스 뷰가 자리하고 있는데, 이 뷰들이 위치하는 방법을 제어하는 레이아웃 뷰가 여러개 있습니다. 

코드는 아래와 같이 작성 했습니다. 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginLeft="30dp"
        android:layout_centerHorizontal="true">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="BUTTON"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="BUTTON"/>

    </LinearLayout>


    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/ll"
        android:layout_marginTop="20dp"
        >

        <TableRow>
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

        <TableRow
            android:layout_marginTop="30dp">
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

    </TableLayout>

</RelativeLayout>

아래 이미지들은 위 사용자 인터페이스를 뷰 계층 구조적 측면에서 보여 줍니다. 

위 코드 상에서 가장 밖에 있는 RelativeLayout 으로 둘러 싼 모습입니다.

RelativeLayout 안에 같은 Level 에 LinearLayout 과 TableLayout 이 위치하고 있습니다. 

TableLayout 안에는 TableRow 두개가 자리하고 있습니다. 

마지막 이미지를 봤을때 첫번째 왼쪽 체크박스가 있는 부분을 보게 되면 원래는 RelativeLayout 의 영역이었지만, 그 위에 TableLayout 이 자리 하게 되어 이벤트등의 처리에 대한 권한이 TableLayout 으로 넘어 왔습니다. 하지만 그 안에 다시 TableRow 가 자리 하면서 대신하게 되고 다시 해당 위치에 CheckBox 가 위치 하면서 이벤트 처리에 대한 책임을 지게 됩니다. 

위 그림은 구조를 뷰 계층 구조(뷰 트리 구조)로 나타낸 것입니다. 

사용자 인터페이스는 뷰 계층 구조의 형태로 생성된 뷰들로 구성 된다는 것 이번 포스팅의 핵심입니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D