TextView, Button 기본위젯 다시보기/ Android Studio / 안드로이드 앱만들기 공부 11-1
책에 나오는 Quiz를 풀라고 내용을 읽어보니 텍스트 입력상자를 만들고
글이 입력되면 자동으로 10/80바이트의 이 숫자가 매치되게 만들라는 퀴즈가 있었다
그리고 LinearLayout을 다시 또 봐야할거 같았다. 퀴즈가 너무 어려워서 답을 살펴보니
EditText를 알지 못하는데 EditText를 사용하고 있었다 배우지 않은걸 사용해서 퀴즈를 내고 풀어놓다니
이건 뭔가 잘못된거 같다........
일단 퀴즈를 제쳐두고 뒷페이지의 기본위젯을 다시 공부해본다
1. 파일명 SampleWidget
2. 최상위 레이아웃을 LinearLayout으로 변경
3. orientation을 vertical로 변경
TextView
1. TextView의 text 속성
Text는 텍스트뷰의 문자열을 설정한다 이때, text 속성은 반드시 지정
텍스트뷰에 문자열이 없으면 텍스트뷰가 차지하는 영역을 알 수 없음
values폴더 strings.xml 폴더에 정의한 문자열 text의 속성은 꼭 @string/... 으로 작성해야한다
text에 속성을 추가하는 방법
1. text 속성 값으로 직접 문자열을 작성한다.
2. app/res/values/strings.xml 파일에 직접 작성한다.
** 책에서는 text속성을 strings.xml에 미리 작성하고 오는 것을 추천한다 이유는 다국어 지원 앱을 만들때 좋다고한다.
(왜 이제야 알려주는지 이해할 수 없는데 앞전에 버튼이나 Text를 추가하면 노란색 오류가 났고 가끔 클릭해서 가다보면 Strings.xml이 나왔었던 이유를 알 수 있게되었다)
app/res/values/strings.xml 에다가
<string name="a">text내용</string>
작성
activity_main.xml에서 TextView 작성
[Design] 화면에서 TextView 추가 후 text 속성에 작성해도 된다
@string/ 하면 작성되어있는 name 값들을 보여준다
안드로이드에서 다국어 지원하는 방식이 있다고한다
/app/res/values-en/strings.xml
/app/res/values-ko/strings.xml
이런식으로 폴더를 만들어서 사용한다
반드시 values- 와 en ko 같은 로케일 이름을 붙여줘야함
(핸드폰 단말의 설정의 언어가 한국어면 -ko의 string의 문자열 영어면 -en의 문자열을 알아서 찾아준다
만약에 못찾는다고해도 문제가 없다 못찾으면 values 폴더의 strings.xml 파일에서 찾아온다)
기억하기 values폴더 strings.xml 폴더에 정의한 문자열 text의 속성은 꼭 @string/... 으로 작성해야한다
2. TextView의 textColor 속성
textColor 속성 문자열의 색상 속성
색상 설정은 #AARRGGBB 각각 Alpha, Red, Green, Blue를 타나냄
Alpha는 투명도를 나타냄 Alpha값에서 FF 투명하지 않음 00 투명함 88 반투명을 의미함
#FFFF0000 Alpha는 투명하지 않고 Red는 투명하지않고 Green은 투명 Blue도 투명으로 #FFFF0000은 투명
3. TextView의 textSize 속성
textSize는 글씨크기
크기 단위는 dp, sp, px이 있는데 책에서는 sp를 권장함
"sp"단위는 단말의 해상도에 따라 글자 크기를 일정한 크기로 보일 수 있게 함
폰트 변경 시에도 해당 폰트도 반영되도록 해줌
4. TextView의 textStyle 속성
textStyle은 normal, bold. italic 이 있음
두개의 스타일을 지정할때는 android:textStyle="bold|italic" 처럼 작성한다 중간에 ,가 아닌 | 을 사용함
5. TextView의 typeFace 속성
typeFace는 폰트를 설정함
기본으로 제공하는 폰트는 normal, sams, serif, monospace 폰트가 있음
다른 폰트가 필요하면 폰트를 앱에 추가하고 그 폰트를 설정할 수 있음
6. TextView의 maxLines 속성
maxLines는 표시하는 문자열의 최대 줄 수를 설정하고 한 줄의 영역을 넘어가는 부분은 표시되지 않는다.
android:maxLines="1" -> 텍스트를 한 줄로 표시하도록 설정
<?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/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/my_name"
android:textColor="#FFFF9900"
android:textSize="40sp"
android:textStyle="bold|italic"
android:typeface="serif" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="여기에 이름을 입력하세요"
android:textColor="#FFFF0000"
android:textSize="50sp"
android:maxLines="1"
android:layout_gravity="center"/>
</LinearLayout>Button
버튼은 사용자가 클릭하면 클릭에 대한 반응을 하는 위젯
버튼은 텍스트뷰를 상속하여 정의되어있음 그래서 텍스트뷰 속성도 있음 text,textColor,textSize,textStyle 등
안드로이드는 다양한 유형의 버튼이 있음 체크박스, 라디오버튼 등
버튼에 발생한 이벤트를 간단하게 처리하는 방법은 OnClickListener를 정의해 버튼에 설정하는 것
- 체크박스와 라디오버튼
체크박스와 라디오 버튼은 클릭 이벤트와 상태값을 저장하고 선택 해제 상태를 표시할 수 있다.
이런 작업이 가능하도록 CompoundButton 클래스가 정의되어있다.
CompoundButton Class 의 메서드
- public boolean isChecked ()
버튼이 선택되어 있는지 확인하는 메서드
- public void setChecked (boolean checked)
체크의 상태를 지정하는 메서드
- public void toggle ()
** 버튼의 상태가 바뀌는 것을 알고 싶다면?
void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
메서드를 재정의해서 사용한다.
RadioGroup을 이용해서 버튼을 하나의 그룹으로 묶어서 라디오 버튼을 만듬
라디오 버튼은 하나의 버튼이 선택되면 다른 버튼은 해제 되어야함 그래서 RadioGroup으로 묶음
1. app/res/layout 폴더에 button.xml 파일 생성
2. File name : button
Root element : LinearLayout
3. button.xml에 코드작성
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="선택"
android:textSize="24sp"
android:textStyle="bold" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10sp"
android:text="선택1"
android:textColor="#3F51B5"
android:textSize="24sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10sp"
android:text="선택2"
android:textColor="#009688"
android:textSize="24sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10sp"
android:layout_weight="1"
android:text="선택3"
android:textColor="#9C27B0"
android:textSize="24sp"
android:textStyle="bold" />
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal"
android:paddingTop="20dp">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="하루종일"
android:textColor="#FF5722"
android:textSize="24sp"
android:textStyle="bold" />
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
4. 화면 확인하기
** 또 만든 xml파일을 main에 연결해서 확인해보는 방법을 알려주길래 도대체 새페이지로 연결은 언제 알려주는지 궁금해서 책에 언제 나오나 확인해봤더니 이번장이 끝나야 할 수 있다고한다 04. 레이아웃 인플레이션 이해하기를 보면됨
MainActivity.java
package com.togapp.samplewidget;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
setContentView(R.layout.button);
}
}
- 버튼에 아이콘을 넣고싶다면 아이콘을 설정하는 속성을 추가하면 된다고함
- 텍스트가 없는 버튼을 사용하고싶다면 ImageButton 태그를 적용
(ImageButton 태그는 이미지만 보여주고 클릭 이벤트를 버튼이랑 동일하게 처리가 가능함)
결과
