[Android] 안드로이드 Fragment에서 ListView와 Adpater 사용
모바일앱을 개발하던 중에 ListView를 사용할 일이 생겼다.
레이아웃에서 일일이 여러가지의 데이터를 넣는 것 보다 ListView를 사용하여 Adapter로 한번에 관리하는 것이 훨씬 쉽다고 판단했다.
구현하는 과정을 한번 보도록 하겠다.
ListView 구현
기본적으로 Webview를 구현하기 위해 쓰일 Activity를 만들어주었다.
##### fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<ListView
android:id="@+id/listview_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
먼저 위와 같이 메인 레이아웃을 설정해주었다.
리스트뷰 하나만 넣었다.
listview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/listitem_image"
android:src="@drawable/food_kimchirice"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp">
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:orientation="vertical">
<TextView
android:id="@+id/listitem_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_marginBottom="10dp"
android:text="음식이름"
android:textColor="@color/colorBlack">
</TextView>
<TextView
android:id="@+id/listitem_ingredient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:text="음식재료"
android:layout_marginRight="10dp">
</TextView>
</LinearLayout>
</LinearLayout>
그리고 listview_item이라는 리소스를 하나 더 만들어주었다.
위 레이아웃 리소스는 Listview에 각각의 데이터 항목을 표현하기 위한 레이아웃 리소스이다.
위처럼 작성하면 아래와 같은 형태로 나오게 된다.
SimpleData.java
public class SampleData {
private int image;
private String title;
private String ingredient;
public SampleData(int image, String title, String ingredient){
this.image = image;
this.title = title;
this.ingredient = ingredient;
}
public int getImage()
{
return this.image;
}
public String getTitle()
{
return this.title;
}
public String getIngredient()
{
return this.ingredient;
}
}
그 다음 데이터 클래스를 생성해주었다.
레시피의 음식 정보를 담기 위해 생성한 클래스인데 음식이름, 재료, 사진 이렇게 3가지로 구성되어있다.
음식사진을 담기위한 image가 있는 리소스 id를 담기 위해 int로 설정해주고 나머지는 String으로 설정해준다음 생성자 함수를 통해 각 멤버 변수의 데이터 값들을 Set and Get하여 멤버변수의 값들을 return 하도록 구현하였다.
Adapter 구현 및 ListView와 연결하기
MyAdapter.java
public class MyAdapter extends BaseAdapter {
Context mContext = null;
LayoutInflater mLayoutInflater = null;
ArrayList<SampleData> sample;
public MyAdapter(Context context, ArrayList<SampleData> data) {
mContext = context;
sample = data;
mLayoutInflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return sample.size();
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public SampleData getItem(int position) {
return sample.get(position);
}
@Override
public View getView(int position, View converView, ViewGroup parent) {
View view = mLayoutInflater.inflate(R.layout.listview_item, null);
ImageView imageView = (ImageView)view.findViewById(R.id.listitem_image);
TextView title = (TextView)view.findViewById(R.id.listitem_name);
TextView gredient = (TextView)view.findViewById(R.id.listitem_ingredient);
imageView.setImageResource(sample.get(position).getImage());
title.setText(sample.get(position).getTitle());
gredient.setText(sample.get(position).getIngredient());
return view;
}
}
BaseAdpater를 상속받은 MyAdapter를 생성했다.
생성자 함수를 통해 ListView로 표현하기 위한 사용자 정의 데이터인 ArrayList형 변수를 넘겨받아 sample이라는 참조 변수가 참조하도록 하였다.
그리고 getView()함수를 만들어서 데이터 항목에 대하여 ListView로 표현할 수 있도록 해주었다.
MainFragment.java
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_diet, container, false);
this.InitializeRecipeData();
ListView listView = (ListView)rootView.findViewById(R.id.listview_list);
final MyAdapter myAdapter = new MyAdapter(getContext(),recipeList);
listView.setAdapter(myAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
@Override
public void onItemClick(AdapterView parent, View v, int position, long id){
Toast.makeText(getContext(),
myAdapter.getItem(position).getTitle(),
Toast.LENGTH_LONG).show();
if (myAdapter.getItem(position).getTitle() == "김치칼국수") {
Intent intent = new Intent(getContext(), kimchinoodleActivity.class);
startActivity(intent);
}
if (myAdapter.getItem(position).getTitle() == "김치볶음밥") {
Intent intent = new Intent(getContext(), kimchiriceActivity.class);
startActivity(intent);
}
if (myAdapter.getItem(position).getTitle() == "김치찌개") {
Intent intent = new Intent(getContext(), kimchizzigaeActivity.class);
startActivity(intent);
}
}
});
return rootView;
}
public void InitializeRecipeData()
{
recipeList = new ArrayList<SampleData>();
recipeList.add(new SampleData(R.drawable.food_kimchinoodle, "김치칼국수","김치랑 칼국수"));
recipeList.add(new SampleData(R.drawable.food_kimchirice, "김치볶음밥","김치랑 볶음밥"));
recipeList.add(new SampleData(R.drawable.food_kimchizzigae, "김치찌개","김치랑 물"));
}
이제 Adapter와 ListView를 연결하도록 하겠다. 그전에 Adapter에 넘겨줄 데이터를 초기화해야한다.
그리하기 위해 initializeRecipeData()라는 함수를 만들어주고 Type이 SampleData인 ArrayList에 데이터를 추가해준다.
그리고 MyAdapter객체를 생성해주고 recipeDataList를 넘겨주어 해당 Adapter를 관리하도록 한다.
그런 다음에 ListView의 setAdapter() 함수를 통해 어댑터와 리스트뷰를 연결해준다.
그렇다면 정상적으로 적용이 된 것을 볼 수 있다.