Android提高十八篇之自訂Menu(TabMenu)

本文來自http://blog.csdn.net/hellogv/ ，引用必須註明出處！

       快要過年了，在這裡先祝廣大的技術宅兔年快樂！
       用過UCWEB-Android版的人都應該對其特殊的menu有印象，把menu做成Tab-Menu(支援分頁的Menu)，可以容納比Android傳統的menu更豐富的內容(Android的menu超過6項則縮減在[更多]裡)，本文參考網上的例子(作者:CoffeeCole,email:longkefan@foxmail.com),對例子進行簡化以及封裝，使其作為一個複合控制項融入自己的framework。

先來看看本文程式啟動並執行效果：

TabMenu本身就是一個PopupWindow，PopupWindow上面放了兩個GridView,第一個GridView就是分頁標籤，位於PopupWindow的頂部，第二個GridView是菜單，位於PopupWindow的主體。為了實現PopupWindow的彈出/退出的動畫效果，本文使用了以下代碼：

在工程的res檔案夾裡添加anim子目錄，再建立檔案popup_enter.xml：

<?xml version="1.0" encoding="utf-8"?><br /><set xmlns:android="http://schemas.android.com/apk/res/android"><br /><translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="1000" /><br /><alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" /><br /></set><br />

建立檔案popup_exit.xml：

<?xml version="1.0" encoding="utf-8"?><br /><set xmlns:android="http://schemas.android.com/apk/res/android"><br /><translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="1000" /><br /><alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="1000" /><br /></set><br />

在工程的values檔案夾裡建立檔案popup_animation.xml：

<?xml version="1.0" encoding="utf-8"?> 
<resources>    
    <style name="PopupAnimation" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/popup_enter</item> 
        <item name="android:windowExitAnimation">@anim/popup_exit</item>  
    </style> 
</resources> 

 

 

 

main.xml的源碼如下：

<?xml version="1.0" encoding="utf-8"?><br /><LinearLayout android:id="@+id/LinearLayout01"<br />android:layout_width="fill_parent" android:layout_height="fill_parent"<br />xmlns:android="http://schemas.android.com/apk/res/android"><br /><TextView android:id="@+id/TextView01" android:layout_height="wrap_content"<br />android:layout_width="fill_parent" android:text="擴充Menu----hellogv"></TextView><br /></LinearLayout><br />

TabMenu的封裝類TabMenu.java的源碼如下：

package com.testTabMenu;<br />import android.content.Context;<br />import android.graphics.Color;<br />import android.graphics.drawable.ColorDrawable;<br />import android.view.Gravity;<br />import android.view.View;<br />import android.view.ViewGroup;<br />import android.widget.BaseAdapter;<br />import android.widget.GridView;<br />import android.widget.ImageView;<br />import android.widget.LinearLayout;<br />import android.widget.PopupWindow;<br />import android.widget.TextView;<br />import android.widget.AdapterView.OnItemClickListener;<br />import android.widget.LinearLayout.LayoutParams;<br />public class TabMenu extends PopupWindow{<br />private GridView gvBody, gvTitle;<br />private LinearLayout mLayout;<br />private MenuTitleAdapter titleAdapter;<br />public TabMenu(Context context,OnItemClickListener titleClick,OnItemClickListener bodyClick,<br />MenuTitleAdapter titleAdapter,int colorBgTabMenu,int aniTabMenu){<br />super(context);</p><p>mLayout = new LinearLayout(context);<br />mLayout.setOrientation(LinearLayout.VERTICAL);<br />//標題選項欄<br />gvTitle = new GridView(context);<br />gvTitle.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));<br />gvTitle.setNumColumns(titleAdapter.getCount());<br />gvTitle.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);<br />gvTitle.setVerticalSpacing(1);<br />gvTitle.setHorizontalSpacing(1);<br />gvTitle.setGravity(Gravity.CENTER);<br />gvTitle.setOnItemClickListener(titleClick);<br />gvTitle.setAdapter(titleAdapter);<br />gvTitle.setSelector(new ColorDrawable(Color.TRANSPARENT));//選中的時候為透明色<br />this.titleAdapter=titleAdapter;<br />//子選項欄<br />gvBody = new GridView(context);<br />gvBody.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));<br />gvBody.setSelector(new ColorDrawable(Color.TRANSPARENT));//選中的時候為透明色<br />gvBody.setNumColumns(4);<br />gvBody.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);<br />gvBody.setVerticalSpacing(10);<br />gvBody.setHorizontalSpacing(10);<br />gvBody.setPadding(10, 10, 10, 10);<br />gvBody.setGravity(Gravity.CENTER);<br />gvBody.setOnItemClickListener(bodyClick);<br />mLayout.addView(gvTitle);<br />mLayout.addView(gvBody);</p><p>//設定預設項<br />this.setContentView(mLayout);<br />this.setWidth(LayoutParams.FILL_PARENT);<br />this.setHeight(LayoutParams.WRAP_CONTENT);<br />this.setBackgroundDrawable(new ColorDrawable(colorBgTabMenu));// 設定TabMenu菜單背景<br />this.setAnimationStyle(aniTabMenu);<br />this.setFocusable(true);// menu菜單獲得焦點 如果沒有獲得焦點menu菜單中的控制項事件無法響應<br />}</p><p>public void SetTitleSelect(int index)<br />{<br />gvTitle.setSelection(index);<br />this.titleAdapter.SetFocus(index);<br />}</p><p>public void SetBodySelect(int index,int colorSelBody)<br />{<br />int count=gvBody.getChildCount();<br />for(int i=0;i<count;i++)<br />{<br />if(i!=index)<br />((LinearLayout)gvBody.getChildAt(i)).setBackgroundColor(Color.TRANSPARENT);<br />}<br />((LinearLayout)gvBody.getChildAt(index)).setBackgroundColor(colorSelBody);<br />}</p><p>public void SetBodyAdapter(MenuBodyAdapter bodyAdapter)<br />{<br />gvBody.setAdapter(bodyAdapter);<br />}</p><p>/**<br /> * 自訂Adapter，TabMenu的每個分頁的主體<br /> *<br /> */<br />static public class MenuBodyAdapter extends BaseAdapter {<br />private Context mContext;<br />private int fontColor,fontSize;<br />private String[] texts;<br />private int[] resID;<br />/**<br /> * 設定TabMenu的分頁主體<br /> * @param context 調用方的上下文<br /> * @param texts 按鈕集合的字串數組<br /> * @param resID 按鈕集合的表徵圖資源數組<br /> * @param fontSize 按鈕字型大小<br /> * @param color 按鈕字型顏色<br /> */<br />public MenuBodyAdapter(Context context, String[] texts,int[] resID, int fontSize,int fontColor)<br />{<br />this.mContext = context;<br />this.fontColor = fontColor;<br />this.texts = texts;<br />this.fontSize=fontSize;<br />this.resID=resID;<br />}<br />public int getCount() {<br />return texts.length;<br />}<br />public Object getItem(int position) {</p><p>return makeMenyBody(position);<br />}<br />public long getItemId(int position) {<br />return position;<br />}</p><p>private LinearLayout makeMenyBody(int position)<br />{<br />LinearLayout result=new LinearLayout(this.mContext);<br />result.setOrientation(LinearLayout.VERTICAL);<br />result.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);<br />result.setPadding(10, 10, 10, 10);</p><p>TextView text = new TextView(this.mContext);<br />text.setText(texts[position]);<br />text.setTextSize(fontSize);<br />text.setTextColor(fontColor);<br />text.setGravity(Gravity.CENTER);<br />text.setPadding(5, 5, 5, 5);<br />ImageView img=new ImageView(this.mContext);<br />img.setBackgroundResource(resID[position]);<br />result.addView(img,new LinearLayout.LayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)));<br />result.addView(text);<br />return result;<br />}</p><p>public View getView(int position, View convertView, ViewGroup parent) {<br />return makeMenyBody(position);<br />}<br />}</p><p>/**<br /> * 自訂Adapter,TabMenu的分頁標籤部分<br /> *<br /> */<br />static public class MenuTitleAdapter extends BaseAdapter {<br />private Context mContext;<br /> private int fontColor,unselcolor,selcolor;<br /> private TextView[] title;<br /> /**<br /> * 設定TabMenu的title<br /> * @param context 調用方的上下文<br /> * @param titles 分頁標籤的字串數組<br /> * @param fontSize 字型大小<br /> * @param fontcolor 字型顏色<br /> * @param unselcolor 未選中項的背景色<br /> * @param selcolor 選中項的背景色<br /> */<br /> public MenuTitleAdapter(Context context, String[] titles, int fontSize,<br /> int fontcolor,int unselcolor,int selcolor) {<br /> this.mContext = context;<br /> this.fontColor = fontcolor;<br /> this.unselcolor = unselcolor;<br /> this.selcolor=selcolor;<br /> this.title = new TextView[titles.length];<br /> for (int i = 0; i < titles.length; i++) {<br /> title[i] = new TextView(mContext);<br /> title[i].setText(titles[i]);<br /> title[i].setTextSize(fontSize);<br /> title[i].setTextColor(fontColor);<br /> title[i].setGravity(Gravity.CENTER);<br /> title[i].setPadding(10, 10, 10, 10);<br /> }<br /> }<br /> public int getCount() {<br /> return title.length;<br /> }<br /> public Object getItem(int position) {<br /> return title[position];<br /> }<br /> public long getItemId(int position) {<br /> return title[position].getId();<br /> }<br /> /**<br /> * 設定選中的效果<br /> */<br /> private void SetFocus(int index)<br /> {<br /> for(int i=0;i<title.length;i++)<br /> {<br /> if(i!=index)<br /> {<br /> title[i].setBackgroundDrawable(new ColorDrawable(unselcolor));//設定沒選中的顏色<br /> title[i].setTextColor(fontColor);//設定沒選中項的字型顏色<br /> }<br /> }<br /> title[index].setBackgroundColor(0x00);//設定選中項的顏色<br /> title[index].setTextColor(selcolor);//設定選中項的字型顏色<br /> }</p><p> public View getView(int position, View convertView, ViewGroup parent) {<br /> View v;<br /> if (convertView == null) {<br /> v = title[position];<br /> } else {<br /> v = convertView;<br /> }<br /> return v;<br /> }<br />}<br />}<br />

testTabMenu介紹了資料的定義以及TabMenu的使用，源碼如下：

package com.testTabMenu;<br />import android.app.Activity;<br />import android.graphics.Color;<br />import android.os.Bundle;<br />import android.view.Gravity;<br />import android.view.Menu;<br />import android.view.View;<br />import android.widget.AdapterView;<br />import android.widget.AdapterView.OnItemClickListener;<br />import android.widget.Toast;<br />public class testTabMenu extends Activity {<br />TabMenu.MenuBodyAdapter []bodyAdapter=new TabMenu.MenuBodyAdapter[3];<br />TabMenu.MenuTitleAdapter titleAdapter;<br />TabMenu tabMenu;<br />int selTitle=0;<br />@Override<br />public void onCreate(Bundle savedInstanceState) {<br />super.onCreate(savedInstanceState);<br />setContentView(R.layout.main);<br />//設定分頁欄的標題<br />titleAdapter = new TabMenu.MenuTitleAdapter(this, new String[] { "常用",<br />"設定", "工具" }, 16, 0xFF222222,Color.LTGRAY,Color.WHITE);<br />//定義每項分頁欄的內容<br />bodyAdapter[0]=new TabMenu.MenuBodyAdapter(this,new String[] { "常用1", "常用2", },<br /> new int[] { R.drawable.menu_test,<br />R.drawable.menu_bookmark},13, 0xFFFFFFFF);</p><p>bodyAdapter[1]=new TabMenu.MenuBodyAdapter(this,new String[] { "設定1", "設定2",<br />"設定3"}, new int[] { R.drawable.menu_edit,<br />R.drawable.menu_delete, R.drawable.menu_fullscreen},13, 0xFFFFFFFF);</p><p>bodyAdapter[2]=new TabMenu.MenuBodyAdapter(this,new String[] { "工具1", "工具2",<br />"工具3", "工具4" }, new int[] { R.drawable.menu_copy,<br />R.drawable.menu_cut, R.drawable.menu_normalmode,<br />R.drawable.menu_quit },13, 0xFFFFFFFF);</p><p>tabMenu=new TabMenu(this,<br /> new TitleClickEvent(),<br /> new BodyClickEvent(),<br /> titleAdapter,<br /> 0x55123456,//TabMenu的背景顏色<br /> R.style.PopupAnimation);//出現與消失的動畫</p><p> tabMenu.update();<br /> tabMenu.SetTitleSelect(0);<br /> tabMenu.SetBodyAdapter(bodyAdapter[0]);<br />}</p><p>class TitleClickEvent implements OnItemClickListener{<br />@Override<br />public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,<br />long arg3) {<br />selTitle=arg2;<br />tabMenu.SetTitleSelect(arg2);<br />tabMenu.SetBodyAdapter(bodyAdapter[arg2]);<br />}<br />}</p><p>class BodyClickEvent implements OnItemClickListener{<br />@Override<br />public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,<br />long arg3) {<br />tabMenu.SetBodySelect(arg2,Color.GRAY);<br />String str="第"+String.valueOf(selTitle)+"欄/n/r"<br />+"第"+String.valueOf(arg2)+"項";<br />Toast.makeText(testTabMenu.this, str, 500).show();</p><p>}</p><p>}<br />@Override<br />/**<br /> * 建立MENU<br /> */<br />public boolean onCreateOptionsMenu(Menu menu) {<br />menu.add("menu");// 必須建立一項<br />return super.onCreateOptionsMenu(menu);<br />}<br />@Override<br />/**<br /> * 攔截MENU<br /> */<br />public boolean onMenuOpened(int featureId, Menu menu) {<br />if (tabMenu != null) {<br />if (tabMenu.isShowing())<br />tabMenu.dismiss();<br />else {<br />tabMenu.showAtLocation(findViewById(R.id.LinearLayout01),<br />Gravity.BOTTOM, 0, 0);<br />}<br />}<br />return false;// 返回為true 則顯示系統menu<br />}</p><p>}<br />