Custom List View 게시판 만들기

# ListView ( 리스트 뷰 )

  : 항목들을 수직으로 보여주는 어댑터 뷰로 상하로 스크롤이 가능 하다.

: 항목들은 이 뷰에 설정된 어댑터로 부터 제공 된다. 

( 어댑터가 리스트 뷰와 데이터의 브릿지 역할을 하는 셈! )

개인적으로 이해할 때 든 생각인데 자바에서 데이터 베이스와 연동해서 사용하는 느낌이다. 

다른 부분도 있지만..

자바 클래스 ( MainActivity.java )에서 요청하면 아이템 데이터 클래스 ( ListViewItem.java / DTO 역할 ) 에서 

데이터를 제공하고 어댑터 ( ListViewAdapter.java / DAO )가 데이터에 대한 작업을 하는 ..?

쨌든 내가 만들고자 하는 건 게시판 형식이므로 단순한 리스트 뷰가 아닌 커스텀 뷰를 만들고자 한다.

---

# 1. ListView 만들기

: listview가 표시될 영역 지정

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.mini_mo.capstone.MainPage"
    tools:showIn="@layout/app_bar_main_page">


    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

# 2. List Item 만들기 ( list_item.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:weightSum="10"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/user" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="9"
            android:orientation="vertical"
            android:weightSum="10">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_vertical"
                android:text="New Text"
                android:textSize="24dp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="6"
                android:text="New Text"
                android:textSize="16dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/button"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Button" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Button" />                
            </LinearLayout>            
        </LinearLayout>  
</LinearLayout>

3. List item 데이터에 대한 클래스 ( ListViewiItem.java )

   : DTO 역할

   : 생성자, 접근자 메소드

4. ListView Adapter

   : 텍스트 편집없이 간편히 사용하기 위해 Test 중이라는 주석을 달아 놨다.

   : addItem을 할 때 택스트를 바꾸고 싶다면 Test중의 주석을 풀고 사용하면 된다.

public class ListViewAdapter extends BaseAdapter {
    // Adapter에 추가된 데이터를 저장하기 위한 ArrayList
    private ArrayList<ListViewItem> listViewItemList = new ArrayList<ListViewItem>() ;

    // ListViewAdapter의 생성자
    public ListViewAdapter() {

    }

    // Adapter에 사용되는 데이터의 개수를 리턴. : 필수 구현
    @Override
    public int getCount() {
        return listViewItemList.size() ;
    }

    // position : 리턴 할 자식 뷰의 위치
    // convertView : 메소드 호출 시 position에 위치하는 자식 뷰 ( if == null 자식뷰 생성 )
    // parent : 리턴할 부모 뷰, 어댑터 뷰
    // position에 위치한 데이터를 화면에 출력하는데 사용될 View를 리턴. : 필수 구현
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        final int pos = position;
        final Context context = parent.getContext();

        // "listview_item" Layout을 inflate하여 convertView 참조 획득.
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.listview_item, parent, false);
        }

        // 화면에 표시될 View(Layout이 inflate된)으로부터 위젯에 대한 참조 획득
        ImageView iconImageView = (ImageView) convertView.findViewById(R.id.imageView1) ;
        TextView titleTextView = (TextView) convertView.findViewById(R.id.textView1) ;
        TextView descTextView = (TextView) convertView.findViewById(R.id.textView2) ;

        // Data Set(listViewItemList)에서 position에 위치한 데이터 참조 획득
        ListViewItem listViewItem = listViewItemList.get(position);

        // 아이템 내 각 위젯에 데이터 반영 ( Test 중 )
        //iconImageView.setImageDrawable(listViewItem.getIcon());
        //titleTextView.setText(listViewItem.getTitle());
        //descTextView.setText(listViewItem.getDesc());

        return convertView;
    }

    // 지정한 위치(position)에 있는 데이터와 관계된 아이템(row)의 ID를 리턴. : 필수 구현
    @Override
    public long getItemId(int position) {
        return position ;
    }

    // 지정한 위치(position)에 있는 데이터 리턴 : 필수 구현
    @Override
    public Object getItem(int position) {
        return listViewItemList.get(position) ;
    }

    // 아이템 데이터 추가를 위한 함수.
    public void addItem(Drawable icon, String title, String desc) {
        ListViewItem item = new ListViewItem();

        item.setIcon(icon);
        item.setTitle(title);
        item.setDesc(desc);

        listViewItemList.add(item);
    }

    // 아이템 데이터 추가를 위한 함수. ( Test 용 )
    public void addItem() {
        ListViewItem item = new ListViewItem();
        listViewItemList.add(item);
    }
}

4. ListView와 Adapter 생성 ( MainActivity.java )

public class MainActivity extends AppCompatActivity {

    private ListView listview;
    private ListViewAdapter adapter;

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

        // Adapter 생성
        adapter = new ListViewAdapter();

        // 리스트뷰 객체 생성 및 Adapter 설정
        listview = (ListView) findViewById(R.id.listview);
        listview.setAdapter(adapter);

        // 리스트 뷰 아이템 추가.
        adapter.addItem();
        adapter.addItem();
        adapter.addItem();
    }
}

---

3개가 추가 된 것을 볼 수 있는데 리스트 아이템 레이아웃의 버튼이 보이지 않는다 ㅠ_ㅠ...

이유가 listview_item.xml 에서 가장 처음의 레이아웃의 높이가 match_parent로 지정 되어 있어서

리스트 뷰의 크기 만큼 축소 되어 나타내지다 생기는 현상인 것 같다.

match_parent가 아니라 wrap_content로 바꿔 준 뒤 버튼이 표시 되게끔 수정한 후 

이어서 글을 올리겠다 !