DBMNG数据库管理与应用

独立思考能力，对于从事科学研究或其他任何工作，都是十分必要的。

目录 / 分类

数据库基础
Access
SQLServer
MySQL
SQLite
Oracle
PostgreSQL
移动应用
经验分享
服务器配置
网文摘录
下载中心
CUBRID数据库
验证/二维/条形码
当前位置：首页 > 移动应用 > Android

Android底部菜单布局+PopupWindows实现弹出菜单功能

这篇文章主要是自己研究如何对底部菜单进行布局,并简单的实现点击不同"按钮"实现图片切换和背景切换的功能,最后通过PopupWindows实现弹出菜单,点击不同按钮能实现不同方法,相当于美图秀秀编辑图片的功能吧!它并没有涉及到Fragment碎片切换页面的功能,因为页面始终显示被处理的图片.这是我初学Android的一篇基础性文章和在线思想笔记,网上有很多更优秀的demo,不过也希望对大家有用~
    首先介绍两种方法实现底部菜单点击不同图标显示选中状态的效果.
    (可参考简短文章：Android_UI_点击按钮切换背景效果实现)

    一. 底部菜单 第一种方法

    它显示的效果如下图所示,其中底部菜单布局采用多个LinearLayout进行,点击不同"按钮"可以改变其背景图片.


              

    首先介绍它的activity_main.xml布局：
    1.它采用3个RelativeLayout相对布局进行,分别对应标题路径、中间显示图片和底部的菜单栏;
    2.底部菜单栏由5个LinearLayout水平布局组成,每一个LinearLayout都由ImageView和TextView组成.
    代码如下：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/container"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     tools:context="com.example.touchimagetest.MainActivity"  
  7.     tools:ignore="MergeRootFrame" >  
  8.      <!-- 顶部路径 -->  
  9.     <RelativeLayout   
  10.         android:id="@+id/MyLayout_top"  
  11.         android:orientation="horizontal"   
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="40dp"   
  14.         android:layout_alignParentTop="true"  
  15.         android:gravity="center">  
  16.         <TextView  
  17.             android:id="@+id/textView1"  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:textSize="15sp"  
  21.             android:text="显示图片操作" />  
  22.     </RelativeLayout>  
  23.     <!-- 底部按钮 -->  
  24.     <RelativeLayout  
  25.         android:id="@+id/MyLayout_bottom"  
  26.         android:orientation="horizontal"   
  27.         android:layout_width="fill_parent"  
  28.         android:layout_height="50dp"  
  29.         android:layout_alignParentBottom="true"  
  30.         android:background="@drawable/image_toolbar_bg"  
  31.         android:gravity="center">  
  32.         <LinearLayout   
  33.             android:layout_width="match_parent"  
  34.             android:layout_height="match_parent"  
  35.             android:orientation="horizontal"  
  36.             android:layout_alignParentBottom="true" >  
  37.              
  38.             <LinearLayout   
  39.                 android:id="@+id/layout_watch"    
  40.                 android:layout_width="wrap_content"    
  41.                 android:layout_height="wrap_content"    
  42.                 android:layout_weight="1"  
  43.                 android:gravity="center"    
  44.                 android:orientation="vertical" >    
  45.                 <ImageView    
  46.                     android:id="@+id/image_watch"    
  47.                     android:layout_width="wrap_content"    
  48.                     android:layout_height="wrap_content"    
  49.                     android:padding="3dp"   
  50.                     android:src="@drawable/tab_watch_btn" />    
  51.                 <TextView    
  52.                     android:id="@+id/textview_watch"  
  53.                     android:layout_width="wrap_content"    
  54.                     android:layout_height="wrap_content"     
  55.                     android:text="查看"    
  56.                     android:textColor="#ffffff"    
  57.                     android:textSize="10sp" />    
  58.             </LinearLayout>    
  59.               
  60.             <LinearLayout   
  61.                 android:id="@+id/layout_increase"    
  62.                 android:layout_width="wrap_content"    
  63.                 android:layout_height="wrap_content"    
  64.                 android:layout_weight="1"  
  65.                 android:gravity="center"    
  66.                 android:orientation="vertical" >    
  67.                 <ImageView    
  68.                     android:id="@+id/image_increase"    
  69.                     android:layout_width="wrap_content"    
  70.                     android:layout_height="wrap_content"    
  71.                     android:padding="3dp"   
  72.                     android:src="@drawable/tab_increase_btn" />    
  73.                 <TextView    
  74.                     android:id="@+id/textview_increase"  
  75.                     android:layout_width="wrap_content"    
  76.                     android:layout_height="wrap_content"     
  77.                     android:text="增强"    
  78.                     android:textColor="#ffffff"    
  79.                     android:textSize="10sp" />    
  80.             </LinearLayout>    
  81.               
  82.             <LinearLayout   
  83.                 android:id="@+id/layout_effect"    
  84.                 android:layout_width="wrap_content"    
  85.                 android:layout_height="wrap_content"    
  86.                 android:layout_weight="1"  
  87.                 android:gravity="center"    
  88.                 android:orientation="vertical" >    
  89.                 <ImageView    
  90.                     android:id="@+id/image_effect"    
  91.                     android:layout_width="wrap_content"    
  92.                     android:layout_height="wrap_content"    
  93.                     android:padding="3dp"   
  94.                     android:src="@drawable/tab_effect_btn" />    
  95.                 <TextView    
  96.                     android:id="@+id/textview_effect"  
  97.                     android:layout_width="wrap_content"    
  98.                     android:layout_height="wrap_content"     
  99.                     android:text="特效"    
  100.                     android:textColor="#ffffff"    
  101.                     android:textSize="10sp" />    
  102.             </LinearLayout>  
  103.               
  104.             <LinearLayout   
  105.                 android:id="@+id/layout_frame"    
  106.                 android:layout_width="wrap_content"    
  107.                 android:layout_height="wrap_content"    
  108.                 android:layout_weight="1"  
  109.                 android:gravity="center"    
  110.                 android:orientation="vertical" >    
  111.                 <ImageView    
  112.                     android:id="@+id/image_frame"    
  113.                     android:layout_width="wrap_content"    
  114.                     android:layout_height="wrap_content"    
  115.                     android:padding="3dp"   
  116.                     android:src="@drawable/tab_frame_btn" />    
  117.                 <TextView    
  118.                     android:id="@+id/textview_frame"  
  119.                     android:layout_width="wrap_content"    
  120.                     android:layout_height="wrap_content"     
  121.                     android:text="相框"    
  122.                     android:textColor="#ffffff"    
  123.                     android:textSize="10sp" />    
  124.             </LinearLayout>   
  125.               
  126.             <LinearLayout   
  127.                 android:id="@+id/layout_person"    
  128.                 android:layout_width="wrap_content"    
  129.                 android:layout_height="wrap_content"    
  130.                 android:layout_weight="1"  
  131.                 android:gravity="center"    
  132.                 android:orientation="vertical" >    
  133.                 <ImageView    
  134.                     android:id="@+id/image_person"    
  135.                     android:layout_width="wrap_content"    
  136.                     android:layout_height="wrap_content"    
  137.                     android:padding="3dp"   
  138.                     android:src="@drawable/tab_person_btn" />    
  139.                 <TextView    
  140.                     android:id="@+id/textview_person"  
  141.                     android:layout_width="wrap_content"    
  142.                     android:layout_height="wrap_content"     
  143.                     android:text="美白"    
  144.                     android:textColor="#ffffff"    
  145.                     android:textSize="10sp" />    
  146.             </LinearLayout>  
  147.               
  148.         </LinearLayout>         
  149.     </RelativeLayout>  
  150.     <!-- 显示图片 -->  
  151.     <RelativeLayout  
  152.         android:id="@+id/Content_Layout"   
  153.         android:orientation="horizontal"  
  154.         android:layout_width="fill_parent"   
  155.         android:layout_height="fill_parent"  
  156.         android:layout_above="@id/MyLayout_bottom"   
  157.         android:layout_below="@id/MyLayout_top"  
  158.         android:background="#EFDFDF"  
  159.         android:gravity="center">  
  160.         <ImageView  
  161.             android:id="@+id/imageView1"  
  162.             android:layout_width="fill_parent"  
  163.             android:layout_height="fill_parent"  
  164.             android:layout_gravity="center_horizontal"  
  165.             android:scaleType="matrix" />  
  166.     </RelativeLayout>  
  167. </RelativeLayout>  
    此时你需要注意的是为每个LinearLayout中ImageView指定src时并不是原图片,而是drawable中的xml文件,如<ImageView android:id="@+id/image_watch".. />.

 
    同时每个drawable中的xml文件对应每个相应的按钮,上图中effect(效果)、increase(增强)、frame(相框)、watch(查看)、person(美白).其中每个格式基本如下,如tab_watch_btn.xml：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <item android:drawable="@drawable/image_icon_watch_sel" android:state_selected="true"/>  
  4.     <item android:drawable="@drawable/image_icon_watch_sel" android:state_pressed="true"/>   
  5.     <item android:drawable="@drawable/image_icon_watch_nor"/>   
  6. </selector>  
    其中state_selected表示"选中"状态,state_pressed表示"点击"效果,而最后的<item android:drawable="@drawable/image_icon_watch_nor"/> 表示默认情况显示图片,原图片如下：

    同时设置选中状态"按钮"的背景加黑效果,在drawable中添加selector_tab_background.xml文件:


[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <item android:drawable="@drawable/image_home_layout_bg" android:state_pressed="true"/>    
  4.     <item android:drawable="@drawable/image_home_layout_bg" android:state_selected="true"/>    
  5. </selector>  

    然后在MainActivity.java中添加自定义变量,主要是LinearLayout(点击它响应事件)和ImageView(切换图标).


[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //自定义变量  
  2. private LinearLayout layoutWatch;             //查看图片  
  3. private LinearLayout layoutIncrease;           //增强图片  
  4. private LinearLayout layoutEffect;               //图片特效  
  5. private LinearLayout layoutFrame;              //图片边框  
  6. private LinearLayout layoutPerson;             //图片美白  
  7.   
  8. private ImageView imageWatch;      
  9. private ImageView imageIncrease;    
  10. private ImageView imageEffect;    
  11. private ImageView imageFrame;    
  12. private ImageView imagePerson;   

    然后添加代码如下,该种方法需要在点击按钮中设置其他LinearLayout图标状态为未选择状态,否则会出现点击按钮的效果(即:点击就切换图标一次,我们需要的是点击就状态长显).


[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //创建活动  
  2. @Override  
  3. protected void onCreate(Bundle savedInstanceState) {  
  4.     super.onCreate(savedInstanceState);  
  5.     setContentView(R.layout.activity_main);  
  6.     //布局  
  7.     layoutWatch = (LinearLayout) findViewById(R.id.layout_watch);  
  8.     layoutIncrease = (LinearLayout) findViewById(R.id.layout_increase);  
  9.     layoutEffect = (LinearLayout) findViewById(R.id.layout_effect);  
  10.     layoutFrame = (LinearLayout) findViewById(R.id.layout_frame);  
  11.     layoutPerson = (LinearLayout) findViewById(R.id.layout_person);  
  12.     //图标   
  13.     imageWatch = (ImageView) findViewById(R.id.image_watch);  
  14.     imageIncrease = (ImageView) findViewById(R.id.image_increase);  
  15.     imageEffect = (ImageView) findViewById(R.id.image_effect);  
  16.     imageFrame = (ImageView) findViewById(R.id.image_frame);  
  17.     imagePerson = (ImageView) findViewById(R.id.image_person);  
  18.     //初始化布局  
  19.     initView();  
  20.   
  21.     //按钮一 监听事件 查看图片  
  22.     layoutWatch.setOnClickListener( new OnClickListener() {  
  23.         @Override  
  24.         public void onClick(View v) {  
  25.             //设置背景图片加深  
  26.             Toast.makeText(MainActivity.this, "点击按钮1", Toast.LENGTH_SHORT).show();  
  27.             layoutWatch.setBackgroundResource(R.drawable.selector_tab_background);  
  28.             //设置图标选中情况  
  29.             layoutWatch.setSelected(true);  
  30.             layoutIncrease.setSelected(false);  
  31.             layoutEffect.setSelected(false);  
  32.             layoutFrame.setSelected(false);  
  33.             layoutPerson.setSelected(false);  
  34.         }  
  35.     });  
  36.     //按钮二 监听事件增强图片  
  37.     layoutIncrease = (LinearLayout) findViewById(R.id.layout_increase);  
  38.     layoutIncrease.setOnClickListener( new OnClickListener() {  
  39.         @Override  
  40.         public void onClick(View v) {  
  41.             layoutIncrease.setBackgroundResource(R.drawable.selector_tab_background);  
  42.             //设置图标选中情况  
  43.             layoutWatch.setSelected(false);  
  44.             layoutIncrease.setSelected(true);  
  45.             layoutEffect.setSelected(false);  
  46.             layoutFrame.setSelected(false);  
  47.             layoutPerson.setSelected(false);  
  48.         }  
  49.     });  
  50.     //按钮三 监听事件图片特效  
  51.     layoutEffect = (LinearLayout) findViewById(R.id.layout_effect);  
  52.     layoutEffect.setOnClickListener( new OnClickListener() {  
  53.         @Override  
  54.         public void onClick(View v) {  
  55.             //设置背景图片  
  56.             layoutEffect.setBackgroundResource(R.drawable.selector_tab_background);  
  57.             //设置图标选中情况  
  58.             layoutWatch.setSelected(false);  
  59.             layoutIncrease.setSelected(false);  
  60.             layoutEffect.setSelected(true);  
  61.             layoutFrame.setSelected(false);  
  62.             layoutPerson.setSelected(false);  
  63.         }  
  64.     });  
  65.     //按钮四 监听事件图片相框  
  66.     layoutFrame = (LinearLayout) findViewById(R.id.layout_frame);  
  67.     layoutFrame.setOnClickListener( new OnClickListener() {  
  68.         @Override  
  69.         public void onClick(View v) {  
  70.             //设置背景图片  
  71.             layoutFrame.setBackgroundResource(R.drawable.selector_tab_background);  
  72.             //设置图标选中情况  
  73.             layoutWatch.setSelected(false);  
  74.             layoutIncrease.setSelected(false);  
  75.             layoutEffect.setSelected(false);  
  76.             layoutFrame.setSelected(true);  
  77.             layoutPerson.setSelected(false);  
  78.   
  79.         }  
  80.     });  
  81.     //按钮五 监听事件图片美白  
  82.     layoutPerson = (LinearLayout) findViewById(R.id.layout_person);  
  83.     layoutPerson.setOnClickListener( new OnClickListener() {  
  84.         @Override  
  85.         public void onClick(View v) {  
  86.             //设置背景图片  
  87.             layoutPerson.setBackgroundResource(R.drawable.selector_tab_background);  
  88.             //设置图标选中情况  
  89.             layoutWatch.setSelected(false);  
  90.             layoutIncrease.setSelected(false);  
  91.             layoutEffect.setSelected(false);  
  92.             layoutFrame.setSelected(false);  
  93.             layoutPerson.setSelected(true);  
  94.   
  95.         }  
  96.     });  
  97. }  
  98.   
  99. //初始化布局  
  100. private void initView()  
  101. {  
  102.     imageWatch.setImageResource(R.drawable.tab_watch_btn);  
  103.     imageIncrease.setImageResource(R.drawable.tab_increase_btn);  
  104.     imageEffect.setImageResource(R.drawable.tab_effect_btn);  
  105.     imageFrame.setImageResource(R.drawable.tab_frame_btn);  
  106.     imagePerson.setImageResource(R.drawable.tab_person_btn);  
  107. }  

    二. 底部菜单 第二种方法

   其中activity_main.xml中布局与第一个相同,不同的是在xml中就指定drawable-hdpi中原图片名,因为它不在调用drawable如tab_watch_btn.xml文件,而使用代码直接操作.其中5个LinearLayout一个如下所示：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <LinearLayout   
  2.          android:id="@+id/layout_watch"    
  3.          android:layout_width="wrap_content"    
  4.          android:layout_height="wrap_content"    
  5.          android:layout_weight="1"  
  6.          android:gravity="center"    
  7.          android:orientation="vertical" >    
  8.          <ImageView    
  9.              android:id="@+id/image_watch"    
  10.              android:layout_width="wrap_content"    
  11.              android:layout_height="wrap_content"    
  12.                 android:padding="3dp"   
  13.              android:src="@drawable/image_icon_watch_nor" />    
  14.          <TextView    
  15.              android:id="@+id/textview_watch"  
  16.              android:layout_width="wrap_content"    
  17.              android:layout_height="wrap_content"     
  18.              android:text="查看"    
  19.              android:textColor="#ffffff"    
  20.              android:textSize="10sp" />    
  21. </LinearLayout>    
   此时它的文件夹结构如下图,drawble没有设置背景加深和加载图标的xml文件：

    同时5个LinearLayout(查看、增强、特效、相框、美白)设置触屏响应事件：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. layoutWatch.setOnTouchListener(new OnTouchListener() {  
  2.     @Override  
  3.     public boolean onTouch(View v, MotionEvent event) {                 
  4.         if(event.getAction() == MotionEvent.ACTION_DOWN) {         
  5.             //按下背景图片                  
  6.             layoutWatch.setBackgroundResource(R.drawable.image_home_layout_bg);  
  7.             layoutIncrease.setBackgroundResource(R.drawable.image_home_layout_no);  
  8.             layoutEffect.setBackgroundResource(R.drawable.image_home_layout_no);  
  9.             layoutFrame.setBackgroundResource(R.drawable.image_home_layout_no);  
  10.             layoutPerson.setBackgroundResource(R.drawable.image_home_layout_no);  
  11.             //设置按钮图片  
  12.             imageWatch.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_watch_sel));      
  13.             imageIncrease.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_increase_nor));   
  14.             imageEffect.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_effect_nor));   
  15.             imageFrame.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_frame_nor));   
  16.             imagePerson.setImageDrawable(getResources().getDrawable(R.drawable.image_icon_person_nor));   
  17.         }  
  18.         return false;         
  19.     }         
  20. });    
   需要注意的是网上下面这段代码仅实现点击一下图片变换的效果,而如果想要实现长显需要如我上面的所示.还见到一个使用Radio实现该效果,当点击一次时判断是否选中并显示相应图片.而使用FragmentTabHost实现同样效果,我不知其原理~
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. bottomReturnBtn.setOnTouchListener(new OnTouchListener() {    
  2.       //这段代码仅仅实现点击一次改变图标功能  
  3.     public boolean onTouch(View v, MotionEvent event) {    
  4.         Button upStepBtn = (Button) v;    
  5.         if(event.getAction() == MotionEvent.ACTION_DOWN){    
  6.             upStepBtn.setBackgroundResource(R.drawable.bottom_sub_order_btn);    
  7.         }else if(event.getAction() == MotionEvent.ACTION_UP){    
  8.             upStepBtn.setBackgroundResource(R.drawable.bottom_return_check);    
  9.             finish();     
  10.         }    
  11.         return false;    
  12.     }    
  13. });     

    三. PopupWindow实现弹出菜单

    然后讲解如何通过PopupWindow实现下面的功能.效果如下图所示,简单实现PopupWindow功能可结合下面两篇文章：
    android之popupWindow在指定位置上的显示
    [android开发] 使用PopupWindow实现页面点击顶部弹出下拉菜单


    首先,为PopupWindow设置动画效果,在res文件夹下添加文件夹anim,然后添加anim_entry.xml文件：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  3.     <translate      
  4.         android:fromXDelta="0"      
  5.         android:toXDelta="0"      
  6.         android:fromYDelta="120"      
  7.         android:toYDelta="0"      
  8.         android:duration="500" />      
  9. </set>  
   它是出现效果：从菜单栏底部向上弹出,同时添加anim_exit.xml:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >    
  3.     <!-- 透明度消失 -->  
  4.     <alpha   
  5.         android:fromAlpha="1.0"   
  6.         android:toAlpha="0.0"   
  7.         android:duration="200" />  
  8. </set>  
   最后在res/values文件夹styles.xml中添加动画效果,通过调用name="AnimationPreview"可以实现动画：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!-- 定义popupwindows动画效果 -->  
  2.  <style name="AnimationPreview">    
  3.      <item name="android:windowEnterAnimation">@anim/anim_entry</item>    
  4.      <item name="android:windowExitAnimation">@anim/anim_exit</item>    
  5.  </style>    
   然后你需要自定义弹出PopupWindow的布局xml文件,如popup_effect.xml：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="wrap_content"    
  4.     android:layout_height="wrap_content" >    
  5.     
  6.     <LinearLayout    
  7.         android:layout_width="fill_parent"    
  8.         android:layout_height="wrap_content"    
  9.         android:layout_alignParentBottom="true"    
  10.         android:background="@drawable/image_button_bg_left"    
  11.         android:orientation="vertical" >    
  12.         <LinearLayout    
  13.             android:layout_width="wrap_content"    
  14.             android:layout_height="wrap_content"    
  15.             android:layout_gravity="center_horizontal"    
  16.             android:layout_marginTop="5dp"    
  17.             android:orientation="horizontal" >   
  18.                
  19.             <LinearLayout    
  20.                 android:id="@+id/layout_effect_hj"  
  21.                 android:layout_width="wrap_content"    
  22.                 android:layout_height="wrap_content"    
  23.                 android:layout_margin="2dp"    
  24.                 android:layout_weight="1"    
  25.                 android:orientation="vertical" >    
  26.                 <ImageView    
  27.                     android:layout_width="wrap_content"    
  28.                     android:layout_height="wrap_content"    
  29.                     android:layout_gravity="center_horizontal"    
  30.                     android:layout_marginTop="1.0dip"    
  31.                     android:src="@drawable/image_effect_hj" />  
  32.                 <TextView    
  33.                     android:layout_width="wrap_content"    
  34.                     android:layout_height="wrap_content"    
  35.                     android:layout_gravity="center_horizontal"    
  36.                     android:layout_marginTop="1.0dip"    
  37.                     android:shadowColor="#ff000000"    
  38.                     android:shadowDx="1.0"    
  39.                     android:shadowDy="1.0"    
  40.                     android:shadowRadius="1.0"    
  41.                     android:text="怀旧"    
  42.                     android:textColor="#ffffffff"    
  43.                     android:textSize="13.0dip" />    
  44.             </LinearLayout>    
  45.     
  46.             <LinearLayout    
  47.                 android:id="@+id/layout_effect_fd"  
  48.                 android:layout_width="wrap_content"    
  49.                 android:layout_height="wrap_content"    
  50.                 android:layout_margin="2dp"    
  51.                 android:layout_weight="1"    
  52.                 android:orientation="vertical" >    
  53.                 <ImageView    
  54.                     android:layout_width="wrap_content"    
  55.                     android:layout_height="wrap_content"    
  56.                     android:layout_gravity="center_horizontal"    
  57.                     android:layout_marginTop="1.0dip"    
  58.                     android:src="@drawable/image_effect_fd" />    
  59.                 <TextView    
  60.                     android:layout_width="wrap_content"    
  61.                     android:layout_height="wrap_content"    
  62.                     android:layout_gravity="center_horizontal"    
  63.                     android:layout_marginTop="1.0dip"    
  64.                     android:shadowColor="#ff000000"    
  65.                     android:shadowDx="1.0"    
  66.                     android:shadowDy="1.0"    
  67.                     android:shadowRadius="1.0"    
  68.                     android:text="浮雕"    
  69.                     android:textColor="#ffffffff"    
  70.                     android:textSize="13.0dip" />    
  71.             </LinearLayout>    
  72.   
  73.             <LinearLayout    
  74.                 android:id="@+id/layout_effect_gz"  
  75.                 android:layout_width="wrap_content"    
  76.                 android:layout_height="wrap_content"    
  77.                 android:layout_margin="2dp"    
  78.                 android:layout_weight="1"    
  79.                 android:orientation="vertical" >    
  80.                 <ImageView    
  81.                     android:layout_width="wrap_content"    
  82.                     android:layout_height="wrap_content"    
  83.                     android:layout_gravity="center_horizontal"    
  84.                     android:layout_marginTop="1.0dip"    
  85.                     android:src="@drawable/image_effect_gz" />   
  86.                 <TextView    
  87.                     android:layout_width="wrap_content"    
  88.                     android:layout_height="wrap_content"    
  89.                     android:layout_gravity="center_horizontal"    
  90.                     android:layout_marginTop="1.0dip"    
  91.                     android:shadowColor="#ff000000"    
  92.                     android:shadowDx="1.0"    
  93.                     android:shadowDy="1.0"    
  94.                     android:shadowRadius="1.0"    
  95.                     android:text="光照"    
  96.                     android:textColor="#ffffffff"    
  97.                     android:textSize="13.0dip" />    
  98.             </LinearLayout>    
  99.     
  100.             <LinearLayout    
  101.                 android:id="@+id/layout_effect_sm"  
  102.                 android:layout_width="wrap_content"    
  103.                 android:layout_height="wrap_content"    
  104.                 android:layout_margin="2dp"    
  105.                 android:layout_weight="1"    
  106.                 android:orientation="vertical" >    
  107.                 <ImageView    
  108.                     android:layout_width="wrap_content"    
  109.                     android:layout_height="wrap_content"    
  110.                     android:layout_gravity="center_horizontal"    
  111.                     android:layout_marginTop="1.0dip"    
  112.                     android:src="@drawable/image_effect_sm" />    
  113.                 <TextView    
  114.                     android:layout_width="wrap_content"    
  115.                     android:layout_height="wrap_content"    
  116.                     android:layout_gravity="center_horizontal"    
  117.                     android:layout_marginTop="1.0dip"    
  118.                     android:shadowColor="#ff000000"    
  119.                     android:shadowDx="1.0"    
  120.                     android:shadowDy="1.0"    
  121.                     android:shadowRadius="1.0"    
  122.                     android:text="素描"    
  123.                     android:textColor="#ffffffff"    
  124.                     android:textSize="13.0dip" />    
  125.             </LinearLayout>    
  126.     
  127.             <LinearLayout    
  128.                 android:id="@+id/layout_effect"  
  129.                 android:layout_width="wrap_content"    
  130.                 android:layout_height="wrap_content"    
  131.                 android:layout_margin="2dp"    
  132.                 android:layout_weight="1"    
  133.                 android:orientation="vertical" >    
  134.                 <ImageView    
  135.                     android:layout_width="wrap_content"    
  136.                     android:layout_height="wrap_content"    
  137.                     android:layout_gravity="center_horizontal"    
  138.                     android:layout_marginTop="1.0dip"    
  139.                     android:src="@drawable/image_effect" />    
  140.                 <TextView    
  141.                     android:layout_width="wrap_content"    
  142.                     android:layout_height="wrap_content"    
  143.                     android:layout_gravity="center_horizontal"    
  144.                     android:layout_marginTop="1.0dip"    
  145.                     android:shadowColor="#ff000000"    
  146.                     android:shadowDx="1.0"    
  147.                     android:shadowDy="1.0"    
  148.                     android:shadowRadius="1.0"    
  149.                     android:text="锐化"    
  150.                     android:textColor="#ffffffff"    
  151.                     android:textSize="13.0dip" />    
  152.             </LinearLayout>    
  153.               
  154.         </LinearLayout>    
  155.     </LinearLayout>    
  156. </RelativeLayout>  
   它的在Xml中Graphical Layout显示效果如下图所示：
            
    添加5个自定义变量：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //弹出按钮  
  2. private PopupWindow popupWindow1;       
  3. private PopupWindow popupWindow2;  
  4. private PopupWindow popupWindow3;  
  5. private PopupWindow popupWindow4;  
  6. private PopupWindow popupWindow5;  
   然后当点击"相框"布局LinearLayout时,添加代码如下(其他类似)：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //按钮四 监听事件图片相框  
  2. layoutFrame.setOnClickListener( new OnClickListener() {  
  3.     @Override  
  4.     public void onClick(View v) {  
  5.         //载入PopupWindow  
  6.         if (popupWindow4 != null&&popupWindow4.isShowing()) {    
  7.             popupWindow4.dismiss();    
  8.             return;    
  9.         } else {    
  10.             initmPopupWindowView(4);   //number=4  
  11.             int[] location = new int[2];    
  12.             v.getLocationOnScreen(location);   
  13.             Toast.makeText(MainActivity.this, ""+location[0], Toast.LENGTH_SHORT).show();  
  14.             popupWindow4.showAtLocation(v, Gravity.NO_GRAVITY, location[0], location[1]-popupWindow4.getHeight());  
  15.         }  
  16.     }  
  17. });  
   其中initmPopupWindowView(int number)为自定义函数,参数对应的是点击LinearLayout的序号,点击"按钮"4即传入数字4：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. public void initmPopupWindowView(int number) {    
  2.         View customView = null;  
  3.         // 获取自定义布局文件    
  4.         if(number==1) { //查看  
  5.             customView = getLayoutInflater().inflate(R.layout.popup_watch, null, false);    
  6.             // 创建PopupWindow实例  (250,180)分别是宽度和高度    
  7.             popupWindow1 = new PopupWindow(customView, 250, 280);   
  8.             // 设置动画效果 [R.style.AnimationFade 是自己事先定义好的]    
  9.             popupWindow1.setAnimationStyle(R.style.AnimationPreview);    
  10.             // 自定义view添加触摸事件    
  11.             customView.setOnTouchListener(new OnTouchListener() {    
  12.                 @Override    
  13.                 public boolean onTouch(View v, MotionEvent event) {    
  14.                     if (popupWindow1 != null && popupWindow1.isShowing()) {    
  15.                         popupWindow1.dismiss();    
  16.                         popupWindow1 = null;    
  17.                     }    
  18.                     return false;    
  19.                 }    
  20.             });    
  21.         }  
  22.          if(number==2) { //增强  
  23.             customView = getLayoutInflater().inflate(R.layout.popup_increase, null, false);    
  24.             popupWindow2 = new PopupWindow(customView, 450, 150);  
  25.             // 使其聚集 要想监听菜单里控件的事件就必须要调用此方法     
  26.              popupWindow2.setFocusable(true);    
  27.              // 设置允许在外点击消失     
  28.              popupWindow2.setOutsideTouchable(true);   
  29.              popupWindow2.setAnimationStyle(R.style.AnimationPreview);    
  30.              // 自定义view添加触摸事件    
  31.              customView.setOnTouchListener(new OnTouchListener() {    
  32.                  @Override    
  33.                  public boolean onTouch(View v, MotionEvent event) {    
  34.                      if (popupWindow2 != null && popupWindow2.isShowing()) {    
  35.                          popupWindow2.dismiss();    
  36.                          popupWindow2 = null;    
  37.                      }    
  38.                      return false;    
  39.                  }    
  40.              });    
  41.          }  
  42.         if(number==3) { //效果  
  43.             customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false);    
  44.             popupWindow3 = new PopupWindow(customView, 450, 150);  
  45.             // 使其聚集 要想监听菜单里控件的事件就必须要调用此方法     
  46.             popupWindow3.setFocusable(true);    
  47.             // 设置允许在外点击消失     
  48.             popupWindow3.setOutsideTouchable(true);   
  49.             popupWindow3.setAnimationStyle(R.style.AnimationPreview);    
  50.             // 自定义view添加触摸事件    
  51.             customView.setOnTouchListener(new OnTouchListener() {    
  52.                 @Override    
  53.                 public boolean onTouch(View v, MotionEvent event) {    
  54.                     if (popupWindow3 != null && popupWindow3.isShowing()) {    
  55.                         popupWindow3.dismiss();    
  56.                         popupWindow3 = null;    
  57.                     }    
  58.                     return false;    
  59.                 }    
  60.             });    
  61.         }  
  62.         if(number==4) {  
  63.             customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false);    
  64.             popupWindow4 = new PopupWindow(customView, 450, 150);  
  65.             // 使其聚集 要想监听菜单里控件的事件就必须要调用此方法     
  66.             popupWindow4.setFocusable(true);    
  67.             popupWindow4.setAnimationStyle(R.style.AnimationPreview);    
  68.             // 自定义view添加触摸事件    
  69.             customView.setOnTouchListener(new OnTouchListener() {    
  70.                 @Override    
  71.                 public boolean onTouch(View v, MotionEvent event) {    
  72.                     if (popupWindow4 != null && popupWindow4.isShowing()) {    
  73.                         popupWindow4.dismiss();    
  74.                         popupWindow4 = null;    
  75.                     }    
  76.                     return false;    
  77.                 }    
  78.             });    
  79.         }  
  80.         if(number==5) {  
  81.             customView = getLayoutInflater().inflate(R.layout.popup_frame, null, false);    
  82.             popupWindow5 = new PopupWindow(customView, 450, 150);  
  83.             // 使其聚集 要想监听菜单里控件的事件就必须要调用此方法     
  84.             popupWindow5.setFocusable(true);    
  85.             popupWindow5.setAnimationStyle(R.style.AnimationPreview);    
  86.             // 自定义view添加触摸事件    
  87.             customView.setOnTouchListener(new OnTouchListener() {    
  88.                 @Override    
  89.                 public boolean onTouch(View v, MotionEvent event) {    
  90.                     if (popupWindow5 != null && popupWindow5.isShowing()) {    
  91.                         popupWindow5.dismiss();    
  92.                         popupWindow5 = null;    
  93.                     }    
  94.                     return false;    
  95.                 }    
  96.             });    
  97.         } //end if  
  98.     }  

    四. PopupWindow实现点击效果

    做到这里,你就能实现点击底部菜单实现弹出PopupWindows效果,但显然是不足的.怎样通过点击弹出PopupWindow中的按钮实现做不同的事情呢?下面讲解,你只需要添加下面的代码即可实现"特效"效果.

    代码如下,你可以自定义函数实现不同效果功能(结合前面几篇文章,我的美图秀秀基本完成)：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. if(number==3) { //效果  
  2.     customView = getLayoutInflater().inflate(R.layout.popup_effect, null, false);    
  3.     popupWindow3 = new PopupWindow(customView, 450, 150);  
  4.     // 使其聚集 要想监听菜单里控件的事件就必须要调用此方法     
  5.     popupWindow3.setFocusable(true);    
  6.     // 设置允许在外点击消失     
  7.     popupWindow3.setOutsideTouchable(true);   
  8.     popupWindow3.setAnimationStyle(R.style.AnimationPreview);    
  9.     // 自定义view添加触摸事件    
  10.     customView.setOnTouchListener(new OnTouchListener() {    
  11.         @Override    
  12.         public boolean onTouch(View v, MotionEvent event) {    
  13.             if (popupWindow3 != null && popupWindow3.isShowing()) {    
  14.                 popupWindow3.dismiss();    
  15.                 popupWindow3 = null;    
  16.             }    
  17.             return false;    
  18.         }    
  19.     });    
  20.     //判断点击子菜单不同按钮实现不同功能  
  21.     LinearLayout layoutEffect1 = (LinearLayout) customView.findViewById(R.id.layout_effect_hj);  
  22.     layoutEffect1.setOnClickListener(new OnClickListener() {  
  23.         @Override  
  24.         public void onClick(View v) {  
  25.             Toast.makeText(MainActivity.this, "效果-怀旧", Toast.LENGTH_SHORT).show();  
  26.         }  
  27.     });  
  28.     LinearLayout layoutEffect2 = (LinearLayout) customView.findViewById(R.id.layout_effect_fd);  
  29.     layoutEffect2.setOnClickListener(new OnClickListener() {  
  30.         @Override  
  31.         public void onClick(View v) {  
  32.             Toast.makeText(MainActivity.this, "效果-浮雕", Toast.LENGTH_SHORT).show();  
  33.         }  
  34.     });  
  35.     LinearLayout layoutEffect3 = (LinearLayout) customView.findViewById(R.id.layout_effect_gz);  
  36.     layoutEffect3.setOnClickListener(new OnClickListener() {  
  37.         @Override  
  38.         public void onClick(View v) {  
  39.             Toast.makeText(MainActivity.this, "效果-光照", Toast.LENGTH_SHORT).show();  
  40.         }  
  41.     });  
  42.     LinearLayout layoutEffect4 = (LinearLayout) customView.findViewById(R.id.layout_effect_sm);  
  43.     layoutEffect4.setOnClickListener(new OnClickListener() {  
  44.         @Override  
  45.         public void onClick(View v) {  
  46.             Toast.makeText(MainActivity.this, "效果-素描", Toast.LENGTH_SHORT).show();  
  47.             //打开图片  
  48.             OpenImage();  
  49.         }  
  50.     });  
  51.     LinearLayout layoutEffect5 = (LinearLayout) customView.findViewById(R.id.layout_effect);  
  52.     layoutEffect5.setOnClickListener(new OnClickListener() {  
  53.         @Override  
  54.         public void onClick(View v) {  
  55.             Toast.makeText(MainActivity.this, "效果-锐化", Toast.LENGTH_SHORT).show();  
  56.         }  
  57.     });  
  58. }  

    五. 总结

    本文章主要讲述如何加载菜单栏在底部,同时讲述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/)
上一篇：Fragment+FragmentTabHost实现仿新浪微博底部菜单栏
下一篇：[Android]使用Include布局+Fragment滑动切换屏幕
本站文章内容，部分来自于互联网，若侵犯了您的权益，请致邮件chuanghui423#sohu.com(请将#换为@)联系，我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号