안드로이드 리스트뷰에 사전식 인덱스를 Seekbar 로 구현하기

소프트웨어 개발은 손이나, 키보드로 하는게 아니라 머리와 툴로 하는것이다. 

음악용어 사전을 만들다가 보니 사전처럼 인덱스가 필요하다. 안드로이드에서 기본으로 지원하는 SectionIndexer 를 이용하려고 보니 좀 복잡하고 리스트 어댑터부터 다시 만들어야 하는것 같아서 다른 방법을 적용하기로 하고 Seekbar 를 사용하기로 함.  

안드로이드에서 기본으로 지원하는 SectionIndexer 를 이용하시려는 분은 참고하세요~ 

http://www.androidpub.com/97392 

SectionIndexer - 리스트에서 첫 글자 시작되는 곳으로 가기

구현할 화면을 미리 설계해보면 상단에 씨크바가 위치하고 아래가 리스트 뷰이다. 초기에만 리스트 전체를 보여주고 씨크바를 이동할 경우 전체가 출력되는 중에 해당 항목이 있는 위치로 이동하는 스타일이다. 

아래 화면의 "전체" 글씨는 씨크바의 반환값 0~39 에 따라 가~ 하 A~Z 글자로 변한다. 

layout 파일은 아래와 같이 설계한다. 주의할점은 Seekbar 의 값은 0 에서 max 값까지 움직인다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:orientation="vertical"

    >

    

    <LinearLayout 

android:orientation="horizontal"

android:layout_width="fill_parent" 

android:layout_height="wrap_content">

<SeekBar 

   android:id="@+id/seekbar"

   android:layout_weight="5"

   android:layout_width="0px"

   android:layout_height="wrap_content"

   android:max="39"

   android:progress="20"

   android:padding="10dip"

   />

<TextView  

   android:id="@+id/volume"

   android:layout_weight="1"

   android:layout_width="0px" 

   android:layout_height="wrap_content" 

   android:text="전체"

   style="@style/title3"

   android:layout_marginTop="5dp"

   />

</LinearLayout>   

 

    <ListView android:id="@+id/Cusom_List" 

        android:layout_width="match_parent" 

        android:layout_height="wrap_content"

    />

 

</LinearLayout>

씨크바의 이벤트 리스너를 넣기에 앞서 가나다...ABC... 이렇게 출력되는것을 맞추어 주기위해 배열로 인덱스를 선언한다.

그럼 인덱스 0부터 39까지 배열이 되며, 위 레이아웃 파일에서 선언한 android:max="39" 와 일치하게 된다.

String words[] = 

   

    { 

"가","나","다","라","마","바","사","아","자","차","카","타","파","하",

"A","B","C","D","E","F","G","H","I","J","K","L","M","N",

"O","P","Q","R","S","T","U","V","W","X","Y","Z"

     };

class 파일에서 씨크바의 이벤트 리스너를 등록하고 씨크바 옆에 Textview 변경 코드를 넣었다.

리스너 코드를 살펴보면 이해하기 쉽도록 전체를 넣고 해당 코드는 굵게 표시한다.

SeekBar mSeekBar;

TextView mVolume;

String words[] = 

   

    { 

"가","나","다","라","마","바","사","아","자","차","카","타","파","하",

"A","B","C","D","E","F","G","H","I","J","K","L","M","N",

"O","P","Q","R","S","T","U","V","W","X","Y","Z"

    };

 

    @Override

    public void onCreate(Bundle savedInstanceState) {

   

    setTheme(android.R.style.Theme_Light_NoTitleBar);

   

        super.onCreate(savedInstanceState);

        this.setTitle(R.string.titleedu008);

        setContentView(R.layout.musicsensemain);

 

        Array_Data = new ArrayList<Custom_List_Data>();

        

        for(int i = 0; i < musicwords.length/3; i++)

        {

        data = new Custom_List_Data(R.drawable.largemenuicon02, musicwords[i*3], musicwords[(i*3)+1], musicwords[(i*3)+2]);

            Array_Data.add(data);

        }

       

        ListView custom_list = (ListView) findViewById(R.id.Cusom_List);

        adapter = new Custom_List_Adapter(this,

                android.R.layout.simple_list_item_1, Array_Data);

        custom_list.setAdapter(adapter);

        

        //씨크바 추가 2013. 1. 4

        mSeekBar = (SeekBar)findViewById(R.id.seekbar);

mVolume = (TextView)findViewById(R.id.volume);

mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

public void onProgressChanged(SeekBar seekBar, int progress, 

boolean fromUser) {

mVolume.setText(words[progress]);

}

public void onStartTrackingTouch(SeekBar seekBar) {

}

public void onStopTrackingTouch(SeekBar seekBar) {

}

});

    }

이렇게 하면 씨크바가 정확히 동작한다. 물론 리스트 뷰는 구현되어져 있다고 치고~ ㅎ

남은과제는

1. 씨크바 인덱스가 변할때 리스트 뷰에 표시되는 사전들의 인덱스를 검색하여 맨위에 리스트 뷰를 이동시킨다.

2. 영문과 한글에 따라 동적으로 리스트 뷰를 재배치 한다. 특이하게도 음악용어에서는 한글 영어가 동일하게 순서만 바뀐다.

다음 포스팅은 위 두개를 해결한게 될것 같군요~ 

아래 구현 화면 2개 - 보기 쉽게 화면은 이동했다고 치고 올립니다.

     

개발자의 공유는 1만줄의 코드보다 강하다 !