[Android] 안드로이드 RecyclerView로 인스타그램 만들어보기 ( feat.Adapter )

👼🏻 초보 안드로이드 개발자가 매번 구글링하기 싫어서 정리하는 블로그 👼🏻 

 

안녕하세요! 🙋🏻‍♀️

이번엔 List 형식의 마지막! RecyclerView 를 사용해서 인스타그램비스무리한거 만들어볼거에요!!

( ❌ 인스타그램을 안해서.... 좀 허접하게 보일 수 있는것 주의 ❌ )

 

 

• ListView 1탄

• ListView 2탄

• GridView 1탄

• GridView 2탄

 

 

일단 구현 영상부터 갑니다욧!

 

인스타그램을 사랑하시는 분들껜 죄송합니다....🙏🏻

아이콘은 icons8 에서 가져왔습니다.
이미지는 제가 직접 만들었습니다.

 

( 제 착각일수도있지만 ) 인스타랑 좀 비슷하지 않나요...? 

아님말구!!!!!!!!!!!! 갑시다!!!!!!!!!!!!!!! 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    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"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#B332530C"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="인⭐️그램"
            android:textColor="@color/white"
            android:textSize="20dp"
            android:gravity="center"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="9"
        android:paddingTop="10dp"
        >
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rc_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    </LinearLayout>

</LinearLayout>

 

정말 간단하죠??

RecyclerView 에 들어가는 리스트 한칸한칸을 커스텀을 해줄거에요!!

card_view.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusable="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="10dp"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            >
            <ImageView
                android:id="@+id/iv_profile"
                android:layout_width="150px"
                android:layout_height="150px"
                android:src="@drawable/profile"
                />
            <TextView
                android:id="@+id/tv_profile_name"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="아사안개"
                android:textSize="15dp"
                android:textStyle="bold"
                android:gravity="center"
                android:paddingLeft="20dp"
                />
        </LinearLayout>
        <ImageView
            android:id="@+id/iv_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/recycle"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginBottom="10dp"
            >
            <ImageView
                android:layout_width="100px"
                android:layout_height="100px"
                android:src="@drawable/heart"
                android:background="@color/white"
                android:layout_marginRight="10dp"
                />
            <ImageView
                android:layout_width="100px"
                android:layout_height="100px"
                android:src="@drawable/message"
                android:background="@color/white"
                />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="right"
                >
                <ImageView
                    android:layout_width="100px"
                    android:layout_height="100px"
                    android:src="@drawable/bookmark"
                    />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>


</androidx.cardview.widget.CardView>

 

보통 저는 제일 큰 레이아웃을 LinearLayout 으로 많이 감싸는데,

이번에 한건 CardView 라는 위젯을 쓴거에요!

그럼 영상처럼 리스트 한칸한칸이 카드처럼 보일 수 있어요!!!

반응형

이제 열심히 그린 뷰를 연결 해 줍시다!

어디부터?

어뎁터부터 😉

 

RecyclerAdapter

import android.app.AlertDialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.recyclerview.widget.RecyclerView;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    // 전역변수 선언
    // 리스트의 각 한칸한칸 이미지 배열 선언
    private  int[] contentImg = { R.drawable.recycle1, R.drawable.recycle2, R.drawable.recycle3,
            R.drawable.recycle4, R.drawable.recycle5, R.drawable.recycle6 };
    private Context mContext;

    // 생성자
    public RecyclerAdapter(Context mContext) {
        this.mContext = mContext;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view,parent,false);
        ViewHolder viewHolder = new ViewHolder(v);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.iv_content.setImageResource(contentImg[position]);
    }

    @Override
    public int getItemCount() {
        return contentImg.length;
    }

    // 뷰홀더 생성 필수!
    public class ViewHolder extends RecyclerView.ViewHolder{
       public ImageView iv_content;

       public ViewHolder(View itemView) {
           super(itemView);
           iv_content = itemView.findViewById(R.id.iv_content);

           itemView.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   int position = getAdapterPosition(); // 리스트 중 어느걸 선택했는지

                   View dialogView = View.inflate(mContext, R.layout.dialog,null);
                   AlertDialog.Builder dlg = new AlertDialog.Builder(mContext);
                   ImageView iv_content_alert = dialogView.findViewById(R.id.iv_content_alert);
                   iv_content_alert.setImageResource(contentImg[position]);
                   dlg.setView(dialogView);
                   dlg.show();
               }
           });

       }

   }
}

처음으로 등장한 RecyclerView.Adapter 는 ViewHolder 를 이용해서 생성가능합니다!

그러므로 ViewHolder 는 필수입니다!!!!!

SMALL

어뎁터가 생성이 되었으니 사용해봅시다!

MainActivity

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    // 전역변수
    RecyclerView rc_view;
    RecyclerView.LayoutManager layoutManager;
    RecyclerView.Adapter adapter;

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

        // xml 연결
        rc_view = findViewById(R.id.rc_view);
        
        // LayoutManager 준비 및 연결
        layoutManager = new LinearLayoutManager(this);
        rc_view.setLayoutManager(layoutManager);

        // adapter 준비 및 연결
        adapter = new RecyclerAdapter(MainActivity.this);
        rc_view.setAdapter(adapter);
    }
}

 

짜잔! 이렇게 준비된걸 다 쓰게되면 끝!!!!!!!!!

RecyclerView 는 아주 유용하게, 많은 기능을 사용할 수 있기에 자주 씁니다!

많은 곳에서 사용해보세요!!!

오늘도 끝!

 

감사합니다 🥰