안드로이드 세뇌교실 4

겜팔이

4-A 안드로이드 View

- View: 화면 그 자체 / 액티비티에 씌우는 화면 껍데기 / XML, Java 둘 중 하나로 작성가능 / 위젯, 어댑터, 레이아웃

- 위젯: TextView, ImageView / 용도가 뚜렷한 View들

- 어댑터: ListView, GridView, RecyclerView / 많은 정보를 길게 스크롤하며 나열할 때 많이 씀

- 레이아웃: Linear, Relative, Frame / 위젯, 어댑터, 레이아웃을 담을 수 있는 틀 / 화면 공간 배분할 때 많이 씀

 

4-B 안드로이드 View Widget 계열

- TextView : 글자

<TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="하하하"
 />

 

- ImageView: 이미지

<ImageView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:src="R.drawable.XXX"
 />

 

4-C 안드로이드 아이린 앱 만들기 (실습)

//activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/irin"
        android:scaleType="centerCrop"
        />
        
</androidx.constraintlayout.widget.ConstraintLayout>

- res > drawable 폴더에 사진 넣고 @drawable/???으로 위치 지정. 그냥 사진 띄움.

 

4-D 안드로이드 View-Layout

- LinearLayout : 선형 레이아웃

<LinearLayout
 android:orientation="vertical" /> // 가로로 차곡차곡
 
 android:orientation="horizontal" /> // 세로로 차곡차곡
 // 겹치지 않음

 

- RelativeLayout : 관계 레이아웃

<RelativeLayout>
 <Button
  android:id="@+id/btn_toast" // id 먼저 부여
  />
  
  <ImageView
   android:layout_above="@id/btn_toast" // btn_toast 위에 있다
   android:id="@+id/iv_photo" // iv_photo가
  />
</RelativeLayout> // 겹치지 않음

 

- FrameLayout : 프레임 레이아웃

<FrameLayout>
 <Button
  android:layout_gravity="bottom" // 버튼은 아래에
  />
  
 <ImageView
  android:layout_gravity="center" // 이미지는 센터에
 />
</FrameLayout> // 겹칠 수도 있음

 

4-E 안드로이드 아이린 앱 만들기 레이아웃 (실습)

//itemp_post.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <ImageView
    	android:id="@+id/iv_photo"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/irin"
        android:scaleType="centerCrop"
        />

    <RelativeLayout
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <ImageView
            android:id="@+id/iv_like"
            android:background="#454522"
            android:layout_width="48dp"
            android:layout_height="48dp" />
        
        <TextView
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_toLeftOf="@id/iv_share"
            android:layout_toRightOf="@id/iv_like"
            android:layout_centerVertical="true"
            android:text="1232342342352352342342342352352344564564"
            android:lines="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/iv_share"
            android:layout_alignParentRight="true"
            android:background="#765854"
            android:layout_width="48dp"
            android:layout_height="48dp" />

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000"
        />

    <RelativeLayout
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/tv_uploader"
            android:lines="1"
            android:text="ansta_"
            android:maxLength="10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@id/tv_uploader"
            android:layout_alignParentRight="true"
            android:lines="1"
            android:text="불꽃놀이했어요~ :)"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

</LinearLayout>

//activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="2"
        android:orientation="horizontal">
        
        <TextView
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:textSize="24sp"
            android:text="TimeLine"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <TextView
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:textSize="24sp"
            android:text="Untitled"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000"
        />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
            <include layout="@layout/item_post" />
            <include layout="@layout/item_post" />

        </LinearLayout>

    </ScrollView>

</LinearLayout>

완성본

4-F 안드로이드 View - Event

- event driven : 버튼을 눌렀다 / back key를 눌렀다 / 인터넷 끊겼다 / 터치를 했따 / 화면을 가로로 뒤집었다 / 카톡이 왔다 / 문자가 왔다 / 전화가 왔다 / 배터리가 부족하다

- Listener : 인터페이스 / 콜백

public interface OnLifeListener {
 void onLife(boolean isSiljeon); // 콜백 이벤트
}

 

4-G 안드로이드 View - Event (실습)

// mainActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnTouchListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.iv_like).setOnClickListener(this);
        findViewById(R.id.iv_share).setOnClickListener(this);

        findViewById(R.id.iv_photo).setOnClickListener(this);
        findViewById(R.id.iv_photo).setOnTouchListener(this);
    }

    @Override
    public void onClick(View view) {
            switch (view.getId()) {
                case R.id.iv_like:
                    Toast.makeText(MainActivity.this, "I love IRENE!!", Toast.LENGTH_SHORT).show();
                    break;

                case R.id.iv_share:
                    Toast.makeText(MainActivity.this, "TOGETHER IRENE!!", Toast.LENGTH_SHORT).show();
                    break;

                case R.id.iv_photo:
                    Toast.makeText(MainActivity.this, "Click IRENE!!", Toast.LENGTH_SHORT).show();
                    break;
            }
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                Toast.makeText(MainActivity.this, "TOUCH DOWN IRENE!!", Toast.LENGTH_SHORT).show();
                break;

            case MotionEvent.ACTION_UP:
                Toast.makeText(MainActivity.this, "TOUCH UP IRENE!!", Toast.LENGTH_SHORT).show();
                break;
        }

        return false;
    }
}

- 위의 activity_main.xml에서 맨 아래 ScrollView에만 주석

- like 클릭하면 "I love IRENE!!", share 클릭하면 "TOGETHER IRENE!!", 사진 클릭하면 "Click IRENE!!"

- 사진 터치하면 "TOUCH DOWN IRENE!!", 손 떼면 "TOUCH UP IRENE!!" (사진 클릭 알림이랑 교차)

 

4-H 네번째 세뇌의 시간

- View : 액티비티에 씌우는 껍데기

- 위젯(TextView, ImageView), 레이아웃(LinearLayout, RelativeLayout, FrameLayout), 어댑터뷰(ListView, GridView, RecyclerView)

- 이벤트 : 상호작용(손가락으로 누른다) -> 리스너(미리 설정) -> 콜백