사용자 인터페이스(UI) -1

화면에 버튼 두 개 생성(자바코드로 UI구성)

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LinearLayout linear = new LinearLayout(this);

Button bt1 = new Button(this);

bt1.setText("Button 1");

linear.addView(bt1);

Button bt2 = new Button(this);

bt2.setText("Button 2");

linear.addView(bt2);

setContentView(linear);

}

}

화면에 버튼 두 개 생성(레이아웃 XML로 UI구성)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

// 여기서 초기설정 말고 LinearLayout으로 내가 바꿨음

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="com.kimjungkwon.test1.Main2Activity">

<Button

android:layout_width="wrap_content"

// 뷰의 크기를 정해주는 기능을 하며

// match_parent, fill_parent, wrap_content, 100px(예시) 이렇게 네 가지가 있다

// match_parent, fill_parent는 부모 뷰 크기만큼 꽉 채우는 것이고

// wrap_content는 말그대로 content를 감쌀 크기만큼 뷰의 크기를 설정하는 것이다

// device마다 화면 크기가 일정하지 않아서 직접 수치를 입력하는 것은 지양한다

android:layout_height="wrap_content"

android:text="Button 1"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"/>

</LinearLayout>

xml에서 만든 view를 java코드에서 활용하는 방법(id부여)

<Button

android:id="@+id/mybutton"

// id값을 부여하여서 R.java에 저장되도록 해서

// 결국 java 코드에서 객체로 인식하여 사용할 수 있도록 한다

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"/>

public class Main2Activity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main2);

// void setContentView()로 xml파일의 내용을 화면에 출력하고

// xml에 정의한 객체가 생성되게 된다.

// 이 함수에서 객체가 생성된 덕분에 바로 밑에서

// findViewById()에 매개변수를 넣게 되면 객체가 획득 되는 것이다

TextView mytextview = (TextView) findViewById(R.id.mybutton);

// TextView를 담아야 하니까 먼저 TextView 타입의 변수를 선언하고

// findViewById()는 id로 View를 찾아 View로 반환하므로 (TextView)로 캐스팅

// 매개변수는 xml에서 mybutton으로 id값을 매겼고 매기는 순간 R.java로 들어갔으므로

// R.id.mybutton이 나오게 된다

padding과 margin

<Button

android:id="@+id/mybutton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"

android:padding="50dp" />

// 내용과 뷰 테두리 사이의 간격을 지정하는 padding

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"

android:layout_marginLeft="20dp"/>

// 뷰와 뷰 사이의 간격을 지정하는 margin

clickable 속성

모든 뷰는 클릭이나 롱클릭 이벤트에 반응한다. 특히 뷰 중 많이 쓰이는 "버튼"은 clickable 속성을 지정하지 않아도 클릭이나 롱클릭 이벤트에 반응할 수 있다. 하지만 문자열 출력하는 TextView나 이미지를 출력하는 ImageView는 clickable 속성을 달아주지 않으면 클릭 혹은 롱클릭 이벤트에 반응하지 않는다. 따라서 텍스트나 이미지가 버튼처럼 쓰이길 원하거나 클릭 혹은 롱클릭 이벤트에 반응하길 원한다면 clickable 속성을 사용해야 한다.

visibility 속성

<Button

android:id="@+id/mybutton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"

android:visibility="gone"/>

// gone으로 하게 되면 안보이고 공간도 차지하지 않음

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"

android:visibility="invisible"/>

// invisible로 하게 되면 안보이지만 공간은 차지함

실습

과제 : 버튼 두 개와 텍스트뷰를 구현하고 버튼의 동작에 따라 텍스트뷰가 보였다 안보였다 하게 만들기

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

// Layout을 맞추기 위해 LinearLayout으로 설정

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"

// 기본값이 horizontal 이므로 vertical로 변경했다

tools:context="com.kimjungkwon.buttontest.ButtonTest">

<Button

android:id="@+id/visibleBt"

android:layout_width="match_parent" // 길쭉한 버튼이므로 width는 match_parent

android:layout_height="wrap_content"

android:text="Visible"/>

<TextView

android:id="@+id/helloworld"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Hello world"

android:textAlignment="center" // 텍스트를 가운데 정렬

android:padding="50dp"

android:textSize="30dp"

android:textColor="#FF0000"

android:visibility="invisible" // 기본값으로 안보이게 설정

/>

<Button

android:id="@+id/invisibleBt"

android:layout_width="match_parent" // 길쭉한 버튼이므로 width는 match_parent

android:layout_height="wrap_content"

android:text="Invisible"/>

</LinearLayout>

package com.kimjungkwon.buttontest;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;

public class ButtonTest extends AppCompatActivity implements View.OnClickListener {

// interface인 View.OnClickListener를 implement한다

/*

cf) View.OnClickLister

Interface definition for a callback to be invoked when a view is clicked.

이를 implement 해주어야 밑에서 setOnClickListener()에서 파라미터에 this가 들어갈 수 있음

*/

Button bt1, bt2;

TextView tv;

// 전역변수로 설정해주어야 onClick에서도 사용이 가능하므로 전역으로 선언만 해준다

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_button_test);

bt1 = (Button) findViewById(R.id.visibleBt);

bt2 = (Button) findViewById(R.id.invisibleBt);

tv = (TextView) findViewById(R.id.helloworld);

// xml에서 설정해둔 id 값을 불러와서 전역 변수 초기화

bt1.setOnClickListener(this); //button 이벤트 등록

bt2.setOnClickListener(this); //button 이벤트 등록

// 여기서 this는 해당 모듈을 의미한다

}

public void onClick(View view) {

if (view == bt1) {

tv.setVisibility(View.VISIBLE);

} else if (view == bt2) {

tv.setVisibility(View.INVISIBLE);

}

// 교재에는 targetTextView.setVisibility로 나와있으나 그런 것은 없는 것으로 보인다

// 내가 한 방식대로 작동하는 것을 보니 View에 setVisibility가 내장된 것으로 판단됨

}

}