[6] 다양한 뷰에 대해 알아보자!!

안녕하세요 

IT비전공자 프동프동 입니다.

오늘은 뷰(View)에 대해서 배워보겠습니다

배우기에 앞서 먼저 시간에 포스팅했던 글을 다시 보고 개념을 익혀볼까요

뷰(View)란?

 화면상의 보이는 모든 구성요소를 뷰(View)라고 합니다. 

예를 들면

 

뷰(View)는 위 처럼 버튼(Button)과 같이 사용자가 사용하기 위해 구성된 것이 뷰(View)입니다.

뷰(View)에는 크게 4가지가 있습니다

 1.사용자가 터치할 수 있는 기능을 가진 버튼(Button)

2.사용자가 키보드로 입력을 할 수 있는 에디트텍스트(EditText)

3.사용자가 볼 수 있는 글씨를 나타내기 위한 텍스트뷰(TextView)

4.사용자가 볼 수 있는 이미지뷰(ImageView)

 

 1.사용자가 터치할 수 있는 기능을 가진 버튼(Button)

text: 버튼에 글자를 넣을 수 있다.

background: 버튼의 배경색을 설정할 수 있다.

text: 버튼에 글자를 넣을 수 있다.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="이것은 버튼입니다."
    />

background: 버튼의 배경색을 설정할 수 있다.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="버튼"
    android:background="#ff0"

2.사용자가 키보드로 입력을 할 수 있는 에디트텍스트(EditText)

hint: 사용자에게 어떤 내용을 입력할지 힌트식으로 알려주는 설정 입니다.

inputType: 사용자에게 다양한 입력 방법을 줄 수 있는 설정 입니다.

digits: 원하는 글자만 사용자에게 입력 받을 수 있다.

hint: 사용자에게 어떤 내용을 입력할지 힌트식으로 알려주는 설정 입니다.

-textColorHint: 기본적으로는 회색이지만 색상 변경이 가능합니다.

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="아이디를 입력하세요" 

inputType: 사용자에게 다양한 입력 방법을 줄 수 있는 설정 입니다.

대표적으로

- number: 숫자만 입력가능 합니다.

-textEmailAddress: 이메일 형식 입력가능 합니다.

-numberPassword: 비밀번호 입력을 숫자로 한정지을 수 있습니다.

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="number"<!--숫자로만 입력 가능-->
    />

digits: 원하는 글자만 사용자에게 입력 받을 수 있다.

ex) 속성값을 qwer로 설정하면 소문자 qwer로만 입력 받을 수 있다

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:digits="qwer"<!--소문자 qwer만 입력 가능-->
    />

 3.사용자가 볼 수 있는 글씨를 나타내기 위한 텍스트뷰(TextView)

다양한 글꼴을 설정하는 속성을 가지고 있습니다.

모든 과정은 xml에서 수정이 가능합니다.

text: 출력시 보여주기 위한 text 설정

textcolor: 출력시 보여주기 위한 글자의 색상을 지정할 수 있습니다.

textSize: 출력시 보여주기 위한 글자의 크기를 지정할 수 있습니다.

textStyle: 출력시 보여주기 위한 글자의 모양을 지정할 수 있습니다.

typeface: 출력시 보여주기 위한 글자체를 지정할 수 있습니다.

singleLine: 출력시 보여주기 위한 글자를 한줄로 표시 해줍니다.

등이 있습니다.

한번 자세히 볼까요?

text: 출력시 보여주기 위한 text 설정

이렇게 Properties에서 text를 찾아서 바꿔주셔도 되고 

 

이렇게 가상핸드폰에 글자를 더블 클릭하셔서도 수정이 가능합니다.

textcolor: 출력시 보여주기 위한 글자의 색상을 지정할 수 있습니다.

...를 클릭하면 색상을 지정할 수 있습니다. 

또한 직접 키보드로 입력하셔도 색상을 선택할 수 있습니다.

textSize: 출력시 보여주기 위한 글자의 크기를 지정할 수 있습니다.

Properties-textSize에서 직접 숫자를 입력해주시고 치수를 선택해주시면 됩니다.

안드로이드 치수는

-dpi(Dots Per Inch): 1인치에 들어 있는 픽셀의 수에 따라 설정이 가능합니다.

-dp(Density Independent Pixels): 화면의 크기를 기준으로 어떤 화면크기에서도 공일한 크기를 표시합니다.

-sp(Scale independent Pixels): dp와 비슷하지만 사용자가 선택한 글꼴 크기에 의해 크기가 조절됩니다.

그외에도 mm, in 등이 있으나, 많은 사람들이 dp를 사용하고 있습니다.

textStyle: 출력시 보여주기 위한 글자의 모양을 지정할 수 있습니다.

-italic: 글자를 기울여서 표시

-bold: 글자를 두껍게 표시한다.

*함께 사용하기 위해서는 사이에 |표시 를 추가하여 사용하면 된다

ex) itailc|bold

*함께 사용하기 위해서는 사이에 |표시 를 추가하여 사용하면 됩니다.

ex) bold|italic

typeface: 출력시 보여주기 위한 글자체를 지정할 수 있습니다.

-sans: 글자의 굵기가 같고 장식이 없습니다.

-serif: 글자의 굵기가 다르고 장식이 있습니다. 

-monospace: 폭을 설정할 수 있습니다.

 

 

 

singleLine: 출력시 보여주기 위한 글자를 한줄로 표시 해줍니다.

체크가 되어있지 않을시 내용이 길 경우 다음 줄로 자동 개행 됩니다.

이렇게 말이죠

체크시 한줄에 다 들어가게 됩니다. 

아래 예시 같은 경우 작은 공간에 한줄이 모두 들어가기 위하다 보니 ...으로 나타나게 됩니다.

 

이렇게요

우리가 작성한 xml을 한번 볼까요?

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="안녕하세요 IT비전공자 프동프동 입니다."
    android:textColor="#fa0c0c"<!--글자 색상-->
    android:textSize="20dp"  <!--글자 크기-->
    android:textStyle="bold|italic"<!--글자 모양-->
    android:typeface="monospace" <!--글자체 설정-->
    android:singleLine="true"<!--한줄에 모두 포함 시킬지 여부-->
     />

4.사용자가 볼 수 있는 이미지뷰(ImageView)

src:  사진을 설정할 수 있습니다. 

maxWidth: 이미지의 최대 수평넓이(길이)를 설정합니다.

maxHeight: 이미지의 최대 수직넓이(높이)를 설정합니다.

src:  사진을 설정할 수 있습니다. 

이미지뷰(imageView)의 메인이죠

src에서 원하는 이미지를 선택하기 위해선 한가지 작업이 필요합니다.

 

drawable 폴더에 자신이 원하는 사진을 넣어야 하는데요, 넣는 방법은 간단합니다. 원하는 사진을 ctrl+c ,ctrl+v 하면 끝납니다 ㅎ

ctrl+c를 누르면 이러한 화면이 "그냥 이곳에 복사할꺼냐 묻는 말입니다. OK를 눌러주세요.

 

바로 생기신걸 확인할 수 있습니다. 이제 사용이 가능합니다.

제가 아직 초보라 그런지는 모르겠는데..JEPG파일은 사용이 안되더라고요.... PNG파일만 되던데..왜그런지는...

이제 이미지를 넣을 이미지뷰를 선택하신 후 Properties에서 src를 찾아주세요 

그후 옆에보이는 ...을 클릭!

그러면 이러한 화면이 뜨는데요 이제 여기서 왼쪽 상단에 Drawable 클릭


쭈욱 내려보시면 아까 저희가 복사했던 사진이 여기 있네요!! 클릭 후 OK!!
 

짜잔~~

 

 

 

 

maxWidth: 이미지의 최대 수평넓이(길이)를 설정합니다.

maxHeight: 이미지의 최대 수직넓이(높이)를 설정합니다.

다음 포스팅에는 드디어 액티비티 실행과 JAVA를 이용하여 인텐트를!!

지금까지 배웠던 뷰와 뷰그룹에 영혼을 불어 넣어준다 생각하면 되려나...