Android App 개발 스터디 2주차 todolist-1

 내용출처 : 유튜브 홍드로이드님 강의

-to do list- 

1. TextView

2. EditText & Button

3. Intent 화면전환

4. ImageView & Toast 

5. 패키지구조 & 역할

6. ListView

7. Navigation Menu

+) 앱 launching방법은 맨 위에 실행 키 누르고 맨 아래에 있는 4: Run키 누르는 것이다.

---

• 1. TextView (activity_main.xml 부분을 조작하여 design부분에 TextView 넣기)

<?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:text="태윤 첫 텍스트뷰"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="태윤 두번째 텍스트뷰"/>

</LinearLayout>

① 원래 ConstraintLayout으로 기본설정되어있었는데 LinearLayout으로 바꿔줬다.(단지 그게 더 편해서)

② html만들듯이 <TextView ~~~/>를 통해 TextView를 간단히 넣을 수 있다.

③ android:layout_width, android:layout_height을 통해 텍스트뷰의 크기를 조정할 수 있는데

(1) android:layout_width="match_parent"는 부모의 길이만큼 너비를 조정한다는 의미로 design창 양끝으로 textview를 조정한다는 의미이다.

(2) android:layout_height="wrap_content"를 이용하여 텍스트 크기만큼 세로 길이를 설정할 수 있다.

④ android:text="" 구문을 통해 텍스트 내용을 설정할 수 있다.

⑤ 이까지만 해주고 design부분을 살펴보면 2번째 텍스트뷰가 화면에 없는데.. 그 이유는 orientation을 지정하지 않았기 때문이다. android:orientation="vertical"을 통해 수직으로 textview를 나열할 수 있다.

 

 위 코드를 통해 나타나는 design부분은 다음과 같다.

---

• 2. EditText & Button (앱 사용자가 직접 텍스트부분과 버튼부분을 조작함)

///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">

    <EditText
        android:id="@+id/et_id"		
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="아이디를 입력하세요." />

    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼"/>

</LinearLayout>

 activity_main.xml 부분의 코드 내용이다. MainActivity.Java부분에서 동적수행을 하기 위해서 android:id를 통해 id를 부여하고 android:hint를 이용해 우리가 text부분에 무엇을 쓰기 전에는 hint부분의 내용이 보여지도록 해준다.

package com.example.firstapp;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    EditText et_id;
    Button btn_test;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        et_id = findViewById(R.id.et_id);
        btn_test = findViewById(R.id.btn_test);


        btn_test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et_id.setText("김태윤");
            }
        });
    }
}

① Editext 변수로 et_id, Buttton 변수로 btn_test를 만들어준다.(되도록이면 activity_main.xml에서 설정한 id값과 같게 한다. 헷갈리지 않을려고)

② 사용자가 앱을 처음 켰을 때 나오는 부분이 바로 onCreate(Bundle) 부분이다.

③ et_id = findViewById(R.id.et_id); 를 통해 MainActivity.Java에서 설정한 et_id가 activity_main.xml의 Edittext인 et_id의 id를 부여받게 한다.

④ btn_test.setOnClickListener(new View.OnclickListener())을 통해 btn_test 라는 버튼을 클릭했을 때 안쪽 코드가 실행되도록 설계해준다. 

⑤ 내가 설계한 안쪼 코드는 et_id를 "김태윤"이라고 표시하게끔 설계해주는것이다.

 

 위 코드를 통해 나타나는 design부분은 다음과 같다.

---

• 3. Intent 화면전환 (activity간의 화면전환을 intent를 통해 구현함)

- 버튼을 클릭하여 화면전환이 이루어지게 하였다.

(1) 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"
    tools:context=".MainActivity">
    
    <EditText
        android:id="@+id/et_test"
        android:layout_width="200dp"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn_move"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이동"/>

</LinearLayout>

① EditText부분

  사용자가 문자열을 입력하여 두번째 화면으로 문자열을 직접 전달하기 위해 만든 부분이다.

② Button부분

  사용자가 버튼을 누르면 화면전환이 되게끔 설계하였다.

 

(2) MainActivity.java

package com.example.firstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    private Button btn_move;
    private EditText et_test;
    private String str;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        et_test = findViewById(R.id.et_test);


        btn_move = findViewById(R.id.btn_move);  //// btn_move라는 버튼 찾아와라.
        btn_move.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                str = et_test.getText().toString(); // .tostring해야 string형태가 됨
                Intent intent = new Intent(MainActivity.this , SubAcitivity.class);
                intent.putExtra("str",str); /// subactivity쪽으로 str값을 보냄
                startActivity(intent); // 액티비티 이동해주는 구문.

            }
        });


    }

}

① et_test라는 변수를 설정해 activity_main.xml부분에서의 et_test값을 불러옴

② btn_move라는 변수를 설정해 activity_main.xml부분에서 btn_move라는 버튼값을 불러옴

③ setOnClickListener을 통해 버튼을 눌렀을 때 작업내용이 수행되도록 함

④ str변수를 설정해서 et_test내용을 str변수에 저장함

⑤ Intent를 이용해서 MainActivity라는 this부분에서 SubActivity라는 class부분으로 인텐트 화면전환을 해줌

⑥ subactivity쪽에 putExtra로 str값을 보냄.

⑦ startActivity를 통해 액티비티 이동을 수행함

 

(3) activity_sub_activity_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"
    tools:context=".SubAcitivity">

    <TextView
        android:id="@+id/tv_sub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="서브 액티비티 도착"/>



</LinearLayout>

① TextView를 간단히 만들어줌

 

(4) SubActivity.java

package com.example.firstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

public class SubAcitivity extends AppCompatActivity {

    private TextView tv_sub;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sub_acitivity);

        tv_sub = findViewById(R.id.tv_sub);

        Intent intent = getIntent();  /// 요기서 str을 받음
        String str = intent.getStringExtra("str");

        tv_sub.setText(str);

    }
}

① tv_sub 라는 변수를 설정해 activity_sub_activity_xml부분의 tv_sub로부터 문자열을 불러옴

② Intent intent = getIntent();를 통해 str값을 받음

 

  위 코드를 통해 나타나는 design부분은 다음과 같다.

---

• 4. ImageView & Toast (화면에 내가 원하는 이미지 띄우기, 토스트 메시지 띄우기) 

 - 저번에 만들었던 intent project내에 내가 원하는 이미지를 업로드해보겠다.

(1) 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">
    
    <EditText
        android:id="@+id/et_test"
        android:layout_width="200dp"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn_move"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이동"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">   // gravity로 정렬가능 기본값은 left임
        
        <ImageView
            android:id="@+id/test"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher"/>


    </LinearLayout>



</LinearLayout>

① ImageView를 설정하여 내가 원하는 이미지를 android:src를 통해 집어넣음.(위의 코드에 넣은 이미지는 기본이미지)

② ImageView에 LinearLayout을 걸고 android:gravity를 이용하여 가운데 정렬이 이루어지게 함

 

(2) MainActivity.java

package com.example.firstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button btn_move;
    private EditText et_test;
    private String str;
    ImageView test;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        et_test = findViewById(R.id.et_test);


        btn_move = findViewById(R.id.btn_move);  //// btn_move라는 버튼 찾아와라.
        btn_move.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                str = et_test.getText().toString(); // .tostring해야 string형태가 됨
                Intent intent = new Intent(MainActivity.this , SubAcitivity.class);
                intent.putExtra("str",str); /// subactivity쪽으로 str값을 보냄
                startActivity(intent); // 액티비티 이동해주는 구문.

            }
        });

        test = (ImageView)findViewById(R.id.test);
        test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "김태윤",Toast.LENGTH_SHORT).show();  // Toast로 원하는 text 출력하게끔 하기. text랑 출력시간 길이도 설정가능
            }
        });

    }

}

① test라는 변수를 설정하여 ImageView를 가져옴

② ImageView를 클릭하였을 때 toast 실행

 

  위 코드를 통해 나타나는 design부분은 다음과 같다.

---

• 5. 패키지구조 & 역할

 평소에 궁금했던 안드로이드 앱스튜디오 내의 패키지구조 및 역할에 대해 알아보았다.

(AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.firstapp">
        // 요기서 앱 기본설정함
        /// drawable 혹은 mipmap에 원하는 사진 넣고 "@mipmap/ic_launcher"부분에 마우스 올린 뒤 컨트롤키 누르고 icon 바꾸기 가능
        /// label "FirstApp"부분에 마우스 올린 뒤 컨트롤키 누르고 클릭하여 앱이름을 바꿀 수 있음
        /// roundIcon은 테두리를 둥글게 해줌
        /// theme에서 앱에서 쓸 색 정함
        /// activity name으로 activity를 선언해야 layout 및 java부분에서 코딩 가능
        /// intent-filter부분을 통해 앱 실행했을 때 MainActivity부분이 먼저 실행됨
        // layout 폴더에서 액티비티 디자인쪽 부분 코딩
        // mipmap은 기본 앱아이콘이 있음(dpi는 해상도 단위임) +)핸드폰 화면해상도도 설정해서 미리보기 가능
        // values의 colors.xml에서 사용하길 원하는 color 설정가능
        // values의 strings.xml에서 공통적으로 쓰이는 것을 써줌
        // values의 themes폴더에서 앱이 실행됬을 때 디자인 확인 가능
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.FirstApp">
        <activity android:name=".SubAcitivity"></activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

  (내용을 전부 AndroidManifest.xml 코드블럭에 저장함)

---

• 6. ListView

 ListView를 화면에 추가해 내가 원하는 데이터를 리스트에 넣어보았다.

(1) 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">
    
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ListView>



</LinearLayout>

 그저 ListView를 추가해 아이디와 크기를 정하주는 작업

 

(2) MainActivity.java

package com.example.firstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
	private ListView list;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
    list = (ListView)findViewById(R.id.list);

	List<String> data = new ArrayList<>();  /// ArrayList : 배열 안에 string형태로 리스트를 넣겠다
	
    ArrayAdapter<String> adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,data);  // this: 현재 activity
    list.setAdapter(adapter);

	data.add("김태윤");
   	data.add("안드로이드");
    data.add("바나나");
   	adapter.notifyDataSetChanged(); // 이렇게 해야 저장이 완료됨

    }

}

① private ListView list;를 통해 list라는 변수 설정

② list = (ListView)findViewById(R.id.list);로 list라는 변수를 activity_main.xml부분의 ListView의 아이디로 불러옴

③ List<String> data = new ArrayList<>();를 통해 리스트 배열 안에 string의 형태의 데이터를 넣겠음

④ adapter을 이용해 연결함

⑤ data.add를 통해 data를 집어넣음

 

 위 코드를 나타내는 design부분은 다음과 같다.

---

• 7. Navigation Menu 

  버전이 달라 아쉽게도 나중에 작성해보아야겠다.