1.  텍스트뷰

텍스트뷰는 View 클래스 바로 다음에 위치하며 다양한 위젯이 그 하위에 존재
텍스트뷰의 하위(에디트텍스트, 버튼, 체크박스 등)는 모두 텍스트뷰로부터 상속받는다.

속성 설명
text 텍스트뷰에 나타나는 문자열을 표현
'문자열'형식으로 값을 직접 입력하거나 '@string/변수이름'형식으로 설정한 후 
strings.xml 파일에 지정할 수 있음
textColor 글자의 색상을 지정
textSize 글자의 크기를 dp, px, in, mm, sp 단위로 지정
typeface 글자의 글꼴을 지정. 
값으로 sans, serif, monospace를 설정할 수 있고 디폴트는 normal
textStyle 글자의 스타일을 지정. 
값으로 bold, italic, bold|italic을 설정할 수 있고 디폴트는 normal
singleLine 글이 길어 줄이 넘어갈 경우 강제로 한 줄만 출력하고 문자열의 맨 뒤에 '...'를 표시
값으로 true와 false를 설정할 수 있고 디폴트는 false

 

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="textSize 속성"
        android:textSize="30dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="textColor 속성"
        android:textColor="#00FF00"
        android:textSize="30dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="textStyle 속성"
        android:textSize="30dp"
        android:textStyle="bold|italic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="typeface 속성"
        android:textSize="30dp"
        android:typeface="serif" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="singleLine 속성 singleLine 속성 singleLine 속성"
        android:textSize="30dp" />

Kotlin 코드로 XML 속성 설정 

 

activity_main.xml파일에서 지정한 XML 속성을 Kotlin 코드에서도 설정 가능.

기본적인 텍스트뷰만 만들어 놓고 id속성과 text만 설정한 XML파일.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val textView1 = findViewById<TextView>(R.id.textView1)
        val textView2 = findViewById<TextView>(R.id.textView2)
        val textView3 = findViewById<TextView>(R.id.textView3)

        textView1.text = "안녕하세요?"
        textView1.setTextColor(Color.RED)
        textView2.textSize = 30.0f
        textView2.setTypeface(Typeface.SERIF, Typeface.BOLD_ITALIC)
        textView3.text = "가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하"
        textView3.isSingleLine = true
    }
}

 

  • textView1.setText("안녕하세요?")  : 첫 번째 텍스트뷰의 문자열을 변경
  • textView1.setTextColor(Color.RED) : 첫 번째 텍스트뷰의 색상을 빨간색으로 지정. 색상은 android.graphics.Color 클래스에 상수로 지정
  • textView2.setTextSize(30.0f) :  두 번째 텍스트뷰에 sp 단위의 폰트 크기를 지정 (XML 속성의 textSize="30sp"와 동일한 역할)
  • textView2.setTypeface(Typeface.SERIF, Typeface.BOLD_ITALIC) : 두 번째 텍스트뷰에 XML속성의 typeface와 textStyle 속성을 동시에 지정하는 메서드 (android.graphics.Typeface 클래스에 상수로 지정)
  • textView3.setText("가나다라마바사아자차카타파하가나다라마바사아자차카타파하")
  • textView3.setSingleLine() : 세 번째 텍스트뷰에 긴 글을 대입하고 XML 속성에서 singleLine="true" 효과를 줌

💫  XML 파일에서 설정하는 내용의 대부분이 메서드로 제공되어 Kotlin 코드에서 XML 설정이 가능

 

2.  버튼과 에디트텍스트

버튼과 에디트텍스트는 사용자에게서 어떤 값을 입력받기 위한 가장 기본적인 위젯으로 활용도가 높음.
두 위젯은 View 클래스와 TextView 클래스를 상속받으므로 거의 비슷하게 사용할 수 있음.

 

1) 버튼

버튼에서는 버튼을 클릭하는 이벤트

일반적인 버튼의 XML 코드


    A. 버튼 변수 선언    val myButton :Button
    B. 변수에 버튼 위젯 대입    myButton = findViewById<Button>(R.id.button1);
    C. 버튼을 클릭할 때 동작하는 클래스 정의

myButton.setOnClickListener {
// 동작 내용을 이 부분에 코딩
}


✓ 위의 세 단계는 대부분의 위젯(라디오버튼, 이미지버튼, 체크박스, 토글버튼 등)에서 거의 동일하게 사용

 

checkbox
 <CheckBox
        android:id="@+id/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="안드로이드폰" />

    <CheckBox
        android:id="@+id/iphone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="아이폰" />

    <CheckBox
        android:id="@+id/window"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="윈도우폰" />

 

radio button
    <RadioGroup
        android:id="@+id/rGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="남성" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="여성" />
    </RadioGroup>

 

switch & togglebutton
 <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true" />

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false" />

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true" />

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false" />


2) 에디트텍스트

에디트텍스트는 값을 입력받은 후 해당 값을 Java 코드에서 가져와 사용하는 용도로 많이 쓰임
에디트텍스트도 변수를 선언하고 이 변수에 해당 아이디 값을 넣은 후에 접근

XML 코드

 

    A. 에디트텍스트 변수 선언    var myEdit :EditText
    B. 변수에 에디트텍스트 위젯 대입    myEdit = findViewById<TextEdit>(R.id.edittext1);
    C. 에디트텍스트에 입력된 값 가져오기 ( 주로 버튼 클릭 이벤트 리스너 안에 삽입 )
         var myStr : String = myEdit.getText().toString();
          ✓ getText() 메서드는 에디트텍스트에 입력한 값을 반환. 이를 문자열로 바꾸기 위해 toString()을 사용
               반환값을 문자열로 변경할 때 가장 많이 사용하는 방식

 

 

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="아래에 이름을 입력 :"
        android:layout_margin="20dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="여기에 채우세요"
        android:layout_margin="20dp"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="확인"
        android:layout_margin="20dp"/>

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]

저작자표시 비영리 변경금지

'Android Studio' 카테고리의 다른 글

[Android Studio] 파일 처리 | openFileInput() & openFileOutput() & openRawResource()  (0) 2024.05.01
[Android Studio] 날씨와 시간 위젯 | 자동완성 텍스트뷰 위젯 | 진행상태 표시 위젯  (0) 2024.04.29
[Android Studio] 테이블 레이아웃, 그리드 레이아웃, 프레임 레이아웃  (1) 2024.04.25
[Android Studio] relative layout  (0) 2024.04.25
[Android Studio] Layout 개념과 종류, 리니어 레이아웃과 중첩 리니어 레이아웃  (0) 2024.04.23

1.  드롭다운 목록 활용하기

🐰  드롭다운 목록은 select 태그로 구현

 드롭 다운 목록을 선택했을 때(값이 변경 되었을 때) 어떤 것을 선택했는지 출력
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.querySelector('select');
            const p = document.querySelector('p');

            select.addEventListener('change', (event) => {
                const options = event.currentTarget.options; // option을 배열로 반환
                const index = event.currentTarget.options.selectedIndex; 
                // 선택한 index 추출
                console.log(options)

                p.textContent = `선택: ${options[index].textContent}`; 
                // 선택한 option 태그를 추출

            })
        });
    </script>
</head>
<body>
    <select>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
        <option>튀김</option>
    </select>
    <p>선택: 떡볶이</p>
</body>
💡  글자 입력 양식의 change 이벤트
    -  입력 양식은 값이 변경될 때 change 이벤트를 발생.
    -  글자 입력 양식은 입력 양식을 선택(focus 상태)해서 글자를 입력하고, 선택을 해제(blur)할 때 change 이벤트를 발생함
    -  따라서 사용자가 입력하는 중에는 change 이벤트가 발생 x
💡 selectedIndex : 선택한 option의 index 반환

 

 

💡 multiple select 태그 : select 태그에 multiple 속성을 부여하면 ctrl이나 shift를 누르고 복수의 항목을 선택 가능
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.querySelector('select');
            const p = document.querySelector('p');

            select.addEventListener('change', (event) => {
                const options = event.currentTarget.options; // option을 배열로 반환
                // console.log(options)
                const list = []

                for (const option of options) { // options에는 forEach() 메소드가 없어서 for문을 돌림
                    //console.log(option.selected)
                    if (option.selected) { // selected 속성 확인
                        list.push(option.textContent);
                    }
                }
                p.textContent = `선택: ${list.join(',')}`

            })
        });
    </script>
</head>
<body>
    <select multiple>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
        <option>튀김</option>
    </select>
    <p></p>
</body>

 

 

2.  체크 박스 활용

🐰  체크박스의 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용

체크 상태일때만 타이머를 증가시키는 프로그램
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('input');
            const h1 = document.querySelector('h1');
            let count = 0
            let timerId;

            input.addEventListener('change', (event) => {
                console.log(event.currentTarget.checked);
                if (event.currentTarget.checked) { //체크 상태
                    timerId = setInterval(() => {
                        h1.textContent = `${count++}초`
                    }, 1000)
                } else { // 체크 해제 상태
                    clearInterval(timerId)
                }
            });
        });
    </script>
</head>
<body>
    <input type="checkbox">
    <span>타이머 활성화</span>
    <h1></h1>
</body>

 

3.  라디오 버튼 활용

🐰  라디오 버튼은 name 속성이 동일하면 하나만 선택할 수 있음

🐰  체크박스와 마찬가지로 checked 속성 사용

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 문서 객체 추출하기
            const output = document.querySelector('#output');
            const radios = document.querySelectorAll('[name=pet]');

            // 모든 라디오 버튼에
            radios.forEach((radio) => {
                // 이벤트 연결
                radio.addEventListener('change', (event) => {
                    const current = event.currentTarget;
                    if (current.checked) {
                        output.textContent = `좋아하는 애완동물은 ${current.value}이시군요!`;
                    }
                });
            });

        });
    </script>
</head>
<body>
    <h3># 좋아하는 애완동물을 선택해주세요</h3>
    <label><input type="radio" name="pet" value="강아지">
        <span>강아지</span></label>
    <label><input type="radio" name="pet" value="고양이">
        <span>고양이</span></label>
    <label><input type="radio" name="pet" value="햄스터">
        <span>햄스터</span></label>
    <label><input type="radio" name="pet" value="기타">
        <span>기타</span></label>
    <hr>
    <h3 id="output"></h3>
</body>

💡  name 속성이 없는 라디오 버튼
    -  버튼을 여러 개 선택할 수 있다. 한 번 선택하고 나면 취소할 수도 없음

4.  기본 이벤트 막기

🐰  기본 이벤트 : 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
🐰  기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용

 

이미지 마우스 오른쪽 버튼 클릭 막기
  웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴 contextmenu를 출력
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const imgs = document.querySelectorAll('img');

            imgs.forEach((img) => {
                img.addEventListener('contextmenu', (event) => {
                    event.preventDefault(); // 컨텍스트 메뉴를 출력하는 기본 이벤트 제거
                });
            });
        });

    </script>
</head>
<body>
    <img src="http://placebear.com/300/300" alt="">
</body>

메소드 사용 전 / 후

체크 때만 링크 활성화 하기
<head>
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            let status = false;
        
            const checkbox = document.querySelector('input');
            checkbox.addEventListener('change', (event) => {
                status = event.currentTarget.checked;
            });
            
            const link = document.querySelector('a');

            link.addEventListener('click', (event) => {
                if (!status) {
                    event.preventDefault(); // status가 false가 아니면 링크의 기본 이벤트 제거.
                }
            });

        });

    </script>
</head>
<body>
    <input type="checkbox">
    <span>링크 활성화</span>
    <br>
    <a href="http://naver.co.kr">네이버</a>
</body>

5.  참가신청 명단

1) 새 노드 추가하고 표시하기
    -> input 태그에 문자열을 입력하고 [신청] 버튼을 클릭하면, nameList에 문자열이 추가
2) 추가시 맨위로 가도록 변경
<head>
    <link rel="stylesheet" href="./css/name_list.css">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('#userName');
            const btn = document.querySelector('button');
            const list = document.querySelector('#nameList');

            btn.addEventListener('click', function (event) {
                // 기본 이벤트(submit) 막기
                // event.preventDefault();

                // 1. input 태그에 있는 문자열을 들고와서 새로운 요소 만들기
                const name = document.createElement('p');
                name.textContent = input.value;
                
                // del 키워드 추가
                const delBtn = document.createElement('span');
                delBtn.textContent = 'X';
                delBtn.setAttribute('class','del');
                // 새로 생성된 요소에 이벤트를 추가할 경우에는 생성될 때 마다 이벤트를 등록해야 함.
                delBtn.addEventListener('click', function () {

                    if (confirm("삭제하시겠습니까?")) {
                        // '현재 노드(this)의 부모 노드(= p태그)의 부모 노드'를 찾아 '현재 노드의 부모 노드' 삭제
                        this.parentNode.parentNode.removeChild(this.parentNode);
                    }
                })
                name.appendChild(delBtn);
                

               // 2. nameList에 새로운 요소 추가하기
               // list.appendChild(name);
                list.insertBefore(name, list.childNodes[0]); // p 요소를 #nameList 맨 앞에 추가하기

                // 3. input 태그에 있는 문자열 제거하기
                input.value = ''; //텍스트 필드 지우기

            });

        });
    </script>
</head>
<body>
    <div id="container">
        <h1>참가 신청</h1>
        <form action="">
            <input type="text" id="userName" placeholder="이름" required>
            <button>신청</button>
        </form>
        <hr>
        <div id="nameList"></div>
    </div>
</body>

 

 

 

 

[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]

저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 회원가입 예제  (0) 2024.04.05
[JavaScript] 주문서 작성  (0) 2024.04.05
[JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트  (0) 2024.04.03
[JavaScript] 이벤트 핸들러 등록과 제거  (0) 2024.04.02
[JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기  (0) 2024.04.02

+ Recent posts

티스토리툴바