[Android Studio] 2-2.인플레이션과 리스트뷰

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

4. 인플레이션

앱 개발을 하다 보면 부분적으로 레이아웃을 추가해야 하는 경우가 있습니다. 주로 FrameLayout 사용하여 다른 레이아웃을 포함하는 형태로 많이 쓰이는데 Fragment 사용 시 자주 쓰입니다. 코드는 이와 같은 형태로 많이 사용됩니다.

ViewGroup rootview = (ViewGroup) inflater.inflate(R.layout.movie1,container,false);

<예제>

public class MainActivity extends AppCompatActivity {
    FrameLayout container;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        container = (FrameLayout) findViewById(R.id.container);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                inflater.inflate(R.layout.sub1, container,true);

            }
        });

    }
}

예제에서는 LayoutInflater 객체를 썼고 sub1의 레이아웃을 main액티비티의 FrameLayout에 넘겨주었습니다. 보통 포함하는 공간이라고 해서 변수로 container를 자주 사용합니다.

 

인플레이션 예제

5. 리스트뷰와 어댑터

리스트뷰는 여러개의 아이템을 순차적으로 보여주는 역할을 합니다. 주로 댓글, 목록 등 리스트를 표현해야 할 때 자수 사용합니다. 예를 들어 데이터가 있으면 어댑터에 형식을 맞추어 선택 위젯에 순차적으로 쌓아 표현합니다.

<예제(main)>

public class MainActivity extends AppCompatActivity {
    SingerAdapter adapter;
    EditText editText;
    EditText editText2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText) findViewById(R.id.editText);
        editText2 = (EditText) findViewById(R.id.editText2);
        ListView listView = (ListView) findViewById(R.id.listview);

        adapter = new SingerAdapter();

        adapter.additem(new SingerItem("걸스데이", "010-1111-2111",R.drawable.ic_launcher_foreground));
        adapter.additem(new SingerItem("여자친구", "010-1111-3111",R.drawable.ic_launcher_foreground));
        adapter.additem(new SingerItem("티아라", "010-1111-4111",R.drawable.ic_launcher_foreground));


        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                SingerItem item = (SingerItem) adapter.getItem(position);
                Toast.makeText(getApplicationContext(),"선택 : "+ item.getName(),Toast.LENGTH_LONG).show();
            }
        });

        Button button = (Button) findViewById(R.id.button2);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String name = editText.getText().toString();
                String mobile = editText2.getText().toString();
                adapter.additem(new SingerItem(name,mobile,R.drawable.ic_launcher_background));
                adapter.notifyDataSetChanged();
            }
        });
    }


    class SingerAdapter extends BaseAdapter {
        ArrayList<SingerItem> items = new ArrayList<SingerItem>();

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

        public void additem(SingerItem 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) {
            SingeritemView view = null;
            if (convertView == null){
                view = new SingeritemView(getApplicationContext());
            }else {
                view = (SingeritemView) convertView;
            }

            SingerItem item = items.get(position);
            view.setName(item.getName());
            view.setMobile(item.getMobile());
            view.setImageView(item.getResId());
            return view;
        }
    }
}

메인에서는 어댑터에 데이터를 받으며 ArrayList에 데이터를 item에 저장합니다. 어댑터를 구성하기 위해선 데이터를 저장하는 클래스와 리스트뷰로 표현하는 클래스를 만들어줘야 합니다. 여기서는 SingerItem라는 객체에 데이터를 저장하였고 SingerItemView에서 리스트뷰를 표현하였습니다.

<예제(data)>

public class SingerItem {
    String name;
    String mobile;
    int resId;
    public SingerItem(String name, String mobile,int resId) {
        this.name = name;
        this.mobile = mobile;
        this.resId = resId;
    }

    public String getName() {
        return name;
    }

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

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

    public int getResId() {
        return resId;
    }

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

    @Override
    public String toString() {
        return "SingerItem{" +
                "name='" + name + '\'' +
                ", mobile='" + mobile + '\'' +
                '}';
    }
}

생성자로 이름, 번호, 프로피사진을 저장하였고 set메서드와 get메서드를 이용하여 데이터를 호출하고 저장하였습니다. 메인 예제에서는 get으로 정보를 불러 View에 넘겨주었습니다.

 

<예제(View)>

public class SingeritemView extends LinearLayout {
    TextView textView ;
    TextView textView2;
    ImageView imageView;
    public SingeritemView(Context context) {
        super(context);
        init(context);
    }
    public SingeritemView(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.singer_item,this,true);

        textView = (TextView) findViewById(R.id.textview);
        textView2 = (TextView) findViewById(R.id.textview2);
        imageView = (ImageView)findViewById(R.id.imageview);
    }
    public void setName(String name){
        textView.setText(name);
    }
    public void setMobile(String mobile){
        textView2.setText(mobile);
    }
    public void setImageView(int resId){
        imageView.setImageResource(resId);
    }
}

View를 표현하는 클래스에선 init함수를 선언하여 데이터를 받아와 ListView의 레이아웃에 인플레이션 시켜주었습니다

메인에서는 Set메소드로 데이터를 받아와 인플레이션을 한 ListView에 데이터를 표현하였습니다. 

 

<project>

 

이번프로젝트에선 좋아요 버튼과 싫어요 버튼 구현 , 한줄평 리스트뷰 구현을 하였습니다. 버튼 구현은 숫자가 올라가도록 구현하였고 중복으로 눌려질 수 없도록 중복 시 한쪽은 수를 내리고 누른 쪽을 오르도록 구현하였습니다. 이 부분에서 Ture와 False를 잘 사용해야만 했고 알고리즘이 꽤나 까다로웠습니다.

리스트뷰 구현은 어댑터,item, itemView를 선언하여 구현하였고 이 부분이 상당히 어려웠습니다. 영상은 4주까지 진행한 상황이라 작성하기 버튼을 구현했는데 원래는 additem으로 미리 데이터를 주고 구현해야 합니다.

---

이번 2주 차는 레이아웃 구성과 다르게 자바 코드를 써야 해서 점점 어려움을 느꼈습니다. 하지만 버튼을 누를 때 이벤트가 처리가 되어 어플다운 어플을 구현하는 느낌이 들어 뿌듯하였습니다.