android 自定义下拉菜单

本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体，各种布局效果可以根据自己定义设计。弹出的动画效果主要用到了translate、alpha、scale，具体实现步骤如下：

先上效果图如下：左边下拉菜单、中间下拉菜单、右边下拉菜单

1.主界面布局activity_main.xml：

[html]view plaincopy<RelativeLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff"> <include android:id="@+id/main_top" android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/urm_top"/> <TextView android:id="@+id/rule_line_tv" android:layout_width="match_parent" android:layout_height="0.5dp" android:layout_below="@id/main_top" android:background="@color/reserve_line"/> <LinearLayout android:id="@+id/main_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/rule_line_tv" android:gravity="center_vertical" android:orientation="horizontal" android:padding="10dp"> <TextView android:id="@+id/left_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:gravity="center_horizontal" android:maxLength="4" android:singleLine="true" android:text="我负责的线索"/> <TextView android:id="@+id/middle_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:gravity="center_horizontal" android:maxLength="4" android:singleLine="true" android:text="团队"/> <TextView android:id="@+id/right_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:gravity="center_horizontal" android:maxLength="4" android:singleLine="true" android:text="自定义"/> </LinearLayout> <TextView android:id="@+id/rule_line01_tv" android:layout_width="match_parent" android:layout_height="0.5dp" android:layout_below="@id/main_ll" android:background="@color/reserve_line"/> <TextView android:id="@+id/main_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="主界面"/> </RelativeLayout>

2.主界面测试类MainActivity.java[java]view plaincopypackagecom.popuptest; importjava.util.ArrayList; importandroid.os.Bundle; importandroid.util.DisplayMetrics; importandroid.view.View; importandroid.view.View.OnClickListener; importandroid.view.Window; importandroid.widget.AdapterView; importandroid.widget.Button; importandroid.widget.ImageButton; importandroid.widget.ImageView; importandroid.widget.LinearLayout; importandroid.widget.TextView; importandroid.widget.AdapterView.OnItemClickListener; importandroid.widget.RelativeLayout.LayoutParams; importandroid.app.Activity; publicclassMainActivityextendsActivityimplementsOnClickListener{ publicstaticintscreenW,screenH; privateImageButtonbackBtn,createBtn; privateButtonconfirmBtn; privateTextViewtopTv; privateLinearLayouttopll; privateImageViewtopIv; privateTextViewtopLineTv; privateTopMiddlePopupmiddlePopup; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); getScreenPixels(); initWidget(); } /** *初始化控件 */ privatevoidinitWidget(){ backBtn=(ImageButton)findViewById(R.id.urm_back_btn); createBtn=(ImageButton)findViewById(R.id.urm_create_btn); confirmBtn=(Button)findViewById(R.id.urm_confirm_btn); topll=(LinearLayout)findViewById(R.id.urm_top_ll); topIv=(ImageView)findViewById(R.id.urm_top_iv); topLineTv=(TextView)findViewById(R.id.rule_line_tv); topTv=(TextView)findViewById(R.id.urm_top_tv); topTv.setText("企业客户"); backBtn.setOnClickListener(this); createBtn.setOnClickListener(this); confirmBtn.setOnClickListener(this); topll.setOnClickListener(this); } /** *设置弹窗 * *@paramtype */ privatevoidsetPopup(inttype){ middlePopup=newTopMiddlePopup(MainActivity.this,screenW,screenH, onItemClickListener,getItemsName(),type); } /** *设置弹窗内容 * *@return */ privateArrayList<String>getItemsName(){ ArrayList<String>items=newArrayList<String>(); items.add("企业客户"); items.add("集团客户"); items.add("公海客户"); returnitems; } @Override publicvoidonClick(Viewv){ switch(v.getId()){ caseR.id.urm_back_btn: setPopup(1); middlePopup.show(topLineTv); break; caseR.id.urm_create_btn: setPopup(2); middlePopup.show(topLineTv); break; caseR.id.urm_confirm_btn: break; caseR.id.urm_top_ll: setPopup(0); middlePopup.show(topLineTv); break; } } /** *弹窗点击事件 */ privateOnItemClickListeneronItemClickListener=newOnItemClickListener(){ @Override publicvoidonItemClick(AdapterView<?>parent,Viewview,intposition, longid){ System.out.println("--onItemClickListener--:"); middlePopup.dismiss(); } }; /** *获取屏幕的宽和高 */ publicvoidgetScreenPixels(){ DisplayMetricsmetrics=newDisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); screenW=metrics.widthPixels; screenH=metrics.heightPixels; } }

3.自定义弹窗类TopMiddlePopup.java[java]view plaincopypackagecom.popuptest; importjava.util.ArrayList; importandroid.content.Context; importandroid.graphics.drawable.ColorDrawable; importandroid.view.LayoutInflater; importandroid.view.MotionEvent; importandroid.view.View; importandroid.view.View.OnTouchListener; importandroid.view.ViewGroup.LayoutParams; importandroid.widget.LinearLayout; importandroid.widget.ListView; importandroid.widget.PopupWindow; importandroid.widget.AdapterView.OnItemClickListener; publicclassTopMiddlePopupextendsPopupWindow{ privateContextmyContext; privateListViewmyLv; privateOnItemClickListenermyOnItemClickListener; privateArrayList<String>myItems; privateintmyWidth; privateintmyHeight; privateintmyType; //判断是否需要添加或更新列表子类项 privatebooleanmyIsDirty=true; privateLayoutInflaterinflater=null; privateViewmyMenuView; privateLinearLayoutpopupLL; privatePopupAdapteradapter; publicTopMiddlePopup(Contextcontext){ //TODOAuto-generatedconstructorstub } publicTopMiddlePopup(Contextcontext,intwidth,intheight, OnItemClickListeneronItemClickListener,ArrayList<String>items, inttype){ inflater=(LayoutInflater)context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); myMenuView=inflater.inflate(R.layout.top_popup,null); this.myContext=context; this.myItems=items; this.myOnItemClickListener=onItemClickListener; this.myType=type; this.myWidth=width; this.myHeight=height; System.out.println("--myWidth--:"+myWidth+"--myHeight--:" +myHeight); initWidget(); setPopup(); } /** *初始化控件 */ privatevoidinitWidget(){ myLv=(ListView)myMenuView.findViewById(R.id.popup_lv); popupLL=(LinearLayout)myMenuView.findViewById(R.id.popup_layout); myLv.setOnItemClickListener(myOnItemClickListener); if(myType==1){ android.widget.RelativeLayout.LayoutParamslpPopup=(android.widget.RelativeLayout.LayoutParams)popupLL .getLayoutParams(); lpPopup.width=(int)(myWidth*1.0/4); lpPopup.setMargins(0,0,(int)(myWidth*3.0/4),0); popupLL.setLayoutParams(lpPopup); }elseif(myType==2){ android.widget.RelativeLayout.LayoutParamslpPopup=(android.widget.RelativeLayout.LayoutParams)popupLL .getLayoutParams(); lpPopup.width=(int)(myWidth*1.0/4); lpPopup.setMargins((int)(myWidth*3.0/4),0,0,0); popupLL.setLayoutParams(lpPopup); } } /** *设置popup的样式 */ privatevoidsetPopup(){ //设置AccessoryPopup的view this.setContentView(myMenuView); //设置AccessoryPopup弹出窗体的宽度 this.setWidth(LayoutParams.MATCH_PARENT); //设置AccessoryPopup弹出窗体的高度 this.setHeight(LayoutParams.MATCH_PARENT); //设置AccessoryPopup弹出窗体可点击 this.setFocusable(true); //设置AccessoryPopup弹出窗体的动画效果 if(myType==1){ this.setAnimationStyle(R.style.AnimTopLeft); }elseif(myType==2){ this.setAnimationStyle(R.style.AnimTopRight); }else{ //this.setAnimationStyle(R.style.AnimTop); this.setAnimationStyle(R.style.AnimTopMiddle); } //实例化一个ColorDrawable颜色为半透明 ColorDrawabledw=newColorDrawable(0x33000000); //设置SelectPicPopupWindow弹出窗体的背景 this.setBackgroundDrawable(dw); myMenuView.setOnTouchListener(newOnTouchListener(){ @Override publicbooleanonTouch(Viewv,MotionEventevent){ intheight=popupLL.getBottom(); intleft=popupLL.getLeft(); intright=popupLL.getRight(); System.out.println("--popupLL.getBottom()--:" +popupLL.getBottom()); inty=(int)event.getY(); intx=(int)event.getX(); if(event.getAction()==MotionEvent.ACTION_UP){ if(y>height||x<left||x>right){ System.out.println("---点击位置在列表下方--"); dismiss(); } } returntrue; } }); } /** *显示弹窗界面 * *@paramview */ publicvoidshow(Viewview){ if(myIsDirty){ myIsDirty=false; adapter=newPopupAdapter(myContext,myItems,myType); myLv.setAdapter(adapter); } showAsDropDown(view,0,0); } }

4.自定义弹窗布局top_popup.xml[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/popup_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="#ffffff" android:orientation="vertical"> <ListView android:id="@+id/popup_lv" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@color/content_line" android:dividerHeight="0.5dp"> </ListView> <TextView android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/reserve_line"/> </LinearLayout> </RelativeLayout>

5.弹窗类表适配器类PopupAdapter[java]view plaincopypackagecom.popuptest; importjava.util.ArrayList; importandroid.content.Context; importandroid.view.Gravity; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.BaseAdapter; importandroid.widget.RelativeLayout.LayoutParams; importandroid.widget.TextView; publicclassPopupAdapterextendsBaseAdapter{ privateContextmyContext; privateLayoutInflaterinflater; privateArrayList<String>myItems; privateintmyType; publicPopupAdapter(Contextcontext,ArrayList<String>items,inttype){ this.myContext=context; this.myItems=items; this.myType=type; inflater=LayoutInflater.from(myContext); } @Override publicintgetCount(){ returnmyItems.size(); } @Override publicStringgetItem(intposition){ returnmyItems.get(position); } @Override publiclonggetItemId(intposition){ return0; } @Override publicViewgetView(intposition,ViewconvertView,ViewGroupparent){ PopupHolderholder=null; if(convertView==null){ holder=newPopupHolder(); convertView=inflater.inflate(R.layout.top_popup_item,null); holder.itemNameTv=(TextView)convertView .findViewById(R.id.popup_tv); if(myType==0){ holder.itemNameTv.setGravity(Gravity.CENTER); }elseif(myType==1){ holder.itemNameTv.setGravity(Gravity.LEFT); }elseif(myType==2){ holder.itemNameTv.setGravity(Gravity.RIGHT); } convertView.setTag(holder); }else{ holder=(PopupHolder)convertView.getTag(); } StringitemName=getItem(position); holder.itemNameTv.setText(itemName); returnconvertView; } privateclassPopupHolder{ TextViewitemNameTv; } }

6.子item布局top_popup_item.xml[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffff" android:padding="10dp"> <TextView android:id="@+id/popup_tv" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/urm_tv"/> </RelativeLayout>

7.主界面顶部布局urm_top.xml[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#eeeeee"> <ImageButton android:id="@+id/urm_back_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:background="@null" android:contentDescription="@string/app_name" android:src="@drawable/back"/> <LinearLayout android:id="@+id/urm_top_ll" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:id="@+id/urm_top_tv" style="@style/main_tv_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="企业客户"/> <ImageView android:id="@+id/urm_top_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:background="@null" android:contentDescription="@string/app_name" android:src="@drawable/switch02"/> </LinearLayout> <RelativeLayout android:id="@+id/urm_top_right_rl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true"> <ImageButton android:id="@+id/urm_create_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:contentDescription="@string/app_name" android:src="@drawable/btn_add_2x"/> <Button android:id="@+id/urm_confirm_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:gravity="center_vertical" android:padding="10dp" android:text="确定" android:textColor="@color/blue2" android:textSize="18sp" android:visibility="gone"/> </RelativeLayout> <ImageButton android:id="@+id/urm_search_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@id/urm_top_right_rl" android:background="@null" android:contentDescription="@string/app_name" android:src="@drawable/search" android:visibility="gone"/> </RelativeLayout>

8.styles.xml文件[html]view plaincopy<resources> <!-- Baseapplicationtheme,dependentonAPIlevel.Thisthemeisreplaced byAppBaseThemefromres/values-vXX/styles.xmlonnewerdevices. --> <stylename="AppBaseTheme"parent="android:Theme.Light"> <!-- ThemecustomizationsavailableinnewerAPIlevelscangoin res/values-vXX/styles.xml,whilecustomizationsrelatedto backward-compatibilitycangohere. --> </style> <!--Applicationtheme.--> <stylename="AppTheme"parent="AppBaseTheme"> <!--AllcustomizationsthatareNOTspecifictoaparticularAPI-levelcangohere.--> </style> <stylename="AnimTop"parent="@android:style/Animation"> <itemname="android:windowEnterAnimation">@anim/push_top_in</item> <itemname="android:windowExitAnimation">@anim/push_top_out</item> </style> <stylename="AnimTopRight"parent="@android:style/Animation"> <itemname="android:windowEnterAnimation">@anim/top_right_in</item> <itemname="android:windowExitAnimation">@anim/top_right_out</item> </style> <stylename="AnimTopLeft"parent="@android:style/Animation"> <itemname="android:windowEnterAnimation">@anim/top_left_in</item> <itemname="android:windowExitAnimation">@anim/top_left_out</item> </style> <stylename="AnimTopMiddle"parent="@android:style/Animation"> <itemname="android:windowEnterAnimation">@anim/top_middle_in</item> <itemname="android:windowExitAnimation">@anim/top_middle_out</item> </style> <stylename="main_tv_style"> <itemname="android:textSize">20sp</item> <itemname="android:textColor">#000000</item> </style> <stylename="urm_tv"> <itemname="android:textSize">18sp</item> </style> </resources>

9.各种动画效果

push_top_in.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <!--从屏幕上面进入--> <setxmlns:android="/apk/res/android"> <translate android:duration="500" android:fromYDelta="-100%p" android:toYDelta="0"/> <alpha android:duration="500" android:fromAlpha="0.0" android:toAlpha="1.0"/> </set>

push_top_out.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <!--从屏幕上面退出--> <setxmlns:android="/apk/res/android"> <translate android:duration="500" android:fromYDelta="0" android:toYDelta="-100%p"/> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.0"/> </set>

top_left_in.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="0.0" android:fromYScale="0.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="0%" android:pivotY="0%" android:toXScale="1.0" android:toYScale="1.0"/> </set>

top_left_out.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="0%" android:pivotY="0%" android:toXScale="0.0" android:toYScale="0.0"/> </set>

top_middle_in.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="0.0" android:fromYScale="0.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="50%" android:pivotY="0%" android:toXScale="1.0" android:toYScale="1.0"/> </set>

top_middle_out.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="50%" android:pivotY="0%" android:toXScale="0.0" android:toYScale="0.0"/> </set>

top_right_in.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="0.0" android:fromYScale="0.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="100%" android:pivotY="0%" android:toXScale="1.0" android:toYScale="1.0"/> </set>

top_right_out.xml

[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <setxmlns:android="/apk/res/android"> <scale android:duration="500" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="100%" android:pivotY="0%" android:toXScale="0.0" android:toYScale="0.0"/> </set>

运行项目即可搞定！