Android實現橫向二級菜單_Android

本文執行個體為大家分享了Android二級橫向菜單的實現過程.效果如上圖：

 

  這種橫向的二級菜單在很多的app都有所應用.效果看起來還是非常的美觀的.也算是項目需要,自己也就學了一下這個效果,首先說一下邏輯.實現的方式其實並不是很難..只不過邏輯上可能有點複雜.原理其實就是一個按鈕.當觸發按鈕的時候彈出PopWindow.PopWindow由兩個ListView構成..對兩個ListView適當的適配.就可以實現這個效果了..

  實現這種效果可以有兩種不同的方式..一種是直接在布局檔案layout.xml中寫..最上方的可以是一個按鈕.也可以是多個按鈕..多個按鈕就可以使用RadioGroup去實現..下方則採用ScrollView去實現也是可以的..

  不過我還是說一下第二種方式..直接用Java去寫這個布局..通過使用自訂控制項的方式實現這個效果..既然是自訂,那麼首先我們需要繼承一個布局.布局可以使用LinearLayout或者RelativeLayout.

  setValue()方法..

  setValue()方法是自訂的方法..主要是用於載入布局.以及在布局當中添加相關的View.沒有載入任何的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<String>

  這裡使用了ArrayAdapter適配器.繼承與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實現橫向二級菜單

以上就是本文的全部內容，希望對大家的學習有所協助。