[부스트코스:안드로이드 프로그래밍] 프로젝트 B 좋아요와 한줄평 리스트.

*해당 포스팅은 커넥트 재단의 edwith-[부스트 코스] 안드로이드 프로그래밍의 강의 자료를 바탕으로 작성되었습니다.

---

지난 시간에는 영화 상세 화면을 만들어보았습니다. 이번에는 좋아요 버튼과 싫어요 버튼을 눌렀을 때 동작하는 버튼 이벤트와 한줄평 리스트를 나타내는 것을 학습해보았습니다.

 

<KEY POINT>

1. Inflate 할 레이아웃 만들기.

2. 좋아요와 싫어요 버튼 구현하기.

 

1. ListView 의 CommetItem 을 Inflate 할 레이아웃 만들기.

 

 

리스트 뷰에 있는 각 항목들은 다른 레이아웃을 인플레이트 해서 받기.

먼저 리스트 뷰 에 각 항목을 받아올 레이아웃을 만들어 줍니다.

res-layout 에 xml 파일 하나 만들어 줍니다. 

comment_item_view.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"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageview"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="10dp"
        android:src="@drawable/user1"
        app:civ_border_width="2dp"
        app:civ_border_color="#FFCCCCCC"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/nameText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="kim71**"
            android:textSize="10dp"
            android:textStyle="bold"
            android:textColor="#000000"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="10분전"
                android:textStyle="bold"
                android:textColor="#928E8E"/>
            <RatingBar
                android:id="@+id/ratingBar"
                android:layout_marginRight="10dp"
                android:numStars="5"
                android:rating="5"
                style="?android:attr/ratingBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="#FFFFFF"
                android:layout_marginLeft="15dp"/>

        </LinearLayout>
        <TextView
            android:id="@+id/contentText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="적당히 재미있다. 오랜만에 보는 영화 잘 봤네요."
            android:layout_marginTop="8dp"
            android:textStyle="bold"
            android:textColor="#000000"
            />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="추천 0"
                android:textColor="#000000"/>
            <Button
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:text="신고하기"
                android:layout_marginLeft="8dp"
                android:background="#FFFFFF"
                android:textColor="#928E8E"/>

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

이 소스코드의 디자인 화면은 다음과 같습니다.

레이아웃을 만들어 주셨으면 이 레이아웃을 메인액티비티xml 코드에 있는 리스트 뷰에 넣어줘야합니다. 저번에도 말씀 드렸다시피 리스트 뷰는 껍데기에 불과하기 때문에 자바소스코드로 인플레이트 해주는 코드를 입력해주어야합니다.

 

인플레이트 해주는 코드를 만들어주기 위해서는 LinearLayout을 상속받는 클래스를 하나 만들어주셔야합니다.

저는 moiveritem 이라는 자바 클래스를 생성해주었습니다.

public class moiveritem extends LinearLayout {
    TextView textView1; // 이름 텍스트
    TextView textView2; // 내용 텍스트
    RatingBar ratingBar;




    CircleImageView circleImageView;
    public moiveritem(Context context) {
        super(context);
        init(context);
    }

    public moiveritem(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }




    private void init(Context context)
    {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.comment_item_view,this,true);

        textView1 = (TextView) findViewById(R.id.nameText);
        textView2 = (TextView) findViewById(R.id.contentText);
        circleImageView = (CircleImageView) findViewById(R.id.imageview);
        ratingBar = (RatingBar) findViewById(R.id.ratingBar);

    }

    public void setName(String name){textView1.setText(name);}
    public void setContent(String content){textView2.setText(content);}
    public void setImageView(int resId){
        circleImageView.setImageResource(resId);
    }
    public void setStar(float star){ratingBar.setRating(star);}

}

그리고 각 텍스트 뷰에 사용자의 id 와 ratingBar 값, 내용들을 변수에 저장하기 위한 클래스도 하나 만들어줍니다.

저는 movie 라는 클래스를 만들었습니다.

 

package com.example.mysummary1;


public class movie {
    String name;
    String content;
    int resId;
    float star;


    public movie(String name, String content, int resId, float star) {
        this.name = name;
        this.content = content;
        this.resId = resId;
        this.star = star;
    }

    public int getResId(){
        return resId;
    }

    public void setResId(){
        this.resId = resId;
    }


    public String getName() {
        return name;
    }


    public void setName(String name) {
        this.name = name;
    }


    public String getContent() {
        return content;
    }


    public void setContent(String content) {
        this.content = content;
    }


    public float getStar() {
        return star;
    }

    public void setStar(float star){
        this.star = star;
    }

    @Override
    public String toString() {
        return "movie{" +
                "name='" + name + '\'' +
                ", content='" + content + '\'' +
                ", resId=" + resId +
                ", star=" + star +
                '}';
    }

   
}

 

이러한 과정이 완료되셨다면. 

MainActivity 에서.

public class MainActivity extends AppCompatActivity{
	ListView listview; // 리스트뷰 객체 생성.
	MovieAdapter adapter; // 어댑터 객체 생성.
	protected void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);
        
        
        listView = (ListView) rootView.findViewById(R.id.listView);
        
        adapter = new MovieAdapter();
        
        adapter.items.add(new movie("kmc***","좋았습니다.",R.drawable.user1,3)); 
        //리스트뷰에 아이템 추가

        listView.setAdapter(adapter);
        //어댑터에 담겨있는 아이템들을 리스트 뷰에 담기.
       
        }
        //BaseAdapter 를 상속받는 Inner Class 생성
       class MovieaAdapter extends BaseAdapter{

        //데이터 관리

        ArrayList<movie> items = new ArrayList<movie>();

        @Override
        public int getCount() {
            return items.size();
        }


        public void additem(movie item){
            items.add(item);

        }

        @Override
        public Object getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
        
        
			//moiveritem 이라는 클래스를 따로 생성하는데 이 클래스는 LinearLayout을 상속받음.
            moiveritem view = null;

            if(convertView == null)
            {
                view = new moiveritem(getContext());
            }
            else{
                view = (moiveritem) convertView;
            }


            movie item = items.get(position);
            view.setName(item.getName());
            view.setContent(item.getContent());
            view.setImageView(item.getResId());
            view.setStar(item.getStar());

            return view;
        }
    }
}

 

2. 좋아요, 싫어요 버튼 구현하기.

 

좋아요와 싫어요 버튼을 눌렀을 때, 일어나는 이벤트를 알아보았습니다.

 

여기서 핵심포인트는 좋아요 버튼을 누르면 좋아요 숫자가 올라가고, 또 다시 누르면 또 올라가는게 아니라, 처음 상태로 돌아옵니다. 싫어요 버튼을 누르면 싫어요 숫자가 올라가고, 다시 한번 누르면 처음 상태로 돌아옵니다. 

좋아요 버튼이 눌러진 상태에서 싫어요 버튼을 누르면 좋아요 숫자가 원상태로 돌아오고 싫어요 숫자가 올라갑니다.

이러한 알고리즘은 조건문을 사용해서 구현하였습니다.

likeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(likestate){
                    downLikeCount();

                }
                else if(hatestate){
                    hatestate = false;
                    downHateCount();
                    upLikecCount();


                }
                else{
                    upLikecCount();
                }
                likestate = !likestate;

            }
        });

        hateButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(hatestate){
                    downHateCount();

                }
                else if(likestate){
                    likestate = false;
                    downLikeCount();
                    upHateCount();


                }
                else{
                    upHateCount();

                }
                hatestate = ! hatestate;
            }
        });