Android實(shí)現(xiàn)橫向二級菜單
本文實(shí)例為大家分享了Android二級橫向菜單的實(shí)現(xiàn)過程.效果如上圖:

這種橫向的二級菜單在很多的app都有所應(yīng)用.效果看起來還是非常的美觀的.也算是項(xiàng)目需要,自己也就學(xué)了一下這個效果,首先說一下邏輯.實(shí)現(xiàn)的方式其實(shí)并不是很難..只不過邏輯上可能有點(diǎn)復(fù)雜.原理其實(shí)就是一個按鈕.當(dāng)觸發(fā)按鈕的時(shí)候彈出PopWindow.PopWindow由兩個ListView構(gòu)成..對兩個ListView適當(dāng)?shù)倪m配.就可以實(shí)現(xiàn)這個效果了..
實(shí)現(xiàn)這種效果可以有兩種不同的方式..一種是直接在布局文件layout.xml中寫..最上方的可以是一個按鈕.也可以是多個按鈕..多個按鈕就可以使用RadioGroup去實(shí)現(xiàn)..下方則采用ScrollView去實(shí)現(xiàn)也是可以的..
不過我還是說一下第二種方式..直接用Java去寫這個布局..通過使用自定義控件的方式實(shí)現(xiàn)這個效果..既然是自定義,那么首先我們需要繼承一個布局.布局可以使用LinearLayout或者RelativeLayout.
setValue()方法..
setValue()方法是自定義的方法..主要是用于加載布局.以及在布局當(dāng)中添加相關(guān)的View.沒有加載任何的xml文件..
/**
* @param textArray: ListView中item對應(yīng)的text值的集合..
* @param viewArray: 當(dāng)前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并指定參數(shù)
mViewList.add(r);
r.setTag(SMALL);
//定義最上方的按鈕,并在布局中添加這個按鈕。并設(shè)置按鈕的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));
//用于實(shí)現(xiàn)當(dāng)PopWindow顯示時(shí).再次點(diǎn)擊收回PopWindow
r.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
onPressBack();
}
});
r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background));
//當(dāng)按鈕被點(diǎn)擊后需要觸發(fā)的監(jiān)聽
tButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
ToggleButton tButton = (ToggleButton) view;
/** 如果當(dāng)前點(diǎn)擊的按鈕與上次的點(diǎn)擊不同.則設(shè)置當(dāng)前的按鈕處于點(diǎn)擊狀態(tài) */
if (selectedButton != null && selectedButton != tButton) {
selectedButton.setChecked(false);
}
selectedButton = tButton;
selectPosition = (Integer) selectedButton.getTag();
/** 按鈕被點(diǎn)擊后,需要觸發(fā)對應(yīng)的監(jiān)聽事件.*/
startAnimation();
if (mOnButtonClickListener != null && tButton.isChecked()) {
mOnButtonClickListener.onClick(selectPosition);
}
}
});
}
}
那么設(shè)置完了布局的樣式后..只有一個ToggleButton按鈕.點(diǎn)擊后沒有任何的效果.我們需要去定義一個新的View視圖.用于點(diǎn)擊按鈕后需要顯示的彈出窗.那么這個彈出窗也需要自定義..
彈出窗則采用兩個ListView的形式進(jìn)行顯示.在布局中將兩個ListView進(jìn)行添加.對每一個ListView設(shè)置相應(yīng)的適配器.然后將這個View添加到上面的主View當(dāng)中.就可以實(shí)現(xiàn)當(dāng)button被點(diǎn)擊后,彈出窗在下方進(jìn)行顯示的效果..
ChildView() 彈出窗View的布局實(shí)現(xiàn)方式..
這里定義了這個View,并完成相應(yīng)的初始化操作.設(shè)置對應(yīng)的適配器也就完成了..
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對應(yīng)的text
private String LeftFaString[] = new String[] { "美食", "快餐小吃", "火鍋", "海鮮/燒烤",
"特色菜", "香鍋/烤魚", "地方菜", "東南亞菜", "西餐", "日韓料理" };
//子ListView每一個Item對應(yīng)的text..采用了二維數(shù)組的實(shí)現(xiàn)方式..
private String LeftCh1String[][] = new String[][] {
{ "全部" },
{ "全部", "中式簡餐", "地方小吃", "蓋澆飯", "米粉米線", "面館", "麻辣燙", "黃燜雞米飯",
"鴨脖鹵味", "餃子餛飩", "炸雞炸串", "包子/粥", "零食", "生煎鍋貼", "冒菜" },
{ "全部", "其他火鍋" }, { "全部", "小龍蝦" }, { "全部" }, { "全部", "香鍋", "烤魚" },
{ "全部", "魯菜", "川菜", "其他" }, { "全部" },
{ "全部", "意面披薩", "西式快餐", "其他西餐" }, { "全部", "韓式簡餐", "韓國料理" } };
//添加主ListView中的數(shù)據(jù)信息
private ArrayList<String> groups = new ArrayList<String>();
//添加子ListView中的數(shù)據(jù)信息
private LinkedList<String> childrenItem = new LinkedList<String>();
//稀疏數(shù)組
private SparseArray<LinkedList<String>> children = new SparseArray<LinkedList<String>>();
//為ListView設(shè)置適配器
private TextAdapter plateListViewAdapter;
private TextAdapter earaListViewAdapter;
//監(jiān)聽事件的設(shè)置
private OnSelectListener mOnSelectListener;
private int tEaraPosition = 0; //用于保存當(dāng)前主ListView被點(diǎn)擊的Item對應(yīng)的Position.
private int tBlockPosition = 0; //用于保存當(dāng)前子ListView被點(diǎn)擊的Item對應(yīng)的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對應(yīng)的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列表項(xiàng)的適配器
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();
//獲取這一頁的所有數(shù)據(jù)信息..然后喚醒適配器更新數(shù)據(jù)
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);
//設(shè)置當(dāng)Item被點(diǎn)擊后觸發(fā)的監(jiān)聽.
plateListViewAdapter
.setOnItemClickListener(new TextAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, final int position) {
//獲取被點(diǎn)擊的Item的文字?jǐn)?shù)據(jù)
showString = childrenItem.get(position);
if (mOnSelectListener != null) {
mOnSelectListener.getValue(showString);
}
}
});
if (tBlockPosition < childrenItem.size())
showString = childrenItem.get(tBlockPosition);
setDefaultSelect();
}
//設(shè)置當(dāng)前Item的Position.
public void setDefaultSelect() {
//默認(rèn)選擇的Item項(xiàng)
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.可以用于顯示文本數(shù)據(jù)..我們也都知道,適配器必須要實(shí)現(xiàn)的方法就是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);//設(shè)置選中的背景圖片
} else {
view.setBackgroundDrawable(mContext.getResources().getDrawable(normalDrawbleId));//設(shè)置未選中狀態(tài)背景圖片
}
view.setPadding(20, 0, 0, 0);
view.setOnClickListener(onClickListener);
return view;
}
適配的工作還是非常的簡單的.僅僅一個TextView就可以搞定了.當(dāng)然我們也可以寫一個比較復(fù)雜的樣式.在一個Layout內(nèi)部定義一些復(fù)雜的控件.就能夠?qū)崿F(xiàn)更好的效果.
最后再M(fèi)ainActivity中的布局文件中加載這個控件,簡單的做一些初始化操作就可以實(shí)現(xiàn)了..
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);
//設(shè)置頂部數(shù)據(jù)信息
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);
}
});
}
//視圖被點(diǎn)擊后刷新數(shù)據(jù)
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();
}
//獲取當(dāng)前的view
private int getPositon(View tView) {
for (int i = 0; i < mViewArray.size(); i++) {
if (mViewArray.get(i) == tView) {
return i;
}
}
return -1;
}
}
這里只是貼了一些核心代碼.其他的涉及的一些不重要的代碼就不在這里粘貼了..最后放一張圖片流程.方便大家去理解.最后給出源代碼.

放一個源代碼提供下載,方便去理解這個過程:Android實(shí)現(xiàn)橫向二級菜單
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
Android編程實(shí)現(xiàn)獲得內(nèi)存剩余大小與總大小的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)獲得內(nèi)存剩余大小與總大小的方法,涉及Android基于ActivityManager實(shí)現(xiàn)內(nèi)存信息的操作技巧,需要的朋友可以參考下2015-12-12
Android使用SqLite實(shí)現(xiàn)登錄注冊功能流程詳解
這篇文章主要介紹了使用Android Studio自帶的sqlite數(shù)據(jù)庫實(shí)現(xiàn)一個簡單的登錄注冊功能,SQLite是一個軟件庫,實(shí)現(xiàn)了自給自足的、無服務(wù)器的、零配置的、事務(wù)性的SQL數(shù)據(jù)庫引擎,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Android開發(fā)筆記之:ListView刷新順序的問題詳解
本篇文章是對Android中ListView刷新順序的問題進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
Android 中 Activity顯示隱式跳轉(zhuǎn)
這篇文章主要介紹了Android 中 Activity顯示隱式跳轉(zhuǎn)的實(shí)現(xiàn)方法,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
Android實(shí)現(xiàn)微信聊天語言點(diǎn)擊喇叭動畫效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)微信聊天語言點(diǎn)擊喇叭動畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
Android編程設(shè)計(jì)模式之備忘錄模式詳解
這篇文章主要介紹了Android編程設(shè)計(jì)模式之備忘錄模式,結(jié)合實(shí)例形式詳細(xì)分析了Android備忘錄模式的概念、原理、應(yīng)用場景、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2017-12-12
Android 關(guān)閉多個Activity的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 關(guān)閉多個Activity的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09

