[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)
生活随笔
收集整理的這篇文章主要介紹了
[Android] 底部菜单布局+PopupWindows实现弹出菜单功能(初级篇)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? 這篇文章主要是自己研究如何對底部菜單進行布局,并簡單的實現點擊不同"按鈕"實現圖片切換和背景切換的功能,最后通過PopupWindows實現彈出菜單,點擊不同按鈕能實現不同方法,相當于美圖秀秀編輯圖片的功能吧!它并沒有涉及到Fragment碎片切換頁面的功能,因為頁面始終顯示被處理的圖片.這是我初學Android的一篇基礎性文章和在線思想筆記,網上有很多更優秀的demo,不過也希望對大家有用~
? ? 首先介紹兩種方法實現底部菜單點擊不同圖標顯示選中狀態的效果.
? ? (可參考簡短文章：Android_UI_點擊按鈕切換背景效果實現)
? ? ? ? ??? ??
? ? 同時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; } });
? ??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"可以實現動畫： <!-- 定義popupwindows動畫效果 --><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}
? ? 代碼如下,你可以自定義函數實現不同效果功能(結合前面幾篇文章,我的美圖秀秀基本完成)：
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();}}); }
? ? 適配器參考：Android之用PopupWindow實現彈出菜單
? ? 最后希望文章對大家有所幫助,如果文章中有錯誤或不足之處見諒~
????上聯：只有真正的做了,才知道自己的技術有多渣
??? 下聯：只有真正做完了,才知道自己的成就有多高
??? 橫批：同志仍需努力
??????????????????????????????????——By:Eastmount
??? 下載地址demo：http://download.csdn.net/detail/eastmount/8139907
? ? (By:Eastmount 2014-11-6 中午12點 http://blog.csdn.net/eastmount/)
? ? 首先介紹兩種方法實現底部菜單點擊不同圖標顯示選中狀態的效果.
? ? (可參考簡短文章：Android_UI_點擊按鈕切換背景效果實現)
? ? 一. 底部菜單 第一種方法
? ? 它顯示的效果如下圖所示,其中底部菜單布局采用多個LinearLayout進行,點擊不同"按鈕"可以改變其背景圖片.? ? ? ? ??? ??
? ? 首先介紹它的activity_main.xml布局：
? ? 1.它采用3個RelativeLayout相對布局進行,分別對應標題路徑、中間顯示圖片和底部的菜單欄;
? ? 2.底部菜單欄由5個LinearLayout水平布局組成,每一個LinearLayout都由ImageView和TextView組成.
? ? 代碼如下：
?
? ? 同時每個drawable中的xml文件對應每個相應的按鈕,上圖中effect(效果)、increase(增強)、frame(相框)、watch(查看)、person(美白).其中每個格式基本如下,如tab_watch_btn.xml：
? ? 同時設置選中狀態"按鈕"的背景加黑效果,在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"可以實現動畫： <!-- 定義popupwindows動畫效果 --><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布