🍻 Android UI(UserInteface) - Widget

1. Android UI 기본

• 뷰(View): 안드로이드 앱의 UI를 구성하는 기본 단위
• 뷰의 구성 : 위젯(Widget), 레이아웃(Layout)
• AndroidStudio에서의 UI 설계는 XML을 사용한다. Layout Editor를 이용하며 드래그 앤 드롭 방식으로 설계하면 XML코드로 자동 변환 및 동기화된다. 여기서 다양한 디바이스 / 안드로이드 버전에 대한 Preview가 가능하다.

2. 위젯(Widget)
   View의 서브 클래스로서, 앱 화면을 구성하는 시각적인 모양을 지닌 UI요소
   예) 버튼,메뉴,리스트 등

3. 레이아웃(Layout)
   ViewGroup의 서브 클래스로서, 다른 뷰(위젯 혹은 레이아웃)를 포함하면서
   이들을 정렬하는 기능을 지닌 UI요소
   

2. 위젯(Widget)

• Widget이란 View의 서브 클래스 중에서 화면에 보이는 것들을 말한다.
• 대표적인 위젯은 TextView, EditText, Button등이 있다.
• 위젯은 항상 레이아웃 안에 포함되어 있다.
  

3. 뷰(View)

• View클래스는 모든 UI 컴포넌트들의 부모 클래스이다.

• View클래스의 속성은 모든 UI 컴포넌트들에서 공통적으로 사용할 수 있다.
  ex) gravity, text.size 등의 설정

• 레이아웃에 있는 위젯을 코드에서 가져다 쓰기 위해서는 id를 부여해야 한다. id는 고유한 식별값이고, 위젯끼리 id가 중복될 수 없다.
  android:id="@+id/~~~"

• layout_width, layout_height는 필수!

  • match_parent : 부모 UI컴포넌트(상위의 레이아웃)의 크기에 맞춤
  • 크기 단위는 px(스크린의 실제 단위)가 아닌 밀도(디스플레이의 해상도)에 독립적인 단위인 dp로 지정한다.(px은 고해상도로 갈수록 작게 보이기 때문)
  • dp(Density-independentPixel) : 밀도 또는 독립 화소를 말하며, 디스플레이의 해상도(밀도)와 상관 없이 다룰 수 있는 단위
  • dpi(dotsperinch)
  • DPI는 DotPerInch로 1인치에 들어가는 픽셀을 나타내는 단위이다.
  • 예를 들면 100DPI는 1인치 당 픽셀이 100개 포함된다는 것을 말한다.
  • 개수가 많을수록 고밀도이며 안드로이드에서 주요 DPI는 아래와 같다
    
    

• dp 단위로 설정한 위젯은 자동으로 해상도에 맞게 지정되지만, 이미지는 깨져서 자동으로 커지지 않는다. 이미지는 각 디바이스에 맞는 5개의 사이즈로 만들어서 소스 폴더 안에 넣어두고, 앱이 알아서 해상도에 맞는 폴더에 있는 이미지를 가져다가 써야 하기 때문에 크기별 5장의 이미지를 준비해야 한다.
  

▶️ TextView

• 화면에 text를 표시 하는 용도

▶️ EditText

입력이 가능한 Text창

• 주요 속성

  • TextView의 모든 속성 상속(EditText는TextView의 서브클래스)
  • inputType: 입력 시 허용되는 키보드 타입 설정 및 키보드 행위를 설정

• 키보드 타입 설정 값

  • “text” : 일반적인 텍스트 키보드
  • “phone” : 전화번호 입력 키보드
  • “textEmailAddress” : @문자를 가진 텍스트 키보드

• 키보드 행위 설정 값

  • “textCapWords” : 문장의 시작을 대문자로 변환
  • “textAutoCorrect” : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시, 입력된 단어를 대치
  • “textMultiLine”: 여러 줄을 입력 받을 수 있음

• background : 뷰의 배경을 지정하며, 색상 및 이미지 등의 여러 가지 객체로 지정 가능하다. 색상 지정 시 네 가지 형식이 적용된다.

  • #RGB
  • #ARGB
  • #RRGGBB
  • #AARRGGBB
    ex) #ff0000(#f00) : 빨간색, #0000ff : 파란색

▶️ Button

• 일반적으로 많이 사용되는 푸시 버튼으로 사용자가 버튼을 클릭하였을 때, 어떤 행동을 수행 하고자 할 때 사용된다.
• Button클래스는 TextView의 서브클래스이므로, TextView의 모든 속성을 사용 할 수 있다.
  • singleLine: 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력
• 버튼 내에 텍스트, 아이콘을 표시 할 수 있다. (버튼 전체를 이미지로 그리기 위해서는 ImageButton사용)
  

▶️ ImageView

• 앱 화면에 이미지를 표시하는 용도

• ImageVIew기본 사용법

  • Layout리소스 XML파일에 ImageView를 추가
  • 화면에 표시 할 이미지를 Drawable리소스에 추가
  • 화면에 표시 할 이미지(Drawable)리소스 ID를 ImageView의"src"속성에 지정

• Drawable리소스에 이미지 추가

  • 이미지 파일의 형식은 .jpg,.png가 가능하나 대부분.png를 사용함(투명도 때문)
  • 이미지 파일을 /res/drawable에 추가한다.
  • 해상도에 따른 다른 크기의 이미지는 별도의 폴더를 생성하고 복사(drawable-xhdpi등..)

• 주의!! 이미지 파일명

  • "아이콘.png" ❌(파일 이름에 한글이 포함될 수 없다.)
  • "ABC.png" ❌(파일 이름에 대문자가 포함될 수 없다.)
  • "2image.png" ❌(파일 이름이 숫자로 시작할 수 없다.)
  • "2_icon" ⭕️(파일 이름이 ''로 시작할 수 있다.)
  • "my_logo4.png" ⭕️

• Layout 리소스 XML에 ImageView추가 및 이미지 표시

  • ImageView를 Layout리소스 XML파일에 추가
  • "src"속성에 이미지(Drawable)의 리소스ID를 지정
  • android : src-Image View에 표시 될 Drawable지정
    • "@drawable/XXX"의 형식으로 Drawable 리소스 지정 가능
    • 컬러 값 사용 가능(#rgb, #argb, #rrggbb, #aarrggbb 등의 형식)
      

• Kotlin 소스에서 ImageView의 이미지 변경

  • ImageView의 id를 이용하여 참조를 획득한 다음, setImageResource()함수를 호출

    class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
    
          var imageView: ImageView = findViewById(R.id.imageView1)
          imageView.setImageResource(R.drawable.google_logo)
      }
    }

• ImageView의 영역에 맞게 이미지 확대 또는 축소하기 : scaleType 속성 -> android:scaleType

  • 1) android:scaleType = "Center"
    이미지의 크기와 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춘다. 이때, ImageView보다 이미지가 클 경우 이미지가 잘릴 수 있다.
    
  • 2) android:scaleType = "centerCrop"
    이미지의 비율을 유지하며 가로,세로 중 짧은 쪽을 ImageView에 꽉 차게 출력한다. 이때도 마찬가지로 ImageView를 벗어나는 부분은 출력되지 않는다.
    
  • 3) android:scaleType = "centerInside"
    이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력한다. 이미지의 비율은 유지되며 남는 공간은 background의 색으로 채워진다. fitCenter와 달리 이미지가 ImageView보다 작을 경우 크기가 유지된다.
    
  • 4) android:scaleType = "fitCenter"
    centerInside와 매우 유사하다. 단, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라진다.
    
  • 5) android:scaleType = "fitStart"
    ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력됩니다. 단, fitCenter와 다르게 왼쪽 상단을 기준으로 정렬됩니다.
    
  • 6) android:scaleType = "fitEnd"
    fitStart와 마찬가지로 가로&세로 비율을 유지하며 fit하게 출력된다. 우측 하단을 기준으로 정렬된다.
    
  • 7) android:scaleType = "fitXY"
    가로, 세로 비율에 상관 없이 ImageView에 꽉 차게 보여진다. 이미지가 찌그러진 상태로 보인다.
    
  • 8) android:scaleType = "matrix"
    이미지의 크기, 비율을 유지하며 ImageView의 좌측상단을 기준으로 정렬된다. 이미지가 크다면 ImageView 외의 부분은 출력되지 않는다.