當前位置：首頁 > 运维知识 > Android >内容正文

Android

[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)

發布時間：2024/5/28 Android 82 豆豆

生活随笔收集整理的這篇文章主要介紹了 [Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? 這篇文章主要是自己研究如何對底部菜單進行布局,并簡單的實現點擊不同"按鈕"實現圖片切換和背景切換的功能,最后通過PopupWindows實現彈出菜單,點擊不同按鈕能實現不同方法,相當于美圖秀秀編輯圖片的功能吧!它并沒有涉及到Fragment碎片切換頁面的功能,因為頁面始終顯示被處理的圖片.這是我初學Android的一篇基礎性文章和在線思想筆記,網上有很多更優秀的demo,不過也希望對大家有用~
? ? 首先介紹兩種方法實現底部菜單點擊不同圖標顯示選中狀態的效果.
? ? (可參考簡短文章：Android_UI_點擊按鈕切換背景效果實現)

? ? 一. 底部菜單第一種方法

? ? 它顯示的效果如下圖所示,其中底部菜單布局采用多個LinearLayout進行,點擊不同"按鈕"可以改變其背景圖片.

? ? ? ? ??? ??

? ? 首先介紹它的activity_main.xml布局：
? ? 1.它采用3個RelativeLayout相對布局進行,分別對應標題路徑、中間顯示圖片和底部的菜單欄;
? ? 2.底部菜單欄由5個LinearLayout水平布局組成,每一個LinearLayout都由ImageView和TextView組成.
? ? 代碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.touchimagetest.MainActivity"tools:ignore="MergeRootFrame" ><RelativeLayout android:id="@+id/MyLayout_top"android:orientation="horizontal" android:layout_width="fill_parent"android:layout_height="40dp" android:layout_alignParentTop="true"android:gravity="center"><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="15sp"android:text="顯示圖片操作" /></RelativeLayout><RelativeLayoutandroid:id="@+id/MyLayout_bottom"android:orientation="horizontal" android:layout_width="fill_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:background="@drawable/image_toolbar_bg"android:gravity="center"><LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:layout_alignParentBottom="true" ><LinearLayout android:id="@+id/layout_watch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_watch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/tab_watch_btn" /> <TextView android:id="@+id/textview_watch"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="查看" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/layout_increase" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_increase" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/tab_increase_btn" /> <TextView android:id="@+id/textview_increase"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="增強" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/layout_effect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_effect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/tab_effect_btn" /> <TextView android:id="@+id/textview_effect"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="特效" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout><LinearLayout android:id="@+id/layout_frame" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_frame" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/tab_frame_btn" /> <TextView android:id="@+id/textview_frame"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="相框" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/layout_person" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_person" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/tab_person_btn" /> <TextView android:id="@+id/textview_person"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="美白" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout></LinearLayout> </RelativeLayout><RelativeLayoutandroid:id="@+id/Content_Layout" android:orientation="horizontal"android:layout_width="fill_parent" android:layout_height="fill_parent"android:layout_above="@id/MyLayout_bottom" android:layout_below="@id/MyLayout_top"android:background="#EFDFDF"android:gravity="center"><ImageViewandroid:id="@+id/imageView1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_gravity="center_horizontal"android:scaleType="matrix" /></RelativeLayout> </RelativeLayout> ? ? 此時你需要注意的是為每個LinearLayout中ImageView指定src時并不是原圖片,而是drawable中的xml文件,如<ImageView android:id="@+id/image_watch".. />.

?
? ? 同時每個drawable中的xml文件對應每個相應的按鈕,上圖中effect(效果)、increase(增強)、frame(相框)、watch(查看)、person(美白).其中每個格式基本如下,如tab_watch_btn.xml：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" ><item android:drawable="@drawable/image_icon_watch_sel" android:state_selected="true"/><item android:drawable="@drawable/image_icon_watch_sel" android:state_pressed="true"/> <item android:drawable="@drawable/image_icon_watch_nor"/> </selector> ? ? 其中state_selected表示"選中"狀態,state_pressed表示"點擊"效果,而最后的<item android:drawable="@drawable/image_icon_watch_nor"/> 表示默認情況顯示圖片,原圖片如下：

? ? 同時設置選中狀態"按鈕"的背景加黑效果,在drawable中添加selector_tab_background.xml文件:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" ><item android:drawable="@drawable/image_home_layout_bg" android:state_pressed="true"/> <item android:drawable="@drawable/image_home_layout_bg" android:state_selected="true"/> </selector>

? ? 然后在MainActivity.java中添加自定義變量,主要是LinearLayout(點擊它響應事件)和ImageView(切換圖標).

//自定義變量 private LinearLayout layoutWatch; //查看圖片 private LinearLayout layoutIncrease; //增強圖片 private LinearLayout layoutEffect; //圖片特效 private LinearLayout layoutFrame; //圖片邊框 private LinearLayout layoutPerson; //圖片美白private ImageView imageWatch; private ImageView imageIncrease; private ImageView imageEffect; private ImageView imageFrame; private ImageView imagePerson;

? ? 然后添加代碼如下,該種方法需要在點擊按鈕中設置其他LinearLayout圖標狀態為未選擇狀態,否則會出現點擊按鈕的效果(即:點擊就切換圖標一次,我們需要的是點擊就狀態長顯).

//創建活動 @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//布局layoutWatch = (LinearLayout) findViewById(R.id.layout_watch);layoutIncrease = (LinearLayout) findViewById(R.id.layout_increase);layoutEffect = (LinearLayout) findViewById(R.id.layout_effect);layoutFrame = (LinearLayout) findViewById(R.id.layout_frame);layoutPerson = (LinearLayout) findViewById(R.id.layout_person);//圖標 imageWatch = (ImageView) findViewById(R.id.image_watch);imageIncrease = (ImageView) findViewById(R.id.image_increase);imageEffect = (ImageView) findViewById(R.id.image_effect);imageFrame = (ImageView) findViewById(R.id.image_frame);imagePerson = (ImageView) findViewById(R.id.image_person);//初始化布局initView();//按鈕一監聽事件查看圖片layoutWatch.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {//設置背景圖片加深Toast.makeText(MainActivity.this, "點擊按鈕1", Toast.LENGTH_SHORT).show();layoutWatch.setBackgroundResource(R.drawable.selector_tab_background);//設置圖標選中情況layoutWatch.setSelected(true);layoutIncrease.setSelected(false);layoutEffect.setSelected(false);layoutFrame.setSelected(false);layoutPerson.setSelected(false);}});//按鈕二監聽事件增強圖片layoutIncrease = (LinearLayout) findViewById(R.id.layout_increase);layoutIncrease.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {layoutIncrease.setBackgroundResource(R.drawable.selector_tab_background);//設置圖標選中情況layoutWatch.setSelected(false);layoutIncrease.setSelected(true);layoutEffect.setSelected(false);layoutFrame.setSelected(false);layoutPerson.setSelected(false);}});//按鈕三監聽事件圖片特效layoutEffect = (LinearLayout) findViewById(R.id.layout_effect);layoutEffect.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {//設置背景圖片layoutEffect.setBackgroundResource(R.drawable.selector_tab_background);//設置圖標選中情況layoutWatch.setSelected(false);layoutIncrease.setSelected(false);layoutEffect.setSelected(true);layoutFrame.setSelected(false);layoutPerson.setSelected(false);}});//按鈕四監聽事件圖片相框layoutFrame = (LinearLayout) findViewById(R.id.layout_frame);layoutFrame.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {//設置背景圖片layoutFrame.setBackgroundResource(R.drawable.selector_tab_background);//設置圖標選中情況layoutWatch.setSelected(false);layoutIncrease.setSelected(false);layoutEffect.setSelected(false);layoutFrame.setSelected(true);layoutPerson.setSelected(false);}});//按鈕五監聽事件圖片美白layoutPerson = (LinearLayout) findViewById(R.id.layout_person);layoutPerson.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {//設置背景圖片layoutPerson.setBackgroundResource(R.drawable.selector_tab_background);//設置圖標選中情況layoutWatch.setSelected(false);layoutIncrease.setSelected(false);layoutEffect.setSelected(false);layoutFrame.setSelected(false);layoutPerson.setSelected(true);}}); }//初始化布局 private void initView() {imageWatch.setImageResource(R.drawable.tab_watch_btn);imageIncrease.setImageResource(R.drawable.tab_increase_btn);imageEffect.setImageResource(R.drawable.tab_effect_btn);imageFrame.setImageResource(R.drawable.tab_frame_btn);imagePerson.setImageResource(R.drawable.tab_person_btn); }

? ? 二. 底部菜單第二種方法

? ?其中activity_main.xml中布局與第一個相同,不同的是在xml中就指定drawable-hdpi中原圖片名,因為它不在調用drawable如tab_watch_btn.xml文件,而使用代碼直接操作.其中5個LinearLayout一個如下所示： <LinearLayout android:id="@+id/layout_watch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/image_watch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:src="@drawable/image_icon_watch_nor" /> <TextView android:id="@+id/textview_watch"android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="查看" android:textColor="#ffffff" android:textSize="10sp" /> </LinearLayout> ? ?此時它的文件夾結構如下圖,drawble沒有設置背景加深和加載圖標的xml文件：
? ? 同時5個LinearLayout(查看、增強、特效、相框、美白)設置觸屏響應事件： layoutWatch.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_DOWN) { //按下背景圖片 layoutWatch.setBackgroundResource(R.drawable.image_home_layout_bg);layoutIncrease.setBackgroundResource(R.drawable.image_home_layout_no);layoutEffect.setBackgroundResource(R.drawable.image_home_layout_no);layoutFrame.setBackgroundResource(R.drawable.image_home_layout_no);layoutPerson.setBackgroundResource(R.drawable.image_home_layout_no);//設置按鈕圖片imageWatch.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_watch_sel)); imageIncrease.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_increase_nor)); imageEffect.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_effect_nor)); imageFrame.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_frame_nor)); imagePerson.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_person_nor)); }return false; } }); ? ?需要注意的是網上下面這段代碼僅實現點擊一下圖片變換的效果,而如果想要實現長顯需要如我上面的所示.還見到一個使用Radio實現該效果,當點擊一次時判斷是否選中并顯示相應圖片.而使用FragmentTabHost實現同樣效果,我不知其原理~ bottomReturnBtn.setOnTouchListener(new OnTouchListener() { //這段代碼僅僅實現點擊一次改變圖標功能public boolean onTouch(View v, MotionEvent event) { Button upStepBtn = (Button) v; if(event.getAction() == MotionEvent.ACTION_DOWN){ upStepBtn.setBackgroundResource(R.drawable.bottom_sub_order_btn); }else if(event.getAction() == MotionEvent.ACTION_UP){ upStepBtn.setBackgroundResource(R.drawable.bottom_return_check); finish(); } return false; } });

? ? 三. PopupWindow實現彈出菜單

? ??然后講解如何通過PopupWindow實現下面的功能.效果如下圖所示,簡單實現PopupWindow功能可結合下面兩篇文章：
? ??android之popupWindow在指定位置上的顯示
? ??[android開發] 使用PopupWindow實現頁面點擊頂部彈出下拉菜單

? ? 首先,為PopupWindow設置動畫效果,在res文件夾下添加文件夾anim,然后添加anim_entry.xml文件： <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="0" android:fromYDelta="120" android:toYDelta="0" android:duration="500" /> </set>? ?它是出現效果：從菜單欄底部向上彈出,同時添加anim_exit.xml: <?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="200" /> </set>? ?最后在res/values文件夾styles.xml中添加動畫效果,通過調用name="AnimationPreview"可以實現動畫： <style name="AnimationPreview"> <item name="android:windowEnterAnimation">@anim/anim_entry</item> <item name="android:windowExitAnimation">@anim/anim_exit</item> </style> ? ?然后你需要自定義彈出PopupWindow的布局xml文件,如popup_effect.xml： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content" android:layout_height="wrap_content" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@drawable/image_button_bg_left" android:orientation="vertical" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:orientation="horizontal" > <LinearLayout android:id="@+id/layout_effect_hj"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:src="@drawable/image_effect_hj" /><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:shadowColor="#ff000000" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1.0" android:text="懷舊" android:textColor="#ffffffff" android:textSize="13.0dip" /> </LinearLayout> <LinearLayout android:id="@+id/layout_effect_fd"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:src="@drawable/image_effect_fd" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:shadowColor="#ff000000" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1.0" android:text="浮雕" android:textColor="#ffffffff" android:textSize="13.0dip" /> </LinearLayout> <LinearLayout android:id="@+id/layout_effect_gz"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:src="@drawable/image_effect_gz" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:shadowColor="#ff000000" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1.0" android:text="光照" android:textColor="#ffffffff" android:textSize="13.0dip" /> </LinearLayout> <LinearLayout android:id="@+id/layout_effect_sm"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:src="@drawable/image_effect_sm" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:shadowColor="#ff000000" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1.0" android:text="素描" android:textColor="#ffffffff" android:textSize="13.0dip" /> </LinearLayout> <LinearLayout android:id="@+id/layout_effect"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:src="@drawable/image_effect" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="1.0dip" android:shadowColor="#ff000000" android:shadowDx="1.0" android:shadowDy="1.0" android:shadowRadius="1.0" android:text="銳化" android:textColor="#ffffffff" android:textSize="13.0dip" /> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout>? ?它的在Xml中Graphical Layout顯示效果如下圖所示： ? ? ? ??
? ? 添加5個自定義變量： //彈出按鈕 private PopupWindow popupWindow1; private PopupWindow popupWindow2; private PopupWindow popupWindow3; private PopupWindow popupWindow4; private PopupWindow popupWindow5;? ?然后當點擊"相框"布局LinearLayout時,添加代碼如下(其他類似)： //按鈕四監聽事件圖片相框 layoutFrame.setOnClickListener( new OnClickListener() {@Overridepublic void onClick(View v) {//載入PopupWindowif (popupWindow4 != null&&popupWindow4.isShowing()) { popupWindow4.dismiss(); return; } else { initmPopupWindowView(4); //number=4int[] location = new int[2]; v.getLocationOnScreen(location); Toast.makeText(MainActivity.this, ""+location[0], Toast.LENGTH_SHORT).show();popupWindow4.showAtLocation(v, Gravity.NO_GRAVITY, location[0], location[1]-popupWindow4.getHeight());}} });? ?其中initmPopupWindowView(int number)為自定義函數,參數對應的是點擊LinearLayout的序號,點擊"按鈕"4即傳入數字4： public void initmPopupWindowView(int number) { View customView = null;// 獲取自定義布局文件 if(number==1) { //查看customView = getLayoutInflater().inflate(R.layout.popup_watch, null, false); // 創建PopupWindow實例 (250,180)分別是寬度和高度 popupWindow1 = new PopupWindow(customView, 250, 280); // 設置動畫效果 [R.style.AnimationFade 是自己事先定義好的] popupWindow1.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow1 != null && popupWindow1.isShowing()) { popupWindow1.dismiss(); popupWindow1 = null; } return false; } }); }if(number==2) { //增強customView = getLayoutInflater().inflate(R.layout.popup_increase, null, false); popupWindow2 = new PopupWindow(customView, 450, 150);// 使其聚集要想監聽菜單里控件的事件就必須要調用此方法 popupWindow2.setFocusable(true); // 設置允許在外點擊消失 popupWindow2.setOutsideTouchable(true); popupWindow2.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow2 != null && popupWindow2.isShowing()) { popupWindow2.dismiss(); popupWindow2 = null; } return false; } }); }if(number==3) { //效果customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false); popupWindow3 = new PopupWindow(customView, 450, 150);// 使其聚集要想監聽菜單里控件的事件就必須要調用此方法 popupWindow3.setFocusable(true); // 設置允許在外點擊消失 popupWindow3.setOutsideTouchable(true); popupWindow3.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow3 != null && popupWindow3.isShowing()) { popupWindow3.dismiss(); popupWindow3 = null; } return false; } }); }if(number==4) {customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false); popupWindow4 = new PopupWindow(customView, 450, 150);// 使其聚集要想監聽菜單里控件的事件就必須要調用此方法 popupWindow4.setFocusable(true); popupWindow4.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow4 != null && popupWindow4.isShowing()) { popupWindow4.dismiss(); popupWindow4 = null; } return false; } }); }if(number==5) {customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false); popupWindow5 = new PopupWindow(customView, 450, 150);// 使其聚集要想監聽菜單里控件的事件就必須要調用此方法 popupWindow5.setFocusable(true); popupWindow5.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow5 != null && popupWindow5.isShowing()) { popupWindow5.dismiss(); popupWindow5 = null; } return false; } }); } //end if}

? ? 四. PopupWindow實現點擊效果

? ? 做到這里,你就能實現點擊底部菜單實現彈出PopupWindows效果,但顯然是不足的.怎樣通過點擊彈出PopupWindow中的按鈕實現做不同的事情呢?下面講解,你只需要添加下面的代碼即可實現"特效"效果.

? ? 代碼如下,你可以自定義函數實現不同效果功能(結合前面幾篇文章,我的美圖秀秀基本完成)：
if(number==3) { //效果customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false); popupWindow3 = new PopupWindow(customView, 450, 150);// 使其聚集要想監聽菜單里控件的事件就必須要調用此方法 popupWindow3.setFocusable(true); // 設置允許在外點擊消失 popupWindow3.setOutsideTouchable(true); popupWindow3.setAnimationStyle(R.style.AnimationPreview); // 自定義view添加觸摸事件 customView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (popupWindow3 != null && popupWindow3.isShowing()) { popupWindow3.dismiss(); popupWindow3 = null; } return false; } }); //判斷點擊子菜單不同按鈕實現不同功能LinearLayout layoutEffect1 = (LinearLayout) customView.findViewById(R.id.layout_effect_hj);layoutEffect1.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "效果-懷舊", Toast.LENGTH_SHORT).show();}});LinearLayout layoutEffect2 = (LinearLayout) customView.findViewById(R.id.layout_effect_fd);layoutEffect2.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "效果-浮雕", Toast.LENGTH_SHORT).show();}});LinearLayout layoutEffect3 = (LinearLayout) customView.findViewById(R.id.layout_effect_gz);layoutEffect3.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "效果-光照", Toast.LENGTH_SHORT).show();}});LinearLayout layoutEffect4 = (LinearLayout) customView.findViewById(R.id.layout_effect_sm);layoutEffect4.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "效果-素描", Toast.LENGTH_SHORT).show();//打開圖片OpenImage();}});LinearLayout layoutEffect5 = (LinearLayout) customView.findViewById(R.id.layout_effect);layoutEffect5.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "效果-銳化", Toast.LENGTH_SHORT).show();}}); }

? ? 五. 總結

? ? 本文章主要講述如何加載菜單欄在底部,同時講述PopupWindows彈出事件,其實更好的布局方法是通過適配器,但是我才學Android,很多東西還不懂.所以它只是一篇初級文章,但完全能實現需要功能.
? ? 適配器參考：Android之用PopupWindow實現彈出菜單
? ? 最后希望文章對大家有所幫助,如果文章中有錯誤或不足之處見諒~
????上聯：只有真正的做了,才知道自己的技術有多渣
??? 下聯：只有真正做完了,才知道自己的成就有多高
??? 橫批：同志仍需努力
??????????????????????????????????——By:Eastmount
??? 下載地址demo：http://download.csdn.net/detail/eastmount/8139907
? ? (By:Eastmount 2014-11-6 中午12點 http://blog.csdn.net/eastmount/)

總結

以上是生活随笔為你收集整理的[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [Android] 通过Menu实现图片
下一篇： [Android] 使用Include布