首页 > 代码库 > 实现Android半透明Menu效果的开发实例

实现Android半透明Menu效果的开发实例

2024-07-18 16:29:42   223人阅读

不知道大家是否用过天天动听，对于它界面上的半透明Menu效果，笔者感觉非常漂亮。下面是天天动听半透明Menu的截图，欣赏下吧：

Android半透明Menu效果

       感觉还不错吧？那么如何实现这种半透明Menu效果呢？本文就重点讨论并给出这种Menu的具体代码实现过程。

       首先分析下实现这种半透明Menu所需做的工作，并进行合理分解：

       1.  利用Shaper设置一个半透明圆角背景。

       2.  定义Menu布局，主要就GridView，把图标都放在这个GridView。

       3.  Menu事件, 通过PopupWindow或者AlertDialog或者透明Activity显示到页面即可。

       4.  按钮的监听事件，实例中没加。需要的话自己在Adapter里加。

       比较简单，不多说了。

       半透明圆角背景xml：

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <shape android:shape="rectangle">     
  4.   
  5.     <solid android:color="#b4000000" />  
  6.   
  7.     <stroke android:width="2.0dip" android:color="#b4ffffff" android:dashWidth="3.0dip" android:dashGap="0.0dip" />  
  8.   
  9.     <padding android:left="7.0dip" android:top="7.0dip" android:right="7.0dip" android:bottom="7.0dip" />  
  10.   
  11.     <corners android:radius="8.0dip" />  
  12.   
  13. </shape>  

        Menu布局：

XML/HTML代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <LinearLayout  
  4.   
  5.         android:orientation="vertical"  
  6.   
  7.         android:layout_width="wrap_content"  
  8.   
  9.         android:layout_height="fill_parent">  
  10.        
  11.   
  12.         <GridView android:gravity="center"  
  13.   
  14.                 android:layout_gravity="center"  
  15.   
  16.                 android:id="@+id/menuGridChange"  
  17.                
  18.                 android:background="@drawable/menu_bg_frame"  
  19.   
  20.                 android:padding="5.0dip"  
  21.   
  22.                 android:layout_width="fill_parent"  
  23.   
  24.                 android:layout_height="wrap_content"  
  25.   
  26.                 android:horizontalSpacing="10.0dip"  
  27.     
  28.                 android:verticalSpacing="3.0dip"  
  29.   
  30.                 android:stretchMode="columnWidth"  
  31.   
  32.                 android:columnWidth="60.0dip"  
  33.   
  34.                 android:numColumns="auto_fit"/>  
  35.   
  36.                   
  37. </LinearLayout>  

       主要类：

Java代码
  1. package com.yfz;   
  2.   
  3.   
  4. import android.app.Activity;   
  5. import android.app.AlertDialog;   
  6. import android.app.AlertDialog.Builder;   
  7. import android.content.Context;   
  8. import android.graphics.drawable.BitmapDrawable;   
  9. import android.os.Bundle;   
  10. import android.util.Log;   
  11. import android.view.ContextMenu;   
  12. import android.view.Gravity;   
  13. import android.view.LayoutInflater;   
  14. import android.view.Menu;   
  15. import android.view.MenuItem;   
  16. import android.view.View;   
  17. import android.view.ViewGroup;   
  18. import android.view.ContextMenu.ContextMenuInfo;   
  19. import android.widget.BaseAdapter;   
  20. import android.widget.GridView;   
  21. import android.widget.ImageView;   
  22. import android.widget.LinearLayout;   
  23. import android.widget.PopupWindow;   
  24. import android.widget.TextView;   
  25. import android.widget.LinearLayout.LayoutParams;   
  26.   
  27. public class MenuTest extends Activity {           
  28.   
  29.         private String TAG = this.getClass().getSimpleName();          
  30.   
  31.         private int[] resArray = new int[] {   
  32.                 R.drawable.icon_menu_addto, R.drawable.icon_menu_audioinfo,   
  33.                 R.drawable.icon_menu_findlrc, R.drawable.icon_menu_scan   
  34.         };           
  35.   
  36.         private String[] title = new String[]{   
  37.                 "添加歌曲", "歌曲信息", "查找歌词", "搜索歌词"  
  38.         };           
  39.   
  40.         private static boolean show_flag = false;           
  41.         private PopupWindow pw = null;           
  42.   
  43.         /** Called when the activity is first created. */  
  44.         @Override  
  45.         public void onCreate(Bundle savedInstanceState) {   
  46.             super.onCreate(savedInstanceState);   
  47.             setContentView(R.layout.main);   
  48.         }   
  49.   
  50.         @Override  
  51.   
  52.         public boolean onCreateOptionsMenu(Menu menu) {   
  53.                 Log.e(TAG, "------  onCreateOptionsMenu ------");   
  54.                 //用AlertDialog弹出menu   
  55.   
  56. //                View view = LayoutInflater.from(this).inflate(R.layout.menu, null);   
  57.   
  58. //                GridView grid1 = (GridView)view.findViewById(R.id.menuGridChange);   
  59.   
  60. //                grid1.setAdapter(new ImageAdapter(this));   
  61.   
  62. //                Builder build = new AlertDialog.Builder(this);   
  63.   
  64. //                build.setView(view);   
  65.   
  66. //                build.show();   
  67.                    
  68.                 LayoutInflater inflater = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);         
  69.   
  70.                 View view = inflater.inflate(R.layout.menu, null);   
  71.   
  72.                 GridView grid1 = (GridView)view.findViewById(R.id.menuGridChange);   
  73.   
  74.                 grid1.setAdapter(new ImageAdapter(this));                   
  75.   
  76.                 //用Popupwindow弹出menu   
  77.                 pw = new PopupWindow(view,LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);                   
  78.   
  79.                 //NND, 第一个参数， 必须找个View   
  80.                 pw.showAtLocation(findViewById(R.id.tv), Gravity.CENTER, 0, 300);                   
  81.   
  82.                 return true;   
  83.         }   
  84.   
  85.         @Override  
  86.   
  87.         public boolean onOptionsItemSelected(MenuItem item) {   
  88.                 return super.onOptionsItemSelected(item);   
  89.        }   
  90.   
  91.         public class ImageAdapter extends BaseAdapter {                   
  92.                 private Context context;                   
  93.   
  94.                 public ImageAdapter(Context context) {   
  95.                         this.context = context;   
  96.                 }                   
  97.   
  98.                 @Override  
  99.                 public int getCount() {   
  100.                         return resArray.length;   
  101.                 }   
  102.   
  103.                 @Override  
  104.                 public Object getItem(int arg0) {   
  105.                         return resArray[arg0];   
  106.                 }   
  107.   
  108.                 @Override  
  109.                 public long getItemId(int arg0) {   
  110.                         return arg0;   
  111.                 }   
  112.   
  113.                 @Override  
  114.                 public View getView(int arg0, View arg1, ViewGroup arg2) {   
  115.                         LinearLayout linear = new LinearLayout(context);   
  116.   
  117.                         LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);   
  118.   
  119.                         linear.setOrientation(LinearLayout.VERTICAL);                           
  120.   
  121.                         ImageView iv = new ImageView(context);   
  122.   
  123.                         iv.setImageBitmap(((BitmapDrawable)context.getResources().getDrawable(resArray[arg0])).getBitmap());   
  124.   
  125.                         LinearLayout.LayoutParams params2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);   
  126.   
  127.                         params2.gravity=Gravity.CENTER;   
  128.   
  129.                         linear.addView(iv, params2);                           
  130.   
  131.                         TextView tv = new TextView(context);   
  132.   
  133.                         tv.setText(title[arg0]);   
  134.   
  135.                         LinearLayout.LayoutParams params3 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);   
  136.   
  137.                         params3.gravity=Gravity.CENTER;                           
  138.   
  139.                         linear.addView(tv, params3);                           
  140.                         return linear;   
  141.                 }   
  142.         }   
  143. }  

        到此，大家是不是觉得半透明Menu效果也是比较好实现的呢？可以根据自己的需要对此实例进行修改以求更美观好用。


联系
我们