셀렉트바 // 팝업윈도우를 이용한 셀렉트바 만들기 2부

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은 생략 하였습니다.

감사합니다 .