Android 가로 2 단계 메뉴 구현

15140 단어 Android메뉴
본 사례 는 안 드 로 이 드 2 급 가로 메뉴 의 실현 과정 을 공유 합 니 다.효 과 는 위의 그림 과 같 습 니 다.
 
  이런 가로 2 급 메뉴 는 많은 app 에서 응용 되 었 습 니 다.효 과 는 매우 아름 다 워 보 입 니 다.프로젝트 의 수요 라 고 할 수 있 습 니 다.자신 도 이 효 과 를 배 웠 습 니 다.먼저 논 리 를 말씀 드 리 겠 습 니 다.실현 하 는 방식 은 어렵 지 않 습 니 다.다만 논리 적 으로 좀 복잡 할 수 있 습 니 다.원 리 는 하나의 버튼 입 니 다.트리거 버튼 을 누 를 때 팝 윈도 우 를 팝 업 합 니 다.팝 윈도 우 는 두 개의 ListView 로 구성 되 어 있 습 니 다.두 개의 ListView 에 적당 한 어 울 립 니 다.이 효 과 를 실현 할 수 있 습 니 다.
  이러한 효 과 를 실현 하려 면 두 가지 다른 방식 이 있 을 수 있 습 니 다.하 나 는 레이아웃 파일 layot.xml 에 직접 쓰 는 것 입 니 다.맨 위 에 있 는 것 은 하나의 버튼 일 수도 있 고 여러 개의 버튼 일 수도 있 습 니 다.여러 개의 버튼 을 누 르 면 RadioGroup 을 사용 하여 실현 할 수 있 습 니 다.아래 는 ScrollView 를 사용 하여 실현 하 는 것 도 가능 합 니 다.
  하지만 두 번 째 방법 을 말씀 드 리 겠 습 니 다.자바 로 직접 이 레이아웃 을 작성 합 니 다.사용자 정의 컨트롤 을 사용 하여 이 효 과 를 실현 합 니 다.사용자 정의 라면 우선 레이아웃 을 계승 해 야 합 니 다.레이아웃 은 LinearLayout 또는 RelativeLayout 를 사용 할 수 있 습 니 다.
  setValue()방법..
  setValue()방법 은 사용자 정의 방법 입 니 다.주로 레이아웃 을 불 러 오 는 데 사 용 됩 니 다.레이아웃 에 관련 뷰 를 추가 합 니 다.xml 파일 을 불 러 오지 않 았 습 니 다.

  /**
   * @param textArray: ListView item   text    ..
   * @param viewArray:   Layout      View.. 
   * */
  @SuppressLint("ResourceAsColor") 
  public void setValue(ArrayList<String> textArray, ArrayList<View> viewArray) {
    if (mContext == null) {
      return;
    }
    LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    mTextList = textArray;
    for (int i = 0; i < viewArray.size(); i++) {
      
      //        View..
      final RelativeLayout r = new RelativeLayout(mContext);
      int maxHeight = (int) (displayHeight * 0.5);  //       ..
      
      
      RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, maxHeight);
      r.addView(viewArray.get(i), rl); //      View     
      
      
      mViewList.add(r);
      r.setTag(SMALL);
      
      //        ,           。      text
      ToggleButton tButton = (ToggleButton) inflater.inflate(R.layout.toggle_button, this, false);
      addView(tButton);
      mToggleList.add(tButton);
      tButton.setTag(i);
      tButton.setText(mTextList.get(i));
      
      //     PopWindow   .      PopWindow
      r.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
          onPressBack();
        }
      });

      r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background));
      
      //              
      tButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
          
          
          ToggleButton tButton = (ToggleButton) view;
          /**                  .               */
          if (selectedButton != null && selectedButton != tButton) {
            selectedButton.setChecked(false);
          }
          selectedButton = tButton;
          selectPosition = (Integer) selectedButton.getTag();
          /**       ,           .*/
          startAnimation();
          if (mOnButtonClickListener != null && tButton.isChecked()) {
            mOnButtonClickListener.onClick(selectPosition);
          }
        }
      });
    }
  }
  그러면 레이아웃 의 스타일 을 설정 한 후...ToggleButton 단추 가 하나 밖 에 없습니다.클릭 하면 아무런 효과 가 없습니다.새로운 View 보 기 를 정의 해 야 합 니 다.단 추 를 누 르 면 표시 할 팝 업 창 에 사용 합 니 다.그러면 이 팝 업 창 도 사용자 정의 가 필요 합 니 다.
 팝 업 창 은 두 개의 ListView 형식 으로 표 시 됩 니 다.레이아웃 에 두 개의 ListView 를 추가 합 니 다.각 ListView 에 해당 하 는 어댑터 를 설정 한 다음 이 View 를 위의 주 View 에 추가 합 니 다.button 이 클릭 되면 팝 업 창 이 아래 에 표 시 됩 니 다.
 ChildView()팝 업 창 View 의 레이아웃 구현 방식...
 이 View 를 정의 하고 초기 화 작업 을 완료 합 니 다.어댑터 설정 도 완료 되 었 습 니 다.

package com.example.view;

import java.util.ArrayList;
import java.util.LinkedList;

import android.content.Context;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ListView;

import com.example.adapter.TextAdapter;
import com.example.expandtabview.R;

public class ChildView extends LinearLayout {
  
  private ListView regionListView;  // ListView
  private ListView plateListView;  // ListView
  
  // ListView   Item   text
  private String LeftFaString[] = new String[] { "  ", "    ", "  ", "  /  ",
      "   ", "  /  ", "   ", "    ", "  ", "    " };
  // ListView   Item   text..            ..
  private String LeftCh1String[][] = new String[][] {
      { "  " },
      { "  ", "    ", "    ", "   ", "    ", "  ", "   ", "     ",
          "    ", "    ", "    ", "  / ", "  ", "    ", "  " },
      { "  ", "    " }, { "  ", "   " }, { "  " }, { "  ", "  ", "  " },
      { "  ", "  ", "  ", "  " }, { "  " },
      { "  ", "    ", "    ", "    " }, { "  ", "    ", "    " } };

  //   ListView      
  private ArrayList<String> groups = new ArrayList<String>();
  
  //   ListView      
  private LinkedList<String> childrenItem = new LinkedList<String>();
  
  //    
  private SparseArray<LinkedList<String>> children = new SparseArray<LinkedList<String>>();
  // ListView     
  private TextAdapter plateListViewAdapter;
  private TextAdapter earaListViewAdapter;
  //       
  private OnSelectListener mOnSelectListener;
  
  private int tEaraPosition = 0;   //       ListView    Item   Position.
  private int tBlockPosition = 0;    //       ListView    Item   Position.
  
  private String showString = "";

  public ChildView(Context context) {
    super(context);
    init(context);
  }

  public ChildView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
  }


  private void init(Context context) {
    LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    
    //    ,  ID.
    inflater.inflate(R.layout.view_region, this, true);
    regionListView = (ListView) findViewById(R.id.listView);
    plateListView = (ListView) findViewById(R.id.listView2);

    //   ListView    item   text
    for(int i=0;i<10;i++){
      groups.add(LeftFaString[i]);
      LinkedList<String> tItem = new LinkedList<String>();
      for(int j=0;j<LeftCh1String[i].length;j++){
        
        tItem.add(LeftCh1String[i][j]);
        
      }
      children.put(i, tItem);
    }

    // ListView       
    earaListViewAdapter = new TextAdapter(context, groups,
        R.drawable.choose,
        R.drawable.choose_eara_item_selector);
    earaListViewAdapter.setTextSize(12);
    earaListViewAdapter.setSelectedPositionNoNotify(tEaraPosition);
    
    regionListView.setAdapter(earaListViewAdapter);
    
    earaListViewAdapter
        .setOnItemClickListener(new TextAdapter.OnItemClickListener() {

          @Override
          public void onItemClick(View view, int position) {
            if (position < children.size()) {
              childrenItem.clear();
              //            ..           
              childrenItem.addAll(children.get(position));
              plateListViewAdapter.notifyDataSetChanged();
            }
          }
        });
    
    if (tEaraPosition < children.size())
      childrenItem.addAll(children.get(tEaraPosition));
    
    
    // ListView    
    plateListViewAdapter = new TextAdapter(context, childrenItem,
        R.drawable.choose_item_right,
        R.drawable.choose_plate_item_selector);
    plateListViewAdapter.setTextSize(12);
    plateListViewAdapter.setSelectedPositionNoNotify(tBlockPosition);
    plateListView.setAdapter(plateListViewAdapter);
    //   Item         .
    plateListViewAdapter
        .setOnItemClickListener(new TextAdapter.OnItemClickListener() {

          @Override
          public void onItemClick(View view, final int position) {
            //      Item     
            showString = childrenItem.get(position);
            if (mOnSelectListener != null) {
              
              mOnSelectListener.getValue(showString);
            }

          }
        });
    
    if (tBlockPosition < childrenItem.size())
      showString = childrenItem.get(tBlockPosition);
    setDefaultSelect();

  }
  
  //    Item Position.
  public void setDefaultSelect() {
    //     Item 
    regionListView.setSelection(tEaraPosition);
    plateListView.setSelection(tBlockPosition);
  }

  public String getShowText() {
    return showString;
  }

  public void setOnSelectListener(OnSelectListener onSelectListener) {
    mOnSelectListener = onSelectListener;
  }

  public interface OnSelectListener {
    public void getValue(String showText);
  }

}

  그럼 마지막 으로 어댑터 만 남 았 는데...
  ArrayAdapter
  Array Adapter 어댑터 를 사 용 했 습 니 다.BaseAdapter 와 계승 하여 텍스트 데 이 터 를 표시 할 수 있 습 니 다.어댑터 가 반드시 실현 해 야 할 방법 은 getView()방법 이라는 것 을 잘 알 고 있 습 니 다.그러면 이 방법 을 간단하게 살 펴 보 겠 습 니 다.

  @SuppressLint("ResourceAsColor") @SuppressWarnings("deprecation")
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    TextView view;
    if (convertView == null) {
      view = (TextView) LayoutInflater.from(mContext).inflate(R.layout.choose_item, parent, false);
    } else {
      view = (TextView) convertView;
    }
    view.setTag(position);
    String mString = "";
    if (mListData != null) {
      if (position < mListData.size()) {
        mString = mListData.get(position);
      }
    } else if (mArrayData != null) {
      if (position < mArrayData.length) {
        mString = mArrayData[position];
      }
    }
    if (mString.contains("  "))
      view.setText("  ");
    else
      view.setText(mString);
    view.setTextSize(TypedValue.COMPLEX_UNIT_SP,textSize);

    if (selectedText != null && selectedText.equals(mString)) {
      view.setBackgroundDrawable(selectedDrawble);//         
    } else {
      view.setBackgroundDrawable(mContext.getResources().getDrawable(normalDrawbleId));//           
    }
    view.setPadding(20, 0, 0, 0);
    view.setOnClickListener(onClickListener);
    return view;
  }
  적당 한 작업 은 매우 간단 합 니 다.하나의 TextView 만으로 도 해결 할 수 있 습 니 다.물론 우 리 는 비교적 복잡 한 스타일 을 쓸 수 있 습 니 다.Layout 내부 에서 복잡 한 컨트롤 을 정의 하면 더 좋 은 효 과 를 얻 을 수 있 습 니 다.
  마지막 으로 MainActivity 의 레이아웃 파일 에 이 컨트롤 을 불 러 옵 니 다.간단하게 초기 화 작업 을 하면 이 루어 집 니 다.

package com.example.expandtabview;


import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.example.view.ExpandTabView;
import com.example.view.ChildView;

public class MainActivity extends Activity {

  private ExpandTabView expandTabView;
  private ArrayList<View> mViewArray = new ArrayList<View>();
  private ChildView viewLeft;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
    initVaule();
    initListener();
    
  }

  private void initView() {
    
    //     
    expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view);
    viewLeft = new ChildView(this);
    
  }

  private void initVaule() {
    
    mViewArray.add(viewLeft);
    
    //        
    ArrayList<String> mTextArray = new ArrayList<String>();
    mTextArray.add("  ");
    expandTabView.setValue(mTextArray, mViewArray);
    expandTabView.setTitle(viewLeft.getShowText(), 0);
    
  }

  private void initListener() {
    
    
    viewLeft.setOnSelectListener(new ChildView.OnSelectListener() {
      
      @Override
      public void getValue(String showText) {
        
        onRefresh(viewLeft,showText);
        
      }
    });
    
    
  }
  
  //          
  private void onRefresh(View view, String showText) {
    
    expandTabView.onPressBack();
    int position = getPositon(view);
    if (position >= 0 && !expandTabView.getTitle(position).equals(showText)) {
      expandTabView.setTitle(showText, position);
    }
    Toast.makeText(MainActivity.this, showText, Toast.LENGTH_SHORT).show();

  }
  
  //     view
  private int getPositon(View tView) {
    for (int i = 0; i < mViewArray.size(); i++) {
      if (mViewArray.get(i) == tView) {
        return i;
      }
    }
    return -1;
  }
}

 여 기 는 핵심 코드 만 붙 였 습 니 다.다른 중요 하지 않 은 코드 는 여기에 붙 이지 않 습 니 다.마지막 으로 그림 프로 세 스 를 한 장 넣 어서 이해 하 시기 바 랍 니 다.마지막 으로 소스 코드 를 드 립 니 다.

 소스 코드 를 넣 어 다운 로드 를 제공 하고 이 과정 을 이해 할 수 있 습 니 다Android 가로 2 단계 메뉴 구현
이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기