[android] android 기본 위젯 익히기1
뷰와 뷰그룹
뷰(view) 클래스
안드로이드 화면에서 실제로 사용되는 것들은 모두 view 클래스의 상속을 받는다
-버튼, 라디오 버튼, 이미지 등은 모두 view 클래스의 서브클래스이다
위젯이라고도 부른다
화면에서의 버튼 : 버튼 위젯
실제 코드에서의 버튼 : 버튼 클래스
레이아웃
다른 위젯을 담을 수 있는 위젯을 특별히 레이아웃이라고 한다
즉, 위젯을 담아 배치하는 틀
viewgroup 클래스 아래에 존재한다
레이아웃도 크게 보면 위젯에 포함된다
view 클래스 계층도(*** 중요 ***)
최상위에 object 클래스가 있고 이를 상속받은 View 클래스가 있다
안드로이드 화면에 나타나는 모든 위젯은 View 하위에 존재한다
레이아웃은 -> LinearLayout, RelativeLayout, FrameLayout, GridLayout
뷰 컨테이너(view container)
레이아웃이라고 부르지는 않지만 다른 뷰를 포함하는 ListView,GridView,TabHost,Gallery 등
뷰 컨테이너도 ViewGroup 클래스에서 상속받는다
object
↓
View -> ViewGroup -> LinearLayout -> TableLayout
-> RelativeLayout ↓-> Radiogroup
-> FrameLayout -> TabHost
-> GridLayout
-> AdapterView -> AbsListView -> ListView
-> ToolBar -> GridView
↓ -> AbsSpinner -> Gallery
-> spinner
-> TextView -> EditText
-> Button -> CompoundButton -> checkBox
-> ToggleButton
-> Switch
-> RadioButton
-> ImageView -> ImageBuuton
-> ProgressBar -> AbsSeekBar -> SeekBar
-> RatingBar
Button
xml 속성이 거의 없고 대게 상위 클래스인 TextView나 View에서 상속받는다
Button의 기본 형태
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"> // layout 설명은 나중에
<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" />
<Button // 버튼의 기본 형태입니다
android:id="@+id/Btn1" // 버튼에게 id를 만들어 action을 취할수 있습니다
android:layout_width="wrap_content" //크기지정
android:layout_height="wrap_content" // 크기지정
android:text="버튼입니다." /> // 버튼의 들어갈 내용지정
</LinearLayout>
실행결과 ->
기본 형태를 보면 알수 있는 것들 :
id는 뭐야? wrap은 match는 ??????????????//
View 클래스의 xml 속성
id 속성
모든 위젯의 아이디를 나타냄
Kotlin 코드에서 버튼 등의 위젯에 접근할 때 id 속성에 지정한 아이디를 사용
일반적으로 id 속성은 위젯에 아이디를 새로 부여하는 개념
'@+id/' 형식
- / 다음에는 새로 지정할 id를 넣는다
- android:id="@+id/btn1" : 버튼 위젯의 아이디로 btn1을 부여한다
터치했을 때 어떤 동작이 필요한 경우 id를 지정한다
ex) RadioButton, CheckBox
layout_width layout_height 속성
모든 위젯에 필수로 들어감
이 둘은 각각 위젯의 너비와 높이를 나타냄
match_parent와 wrap_content 값으로 설정할 수 있다
wrap_content
버튼의 너비가 그 안의 글자인 '버튼입니다'에 꼭 맞는 크기가 된다
match_parent(또는 fill_parent)
'버튼입니다' 글자와 관계없이 버튼을 싸고 있는 부모(리니어레이아웃)의 너비에 꽉 차는 크기가 된다
layout_height는 버튼의 높이에 대해 적용된다
background 속성
위젯의 색상은 주로 #RRGGBB값으로 지정
각 값은 빨간색, 초록색, 파란색을 의미한다
RR, GG, BB 위치는 16진수 00~FF로 표현할 수 있다
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="#ff0000" // check
tools:context=".MainActivity">
<Button
android:id="@+id/Btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00ff00" //check
android:text="버튼입니다." />
</LinearLayout>
실행결과
padding, layout_margin 속성
padding 속성을 사용하면 레이아웃의 경계선과 위젯 사이에 여백을 둘 수 있다.
Button에 padding을 설정하면 버튼 안의 글자가 버튼의 경계선에서 일정 간격 떨어져서 표현된다
위젯과 위젯 사이에 여유를 두고 싶다면 layout_margin 속성을 사용
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:padding="30dp"//padding 확인
tools:context=".MainActivity">
<TextView
android:padding="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="저와 이웃을 하고 싶다면 버틀 클릭 >>" />
<Button
android:id="@+id/Btn1"
android:layout_margin="20dp" // margin 확인
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="하고 싶어용~~" />
</LinearLayout>
visibility 속성
위젯을 보일지 안볼지 여부를 결정
...
android:visibility="invisible" or "visible"
enabled, clickable 속성
xml 보다 kotlin 속성
값은 true , false 이며 default = True
rotation 속성
위젯을 회전시켜서 출력
값은 각도로 지정
android:rotation="45"
예제) 다양한 xml 속성들을 이용한 예제
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="버튼 1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="여긴 텍스트뷰입니다. "/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:background="#00AEFF" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#4800FFA6"
android:rotation="90"
android:text="버튼 2" />
</LinearLayout>
실행결과
TextView
text 속성
텍스트뷰에 나타나는 문자열을 표현
"문자열" 형식으로 값을 직접 입력
textColor 속성
글자의 색상을 지정
background 속성처럼 값은 #RRGGBB형식으로 사용
textsize 속성
글자 크기 : dp, px, in, mm, sp
typeface 속성
글자의 글꼴을 지정
textStyle 속성
글자의 스타일을 지정
bold, italic, bolditalic 설정 ㅇ 디폴트는 normal
singleLine 속성
글이 길어 줄이 넘어갈 경우 강제로 한 줄까지만 출력하고 문자열의 맨 뒤에 ... 을 표시
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp" //textSize 확인
android:text="textSize 속성"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#9C27B0" // textColor
android:text="textColor 속성"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold|italic" //textStyle
android:text="textStyle 속성"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:typeface="serif" //typeface
android:text="typeface 속성"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" //singleLine
android:text="singleLine 속성"/>
</LinearLayout>
실행결과
kotlin을 이용한 TextView xml 속성 지정
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView 연습 1"/>
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView 연습 2"/>
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView 연습 3"/>
</LinearLayout>
MainActivity.kt
package kr.ac.dongyang.ex4_18
import android.graphics.Color
import android.graphics.Typeface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
textView1.setText("안녕하세요...")
textView1.setTextColor(Color.RED) // 컬러지정
textView2.setTextSize(30.0f) //size 지정
textView2.setTypeface(Typeface.SERIF) // 글꼴지정
textView3.setText("가나다라마바사아자차카파바하가나다라마바사아자차카파바하") // text 지정
textView3.setSingleLine()
}
}
실행결과
----------------------------------------------너무 길어서 1,2로 나눴어용~~ --------------------------------------------------