안드로이드 스튜디오(Android Studio) 개발 3번째

안드로이드 스튜디오(Android Studio) 개발 3번째

안녕하세요. 오늘은 공부를 해볼 것은 안드로이드에 사용이 되고 있는 뷰에 대해서 설명을 드립니다. 대부분 많이 사용을 하고 있는 View 종류로 설명을 드리겠습니다. 잘 따라서 읽어 주세요.

안드로이드 사용자 인터페이스

안드로이드의 화면을 구성하는 사용자 인터페이스는 영어로는 User Interface 또는 UI라고 합니다. 사용자 인터페이스를 수정하기 위해서는 XML 파일을 수정을 해야 됩니다. 

화면을 구성하는 파일은 res/layout/activity_main.xml 파일이 화면을 구성하는 레이아웃 파일입니다. 레이아웃파일은 액티비티와 연결이 되어 화면에 보여주고 사용자가 버튼을 누르게 되면 응답을 하게 되는 것입니다. 

안드로이드를 개발을 하기 위해서는 View 의 종류에 대해서 어느 정도는 알아야 개발하기에 편합니다. 

안드로이드 화면에서 사용할 수 있는 인터페이스 종류

텍스트뷰 Textview, 에디트텍스트 Edittext, 버튼 Button, 이미지 뷰 ImageView, 체크박스 CheckBox, 스크롤 뷰 ScrollView 등 다양한 인터페이스들이 있으며, 이외의 여러 위젯들도 사용해 봐야 충분히 좋은 앱을 만들고, 또한 만들기도 쉽습니다. 

activity_main.xml  기본적인 파일을 보게되면 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        tools:layout_editor_absoluteX="194dp"
        tools:layout_editor_absoluteY="429dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

위화면을 설명해 드리자면 보통 IDE화면에서 Textview 를 추가를 하고 쉽게 하지만, xml로 된 부분을 익혀서 수정을 하는 것이 저는 더 편한 것 같습니다. 보통 XML의 사용법은 태그를 열었으면 닫아야 됩니다.  예로 <androidx.constraintlayout.widget.ConstraintLayout .....> 로 열려있으면 </androidx.constratintlayout.widget.ConstraintLayout> 처럼 닫아야 레이아웃이 제대로 적용이 됩니다. 

 

텍스트뷰(TextView)

텍스트뷰는 사용자가 수정을 할 수없는 텍스트 내용을 표시하는 View입니다. 일반적으로 정보를 표시하기 위해서 사용이 됩니다. 예를 들어 사용자 이름: , ID: 식으로 사용자에게 정보로 표시를 할 때 사용을 합니다. 

  <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="12sp"
        android:textColor="#ffffff"       
      />

Textview의 XML 코드를 가져와서 설명을 드리겠습니다.  

android:id="@+id/textView"  의 경우는 id는 위젯의 이름이며, 이름은 같은 레이아웃에서 중복이 되어서는 안 됩니다.
android:layout_width="wrap_content"  위젯의 너비를 나타내는 것입니다. wrap_content 는 내용의 크기만큼 넓이가 늘어나게 됩니다. 
android:layout_height="wrap_content"  위젯의 높이를 나타내는것 입니다.
android:text="TextView"  화면에 보일 text를 적는 것입니다. 이곳에 사용자 이름: 이런 식으로 적을 수 있습니다.
android:textSize="12sp" 텍스트의 크기를 지정할 수 있습니다.
android:textColor="#ffffff" 텍스트의 색깔을 지정을 할 수 있습니다. 

 

에디터 텍스트(EditText) 

에디터 텍스트는 사용자에게 문자열이나 숫자를 입력을 받을 수 있게 하는 위젯입니다. 에디터 텍스트에는 패스워드를 입력을 할 때 별표로 나오게 하는 등 많은 다양한 속성이 있습니다. 숫자만 입력을 받을 수 있거나 날짜만 입력을 받을수 있게도 할 수 있습니다. 

    <EditText
        android:id="@+id/editText1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:inputType="text"
        android:hint="text hint" />

EditText의 XML 코드를 가져와서 설명을 드리겠습니다. 
나머지는 TextView에서 설명을 해드렸고, 설명을 하지 않은 부부만 설명을 하여 드리겠습니다.

android:gravity="center"   에디트 텍스트의 텍스트를 왼쪽이나 오른쪽 또는 중앙에 배치를 합니다. 
android:inputType="text"  사용자가 입력을 문자열 형태를 입력할 수 있게 합니다. 
android:hint="text hint"    사용자가 입력하기 전에 미리 보이는 힌트입니다. 예를 들어 ID를 입력하세요 라고 되어있고 그 부분을 클릭을 하게 되면 ID를 입력을 할 수 있게 먼저 화면에 보였던 힌트는 없어지는 것입니다.