[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -2-

이제 실제 메소드들을 보면서 분석해 보겠습니다.
일단 제일 먼저 실행 될 것 같은 init() 메소드를 보죠. 주석에도 Initialize (초기화)라고 돼 있으니까 왠지 이게 제일 먼저 실행 될 것 같네요.
(오버로딩 된 ScreenViewFlipper 메소드를 봐도 이 init() 메소드를 불러오는 것 만 있습니다.)

이 그림은 viewFlipper를 잘 보여주는 것 같아 구글에서 갖다 썼습니다.

이 화면에 대한 소스나 설명은 여기로 가시면 보실 수 있습니다.

    public void init(Context context) {
        setBackgroundColor(0xffbfbfbf);

        // Layout inflation
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.screenview, this, true);

        buttonLayout = (LinearLayout) findViewById(R.id.buttonLayout);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
        flipper.setOnTouchListener(this);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        params.leftMargin = 50;

        indexButtons = new ImageView[countIndexes];
        views = new TextView[countIndexes];
        for(int i = 0; i < countIndexes; i++) {
            indexButtons[i] = new ImageView(context);

            if (i == currentIndex) {
                indexButtons[i].setImageResource(R.drawable.green);
            } else {
                indexButtons[i].setImageResource(R.drawable.white);
            }

            indexButtons[i].setPadding(10, 10, 10, 10);
            buttonLayout.addView(indexButtons[i], params);

            TextView curView = new TextView(context);
            curView.setText("View #" + i);
            curView.setTextColor(Color.RED);
            curView.setTextSize(32);
            views[i] = curView;

            flipper.addView(views[i]);
        }
    }

    우선 화면의 배경색을 세팅했네요. 0xffbfbfbf 이게 무슨 색인지는 잘 모르겠습니다. 나중에 실행 시켜보면 알겠죠.
    그 다음 LayoutInflater 의 instance를 만들고 여기에 context의 SystemService 에서 layout inflater를 대입했습니다.
   
    이 LayoutInflater에 대해 google developer 사이트에서는 아래와 같이 설명해 놓았습니다.
    layout XML 파일을 해당하는 View object로 초기화 하는 것. getLayoutInflater()나 getSystemService(String)을 가지고 standard LayoutInflater 인스턴스를 가져옴.
    이 standard LayoutInflater 인스턴스는 현재의 context에 이미 있고 디바이스에 맞게 configure 된 것들 입니다.
   
    즉 XML에서 선언된 어떤 view를 가져와서 그 위에 object들을 배열할 때 사용되는가 봅니다.
   
    그 아래 줄을 보시면 이 inflater에 아까 봤던 screenview.xml을 넣었습니다.
    이 xml 에는 <LinearLayout> (id=buttonLayout)과 <ViewFlipper> (id=flipper)가 들어 있었죠.
    이제 이 inflater가 이것들을 구체적으로 어떻게 사용하는지 볼까요?
   
    아까 예상했던 대로 buttonLayout 에는 screenview.xml에 있는 id가 buttonLayout 이라는 LinearLayout 을 세팅합니다.
    다음줄엔 flipper 에 id가 flipper 인 ViewFlipper를 세팅하구요. 이 flipper에는 touchListener를 세팅합니다.
   
    예상컨데 이 buttonLayout에는 button들 (3개로 선언했었죠?)이 배치되겠고 flipper에는 표시될 screen들이 들어가겠네요.
    이 screen을 손가락으로 touch(slide) 하면 화면이 바뀌겠구요.
   
    이것을 구체적으로 어떻게 코딩하는지 계속 알아 보겠습니다.

   
    LinearLayout.LayoutParams 인스턴스를 만들고 여기에 이 view에 대한 width와 height 가 Wrap_content 인 LayoutParams를 대입시킵니다.
    그리고 이 params 에 leftMargin을 50으로 세팅하구요.
   
    이 값은 나중에 아까 선언했던 buttonLayout 에 적용이 되겠죠.
   
    다음에는 indexButtons에 new ImageView[countIndexes]를 대입합니다. countIndexes는 제일 처음에 3으로 선언했었죠?
   
    그리고나서 이 countIndexes 만큼 for문을 돌립니다.
    그 for문을 돌고 나면 3개의 ImageView 가 만들어 질 거고 이 이미지 뷰들은 indexButtons 배열에 담길겁니다.
    만약 i가 0이면 즉 제일 첫번째 것이면 그 ImageView에는 green.png 가 대입 되겠고 그렇지 않으면 white.png가 대입이 될 겁니다.
    그러니까 첫번째는 초록색 버튼이 되고 나머지 두 버튼은 흰색이 되겠네요.
    이 ImageView에 padding 값을 주고 buttonLayout에 지금까지 세팅한 ImageView(indexButtons)를 넣습니다.
    buttonLayout.addView(indexButtons[i], params);
    보시면 params 도 pass 하죠? 이 params는 아까 leftMargin을 50으로 세팅한 겁니다.
   
    그 다음엔 TextView 를 하나 만드네요.
    이 텍스트 뷰에는 View # = i 라는 텍스트가 있고 색은 빨간색이고 size는 32 라고 세팅이 돼 있습니다.
    이 값을 views 배열에 넣는데요.
   
    저 for 문 바로 위에 보니까 vews 라는 TextView 배열이 선언돼 있네요. 배열 크기도 countIndexes 즉 3개로 선언돼 있구요.
    이 부분을 보지 못하고 그냥 넘어갔네요.
   
    이 text를 가진 views 배열을 flipper에 넣는 것이 이 for 문의 마지막이자 이 init메소드의 마지막 입니다.
   
    자 여기까지가 바로 screenview.xml에서 그냥 내용 없이 선언된 LinearLayout 과 ViewFlipper에 내용을 채워 넣은 겁니다.
    LinearLayout 에는 세개의 버튼이 놓여지게 되고 버튼 색은 녹색, 흰색, 흰색이 세팅됐습니다.
    그리고 ViewFlipper 에도 3개의 내용이 들어가 있는데 View #1, View #2, View #3 이라는 텍스트가 있습니다.
    그 텍스트들은 빨간색이고 크기가 32입니다.
   
    이제 display 하는 것은 모두 완료 됐습니다.
   
    이제 볼 것은 뭘까요?
    아까 ViewFlipper에 touch 리스너를 달았습니다.
   
    그러면 ViewFlipper에 어떤 touch 이벤트가 발생했을 때 다른 동작을 할 수 있도록 코딩을 할 수 있는데요.
    바로 그 코딩을 하는 onTouch() 메소드를 분석해 봐야 할 차례입니다.