앱 만들기/안드로이드

안드로이드 ListView 만들기 ( 기본 형)

나도 처음이야 2020. 3. 30.

스마트 폰에선 위와 같은 화면이 많이 사용됩니다. 바로 ListView입니다.

ListView에 이미지 와 영상 등이 들어가면 우리가 흔히 보는 예쁜 화면들이 되는 것이죠.

그럼 오늘은 위 화면을 만들어 보겠습니다. 바로 ListView 기본 형입니다.

 

ListView 만들기.

1. XML 파일에 ListView 를 추가하기.

  - 먼저 화면을 구성합니다. Lagacy->ListView 를 자신의 구성한 레이아웃 파일에 세팅하고, ID 도 설정해 주세요.

- 화면 구성 끝 -

사실 이렇게 구성을 하고 나서, 앱을 실행 시켜보면 아무런 변화가 없습니다. 

즉, 빈 화면이 나옵니다. ListView 는 Button 혹은 TextView와 같은 UI 와는 달리 개발자가 설정을 해주지 않으면 화면에 나타나지 않는 UI 컴포넌트입니다. 그럼 이제 코드에서 ListView를 설정해야겠죠.

 

2. 코드에서 ListView 설정하기.  

public class MainActivity extends AppCompatActivity {

    //뷰의 주소값을 담을 참조 변수
    ListView list;
    //리스트 뷰 구성을 위해 필요한 문자열 배열
    String[] data ={ "아이템1" , "아이템2", "아이템3", "아이템4", "아이템5"
                     ,"아이템6" , "아이템7",  "아이템8", "아이템9", "아이템10"
                     ,"아이템11", "리스트12","아이템13", "아이템14", "아이템15"
                     ,"아이템16", "아이템17", "아이템18" , "아이템19", "아이템20"};

    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView)findViewById(R.id.textView);

        // 리스트 뷰의 주소값을 가져오기.
        list = (ListView) findViewById(R.id.list);
        // 안드로이드에서 제공하는 레이아웃 과 해당 레이아웃에 표현될 데이터 설정하기!
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, data);
        list.setAdapter(adapter);

첫 번째로, ListView를 담을 참조 변수 list를 설정합니다.

여기까지는 일반 UI와 동일하죠? 

 

그럼, 차이점은 바로 색상 코드입니다. 

ArrayAdapter라는 클래스를 사용해서 ListView 객체에 담을 데이터를 설정해주는 것입니다.

여기서 중요한 것은 두 가지 입니다.

1. 리스트 항목의 갯수 - 위 코드에서는 data 배열안의 개수가 됩니다.

   ( 즉, 개발자가 입력한 데이터 필드의 항목 수 만큼 리스트가 생성됩니다. 그리고 리스트의 내용도 data 배열의 내용이 됩니다.)

2. 한 리스트 화면을 어떻게 보여줄것인가?

   ( 개발자가 만들 수 도 있고 안드로이드에서 기본으로 제공하는 것을 사용할 수 도 있습니다)

바로, android.R.layout.simple_list_item_1 가 안드로이드에서 제공하는 레이아웃 파일이며, 

리스트 뷰에서 한 줄에 어떻게 표현할 지에 대한 화면 구성입니다. 

해당 레이아웃은 "Ctl+마우스 우클릭"을 하면 하기처럼 세부화면을 볼 수 있습니다.

( 한열로 된 TextView 입니다. 한 열씩 TextView 에 data 내용을 보여줌)

마지막으론,

ListView 에 설정된 아답터를 연결해줍니다. list.setAdapter() 함수를 통해서요.

여기 까지 구성하면, 화면에 리스트 뷰가 보이게 됩니다.

 

3. 리스트 Listener 만들기.

  - 리스트를 누르면 textview 에 현재 누른 내용을 보이도록...

  // Listener 생성 및 연결하기
        ListItemListener itemListener = new ListItemListener();
        list.setOnItemClickListener(itemListener);
    }

    class ListItemListener implements AdapterView.OnItemClickListener{
        //항목을 터치하면 호출되는 메서드
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                textView.setText( data[position] + " 입니다.");
        }
    }

   - 위와 같이, 리스너 클래스를 만들어서 리스트에 연결합니다.

     OnItemClickListener 인터페이스를 구현해서 텍스트 뷰에 내용을 출력하게 되죠 ^^

 

 

텍스트 이외에 사진 이나 여러 부가 정보를 리스트에 표현하고 싶다면,,,

바로 Adapter 를 개발자가 직접 구성해주면 됩니다. 레이아웃 파일도 같이 말이죠/

이건 다음 포스팅에서 만나요~ 

감사합니다.

 

 

   

반응형

댓글