Android::RecyclerView, Lottie, Animation 사용해서 메모장 앱 수정하기

● 1차 완성 동영상

 

 

---

● 코드

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"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">
    <ImageButton
        android:id="@+id/main_btn_back"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="12dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/ic_arrow_back_black_24dp"
        tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />



    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_lv_memo_list"
        android:layout_width="match_parent"
        android:layout_height="590dp"
        app:layout_constraintTop_toBottomOf="@+id/main_btn_back"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:scrollbarFadeDuration="0"
        android:scrollbarSize="5dp"
        android:scrollbarThumbVertical="@color/colorPrimaryDark"
        android:scrollbars="vertical"
        />
    <TextView
        android:id="@+id/main_tv_count"
        android:text="15"
        android:textColor="@color/colorText"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="170dp"
        app:layout_constraintTop_toBottomOf="@id/main_lv_memo_list"
        tools:ignore="HardcodedText,RtlHardcoded"/>

    <TextView
        android:id="@+id/main_tv_explain"
        android:text="개의 메모"
        android:textColor="@color/colorText"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/main_tv_count"
        app:layout_constraintTop_toBottomOf="@id/main_lv_memo_list"
        android:layout_marginLeft="5dp"
        tools:ignore="HardcodedText,RtlHardcoded"/>

    <ImageButton
        android:id="@+id/main_btn_search"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="12dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/main_btn_add_text"
        app:srcCompat="@drawable/ic_search_black_24dp"
        tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

    <ImageButton
        android:id="@+id/main_btn_add_text"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="12dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/ic_mode_edit_black_24dp"
        tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

CustomAdapter

package com.example.rvmemoapplication;

import android.content.Context;
import android.content.Intent;
import android.text.Layout;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import org.w3c.dom.Text;

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

// CustomAdapter: ArrayList 에 있는 Memo 클래스 타입의 데이터를 RecyclerView 에 보여주는 처리를 한다.
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomViewHolder>
{
//    RecyclerView.Adapter 를 상속받아 새로운 어댑터를 만들 때 오버라이드 해야하는 함수
//    : onCreateViewHolder : viewType 형태의 아이템 뷰를 위한 뷰 홀더 객체 생성
//    : onBindViewHolder   : position 에 해당하는 데이터를 뷰홀더의 아이템뷰에 표시
//    : getItemCount       : 전체 아이템 갯수 리턴

    private ArrayList<Memo> mList;

    //(1) 커스텀 리스너 인터페이스 정의 - onItemClick, onItemLongClick
    public interface OnItemClickListener
    {
        void onItemClick(View v, int pos);
    }
    public interface OnItemLongClickListener
    {
        void onItemLongClick(View v, int pos);
    }

    //(2) 리스너 객체를 전달하는 메서드와 전달된 객체를 저장할 변수(mListener) 추가
    private OnItemClickListener mListener =null;
    private OnItemLongClickListener mLongListener = null;

    public void setOnItemClickListener(OnItemClickListener listener)
    {
        this.mListener = listener;
    }
    public void setOnItemLongClickListener(OnItemLongClickListener listener)
    {
        this.mLongListener = listener;
    }

    // 아이템 뷰를 저장하는 뷰홀더 클래스
    public class CustomViewHolder extends RecyclerView.ViewHolder
    {
        TextView title;
        TextView contents;

        public CustomViewHolder(View itemview) {
            super(itemview);
            // 뷰 객체에 대한 참조
            this.title = (TextView)itemview.findViewById(R.id.memo_tv_title);
            this.contents = (TextView)itemview.findViewById(R.id.memo_tv_contents);
//            this.like = (ImageButton)view.findViewById(R.id.memo_btn_heart);

            // (3)뷰홀더가 만들어지는 시점에 클릭 이벤트를 처리해야 한다.
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //리사이클러뷰의 뷰홀더에는 자신의 위치를 확인할 수 있는 아래 메서드 제공
                    int pos = getAdapterPosition();
                    if(pos!= RecyclerView.NO_POSITION)
                    {
                       mListener.onItemClick(v,pos);
                    }
                }
            });

            itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    int pos = getAdapterPosition();
                    if(pos != RecyclerView.NO_POSITION)
                    {
                        mLongListener.onItemLongClick(v,pos);
                    }
                    return true;
                }
            });
        }
    }
    // 생성자에서 데이터 리스트 객체를 전달받는다.
    public CustomAdapter(ArrayList<Memo> list)
    {
        this.mList = list;
    }



    // 아이템 뷰를 위한 뷰홀더 객체 생성하여 리턴한다.
    @Override
    public CustomViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType)
    {
        Context context = viewGroup.getContext();
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) ;

        View view = inflater.inflate(R.layout.item_memo, viewGroup, false);

//        View view = LayoutInflater.from(viewGroup.getContext())
//                .inflate(R.layout.item_memo,viewGroup, false);
        CustomViewHolder viewHolder = new CustomViewHolder(view);
        return viewHolder;
    }


    // position 에 해당하는 데이터를 뷰홀더의 아이템 뷰에 표시
    @Override
    public void onBindViewHolder(@NonNull CustomViewHolder viewHolder, int position)
    {
        viewHolder.title.setText(mList.get(position).getTitle());
        viewHolder.contents.setText(mList.get(position).getContents());
    }

    // 전체 데이터 갯수 리턴
    @Override
    public int getItemCount() {
        // mList 비어 있으면 0리턴, 아니면 mList 사이즈 리턴
        // return (null != mList ? mList.size():0);
        return mList.size();
    }


}

 

 

MainActivity

package com.example.rvmemoapplication;

import android.app.Dialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ArrayList<Memo> mArrayList;
    private CustomAdapter mAdapter;


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

    @Override
    public void onBackPressed() {
        // super.onBackPressed();
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                finish();
            }
        });
        builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        builder.setMessage("Do you want to quit this app?");
        builder.setTitle("Exit Notification");
        builder.show();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mArrayList =new ArrayList<>();

        // [Done] 리사이클러뷰에 연결
        final RecyclerView mRecyclerView = (RecyclerView)findViewById(R.id.main_lv_memo_list);
        LinearLayoutManager mLinearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLinearLayoutManager);

        mAdapter = new CustomAdapter(mArrayList);
        mRecyclerView.setAdapter(mAdapter);

        // [Done] DBHelper 객체 생성
        String dbName = "Memo0.db";
        int dbVersion = 1;
        final DBHelper dbHelper;

        // [Done] db 에서 값 가져와서 Memo 클래스에 담아 mArrayList 에 담기
        dbHelper = new DBHelper(this,dbName,null,dbVersion);
        final SQLiteDatabase db = dbHelper.getReadableDatabase();
        String sql = "SELECT * FROM Memo0;";
        Cursor cursor = db.rawQuery(sql,null);
        final TextView memoCount = findViewById(R.id.main_tv_count);

        // [Done] 데이터 바뀐거 감지 할 수 있게끔
        mAdapter.notifyDataSetChanged();
        memoCount.setText(String.valueOf(cursor.getCount()));
        try{
            if(cursor.getCount() >0)
            {
                while(cursor.moveToNext())
                {
                    // DB에 있는 값들의 String 값들을 Memo 클래스 생성자에 담기.
                    Memo m = new Memo(cursor.getString(1),cursor.getString(2));
                    mArrayList.add(m);
                }
            }
        }finally {
            cursor.close();
        }

        final ImageButton backBtn = findViewById(R.id.main_btn_back);
        final ImageButton searchBtn = findViewById(R.id.main_btn_search);
        final ImageButton newBtn = findViewById(R.id.main_btn_add_text);

        // [Done] 뒤로가기 버튼
        backBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation anim = AnimationUtils.loadAnimation(
                        getApplicationContext(),
                        R.anim.scale_anim);
                backBtn.startAnimation(anim);

                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                });
                builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.cancel();
                    }
                });
                builder.setMessage("Do you want to quit this app?");
                builder.setTitle("Exit Notification");
                builder.show();
            }
        });

        String got_title_from_custom_Dialog;

        // 검색 버튼
        searchBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation anim = AnimationUtils.loadAnimation(
                        getApplicationContext(),
                        R.anim.scale_anim);
                searchBtn.startAnimation(anim);

                Handler delayHandler = new Handler();
                delayHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        // TODO

//                        customDialog = new CustomDialog(this);
//                        customDialog.show();
//
//                        private View.OnClickListener searchListener = new View.OnClickListener() {
//                            @Override
//                            public void onClick(View v) {
//
//                            }
//                        }

                    }
                }, 2000);

            }
        });

        // [Done] 새로운 메모 추가 버튼
        newBtn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
//                float deg = newBtn.getRotation() + 80F;
//                newBtn.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
                Animation anim = AnimationUtils.loadAnimation(
                        getApplicationContext(),
                        R.anim.rotate_anim);
                newBtn.startAnimation(anim);

                Handler delayHandler = new Handler();
                delayHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        // TODO
                        Intent intent = new Intent(MainActivity.this, DetailActivity.class);
                        startActivity(intent);
                    }
                }, 2000);

            }
        });

        //  [Done] 리사이클 뷰 내의 아이템 클릭시 → edit
        mAdapter.setOnItemClickListener(new CustomAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View v, int pos) {
                Intent intent = new Intent(MainActivity.this, EditActivity.class);
                Cursor cursor = (Cursor) dbHelper.getReadableDatabase().query("Memo0",null,null,null,null,null,null);
                cursor.moveToPosition(pos);

                String t_title = cursor.getString(1);
                String c_contents = cursor.getString(2);

                intent.putExtra("title",t_title);
                intent.putExtra("contents",c_contents);
                startActivity(intent);

            }
        });

        //  [Done] 리사이클 뷰 내의 아이템 롱클릭시 → 삭제 여부
        mAdapter.setOnItemLongClickListener(new CustomAdapter.OnItemLongClickListener() {
            @Override
            public void onItemLongClick(View v, final int pos) {
                final Cursor cursor = (Cursor) dbHelper.getReadableDatabase().query("Memo0",null,null,null,null,null,null);
                cursor.moveToPosition(pos);
                final String t_title = cursor.getString(1);
                // String c_contents = cursor.getString(2);
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

                builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // 메모 삭제 작업
                        String sql0 ="DELETE FROM Memo0 WHERE title = '"+ t_title +"';";
                        db.execSQL(sql0);
                        mArrayList.remove(pos);
                        mAdapter.notifyDataSetChanged();
                        memoCount.setText(String.valueOf(mArrayList.size()));
                    }
                });
                builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.cancel();
                    }
                });
                builder.setMessage("Do you want to delete this memo?");
                builder.setTitle("Delete Notification");
                builder.show();
            }
        });

    }
}

---

 

● 참고

Lottie를 이용해 화려한 애니메이션 넣기

blog.codejun.space/67

lottiefiles.com/popular?page=2

airbnb.io/lottie/#/android

postDelayed메소드를 이용한 delay 처리

blog.devez.net/362

안드로이드 리사이클러뷰 기본 사용법. (Android RecyclerView)

recipes4dev.tistory.com/154

RecyclerView 데이터 추가/ 편집 삭제

webnautes.tistory.com/1222

RecyclerView 아이템 클릭 이벤트

lesslate.github.io/android/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EB%A6%AC%EC%82%AC%EC%9D%B4%ED%81%B4%EB%9F%AC%EB%B7%B0-%ED%81%B4%EB%A6%AD/

webnautes.tistory.com/1300

RecyclerView 예제

webnautes.tistory.com/1214

Recyclerview

developer.android.com/jetpack/androidx/releases/recyclerview

ConstraintLayout 체인 설정하기

black-jin0427.tistory.com/40