ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 셀렉트바 // 팝업윈도우를 이용한 셀렉트바 만들기 2부
    안드로이드/학습&강좌 2011. 5. 8. 02:47
    1부에선 javascript가 제공하는 셀렉트바를 안드로이드에서 만들었을때의 모양과 화면에 대해 설명 했었다.

    2부에서는 그에 대한 코드에 대한 개념만 설명하도록 하겠습니다.

    일단 레이아웃 부분의 코드들로 구성해 보자면 총 3개가 들어 가게 된다.

    첫번째 바탕이 될 레이아웃과 두번째 팝업 리스트를 구성할 레이아웃 세번째는 팝업리스트 안에 들어갈 레이아웃이 되겠다.

    다시 한번 말하지만 참 간단한 모양의 UI이지만 코드 작업은 상당히 귀찮게 구성되어있다.




    1 . popup_back.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="@drawable/green_editbox_s">
     <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="5dip"
      android:gravity="center"
      android:layout_weight="1">
      <ToggleButton
       android:id="@+id/btn_select"
       android:textColor="#ffffff"
       android:paddingRight="28dip"
       android:textOn="Open"
       android:textOff="Close"
       android:textSize="15dip"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/store_menu_togle" />
      <ToggleButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/btn_select"
       
       android:layout_marginLeft="20dip"
       android:textColor="#ffffff"
       android:paddingRight="28dip"
       android:textOn="Open"
       android:textOff="Close"
       android:textSize="15dip"
       android:background="@drawable/store_menu_togle"
       android:id="@+id/btn_note_order" />

     </LinearLayout>

    </LinearLayout>





    2 . search_list.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     <ListView
      android:id="@+id/popup_list"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:cacheColorHint="#00000000"
      android:transcriptMode="disabled"
      android:keepScreenOn="true"
      android:divider="#0000ff00"
      android:dividerHeight="0sp"
      />
    </LinearLayout>



    3 . search_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="center">
     <TextView
      android:id="@+id/popup_txt"
      android:gravity="center"
      android:textColor="#262624"
      android:text="1"
      android:layout_width="wrap_content"
      android:layout_height="29dip" />
    </LinearLayout>

    이미지는 저작권의 문제때문에 추가 할 수 없으므로 이해 해 주시길 바랍니다.

    background 는 각자 아무거나 첨부해서 해보시거나 없애셔두 별 문제 없을 듯 합니다.

    리스트뷰에서
      android:cacheColorHint="#00000000"
      android:transcriptMode="disabled"
      android:keepScreenOn="true"
      android:divider="#0000ff00"
      android:dividerHeight="0sp"

    이부분의 코드는 배경 라인을 없애는 것과 투명으로 만드는 것을 의미 한다.

    이부분을 첨부 하지 않게 된다면 리스트 옆부분에 보기 흉한 가로 라인이 생기는 것을 볼 수 있을 것이다.

    레이아웃이 세개가 들어 가니 이제 이 부분을 활용 하는 코드를 살펴 보자.


    Study_PopupList.java

    package epong.exam;
    import java.util.ArrayList;
    import android.app.Activity;
    import android.graphics.drawable.BitmapDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.AdapterView;
    import android.widget.ListView;
    import android.widget.PopupWindow;
    import android.widget.ToggleButton;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.LinearLayout.LayoutParams;
    import android.widget.PopupWindow.OnDismissListener;
    public class Study_PopupList extends Activity{
     
     /** The popup. */
        private View      m_popupview;
        private PopupWindow m_popup;
        private ListView  m_popuplist;
       
       
        ToggleButton btnSelect, btnOption;
       
        String[][] str_searchLatest = { { "new", "최신" },
             { "best", "베스트" },
             { "sample", "샘플" },
             { "recommand", "추천" } };
       
        ArrayList<AAA> arr_searchLatest  = new ArrayList<AAA>();
        AAAAdapter searchAdapter;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super.onCreate(savedInstanceState);
         setContentView(R.layout.popup_back);
         
         popupinit();
         
         btnSelect = (ToggleButton)findViewById(R.id.btn_select);
         btnSelect.setOnClickListener(new OnClickListener() {
      
       @Override
       public void onClick(View v) {
        btnSelect.setChecked(true);
        m_popuplist.setAdapter(searchAdapter);
        m_popup.showAsDropDown(v);
       }
      });
         
         btnOption = (ToggleButton)findViewById(R.id.btn_note_order);
         btnOption.setOnClickListener(new OnClickListener() {
       
       @Override
       public void onClick(View v) {
        btnOption.setChecked(true);
        m_popuplist.setAdapter(searchAdapter);
        m_popup.showAsDropDown(v);
        
       }
      });
         
        }
       
        private void popupinit() {
            m_popupview = View.inflate(this, R.layout.search_list, null);
            m_popup = new PopupWindow(m_popupview, LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT, true);
    //        m_popup.setOutsideTouchable(true);
            m_popup.setClippingEnabled(false);
            m_popup.setBackgroundDrawable(new BitmapDrawable());
            m_popup.setOnDismissListener(new OnDismissListener() {
       
       @Override
       public void onDismiss() {
        btnSelect.setChecked(false);
        btnOption.setChecked(false);
       }
      });
            m_popuplist = (ListView) m_popupview.findViewById(R.id.popup_list);
            m_popuplist.setOnItemClickListener(new OnItemClickListener() {
       @Override
       public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
         long arg3) {
        btnSelect.setChecked(false);
        btnOption.setChecked(false);
        m_popup.dismiss();
        
       }
      });
           
            m_popuplist.setDivider(null);
            // 최신 소트 자료는 수동 FIX
            for (int i = 0; i < 4; i++) {
                AAA latest_search = new AAA();
                latest_search.SEARCH_ITEM = str_searchLatest[i][1];
                latest_search.SEARCH_CODE = str_searchLatest[i][0];
                arr_searchLatest.add(latest_search);
            }
            searchAdapter = new AAAAdapter(getApplicationContext(), R.layout.search_list, arr_searchLatest);
        }
       
        public class AAA{
      public String SEARCH_CODE;
      public String SEARCH_ITEM;
     }
    }




    AAAAdapter.java

    package epong.exam;
    import java.util.ArrayList;
    import epong.exam.Study_PopupList.AAA;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.LinearLayout;
    import android.widget.TextView;

    public class AAAAdapter extends ArrayAdapter<AAA> {
     private ArrayList<AAA> items;
     public AAAAdapter(Context context, int textViewResourceId,
       ArrayList<AAA> items) {
      super(context, textViewResourceId, items);
      this.items = items;
     }
     @Override
     public View getView(int _position, View _convertView, ViewGroup _parent) {
      View view = _convertView;
      if (view == null) {
       LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
       view = vi.inflate(R.layout.search_item, null);
      }
      //검색목록 타이틀
      AAA ref = items.get(_position);
      TextView txt = (TextView)view.findViewById(R.id.popup_txt);
       if(_position ==  0)
       {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          android.widget.TableRow.LayoutParams.WRAP_CONTENT,
          android.widget.TableRow.LayoutParams.WRAP_CONTENT);
        txt.setLayoutParams(params);
        txt.setBackgroundResource(R.drawable.store_menutop_p_s);
       }
       else if(_position == items.size()-1)
       {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          android.widget.TableRow.LayoutParams.WRAP_CONTENT,
          android.widget.TableRow.LayoutParams.WRAP_CONTENT);
        txt.setLayoutParams(params);
        txt.setBackgroundResource(R.drawable.store_menubott_p_s);
        
       }
       else
       {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          android.widget.TableRow.LayoutParams.WRAP_CONTENT,
          android.widget.TableRow.LayoutParams.WRAP_CONTENT);
        txt.setLayoutParams(params);
        txt.setBackgroundResource(R.drawable.store_menumid_p_s);
       }
       if (txt != null) {
        txt.setText(ref.SEARCH_ITEM);
       }
      return view;
     }
    }


    코드의 대한 이해는 별 무리 없을 거라 생각 되서 주석과 설명은 생략 하도록 하겠습니다.

    질문은 환영 합니다.

    ps. 버튼 이미지 셀렉터가 포함된 drawable 폴더의 layout은 생략 하였습니다.

    감사합니다 .

    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.