`
shuai1234
  • 浏览: 972616 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

android UI进阶之弹窗的使用（2）--实现通讯录的弹窗效果

 
阅读更多

相信大家都体验过android通讯录中的弹窗效果。如图所示：

 


 

android中提供了QuickContactBadge来实现这一效果。这里简单演示下。

首先创建布局文件：

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.               android:orientation="vertical"   
  4.               android:layout_width="fill_parent"   
  5.               android:layout_height="fill_parent"   
  6.         >   
  7.     <QuickContactBadge   
  8.             android:id="@+id/badge"   
  9.             android:layout_width="wrap_content"   
  10.             android:layout_height="wrap_content"   
  11.             android:src="@drawable/icon">   
  12.     </QuickContactBadge>   
  13. </LinearLayout>   

很简单，在布局中添加一个QuickContactBadge组件即可。

在Activity中配置：

 

view plaincopy to clipboardprint?
  1. public class QuickcontactActivity extends Activity {  
  2.   
  3.     /** Called when the activity is first created. */  
  4.     @Override  
  5.     public void onCreate(Bundle savedInstanceState) {  
  6.         super.onCreate(savedInstanceState);  
  7.         setContentView(R.layout.main);  
  8.   
  9.         QuickContactBadge smallBadge = (QuickContactBadge) findViewById(R.id.badge);  
  10.         // 从email关联一个contact   
  11.         smallBadge.assignContactFromEmail("notice520@gmail.com", true);  
  12.         // 设置窗口模式   
  13.         smallBadge.setMode(ContactsContract.QuickContact.MODE_SMALL);  
  14.     }  
  15. }  


 

注意加入读通讯录的权限

<uses-permission android:name="android.permission.READ_CONTACTS"></uses-permission>　　

实现效果如图：


 

但是这个组件局限性很大，弹出窗口中只能是一些contact操作。但是仔细一想，这样的操作并不难，不就是一个带动画的弹窗么。下面就来我们自己实现一个。

实现一个带动画的弹窗并不难，在我的之前一篇博客中有讲过弹窗PopupWindow的使用，不清楚弹窗的朋友可以去看下。在这里实现的难点主要有这些：

1.判断基准view在屏幕中的位置，从而确定弹窗弹出的位置以及动画。这是非常重要的一点，或许基准在屏幕上方，那么就要向下弹出。

2.动态的添加弹窗中的按钮，并实现点击

3.箭头位置的控制。箭头应该保持在基准的下方。

4.动画的匹配。里面有两种动画。一种是PopupWindow弹出动画，我们通过设置弹窗的style来实现（style的用法可以参考我之前的博客）。另一种是弹窗中间的布局的动画。

　　了解了难点以后，写起来就方便了。

首先实现弹窗的布局：

view plaincopy to clipboardprint?
  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.      <FrameLayout  
  7.           android:layout_marginTop="10dip"  
  8.         android:id="@+id/header2"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/quickcontact_top_frame"/>  
  12.           
  13.       <ImageView  
  14.         android:id="@+id/arrow_up"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"      
  17.         android:src="@drawable/quickcontact_arrow_up" />  
  18.          
  19.     <HorizontalScrollView  
  20.         android:id="@+id/scroll"  
  21.         android:layout_width="fill_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:fadingEdgeLength="0dip"  
  24.         android:layout_below="@id/header2"  
  25.         android:background="@drawable/quickcontact_slider_background"  
  26.         android:scrollbars="none">  
  27.   
  28.         <LinearLayout  
  29.             android:id="@+id/tracks"  
  30.             android:layout_width="wrap_content"  
  31.             android:layout_height="wrap_content"  
  32.             android:paddingTop="4dip"  
  33.             android:paddingBottom="4dip"   
  34.             android:orientation="horizontal">  
  35.           
  36.             <ImageView  
  37.                 android:layout_width="wrap_content"  
  38.                 android:layout_height="wrap_content"  
  39.                 android:src="@drawable/quickcontact_slider_grip_left" />  
  40.   
  41.             <ImageView  
  42.                 android:layout_width="wrap_content"  
  43.                 android:layout_height="wrap_content"  
  44.                 android:src="@drawable/quickcontact_slider_grip_right" />  
  45.                   
  46.         </LinearLayout>  
  47.               
  48.     </HorizontalScrollView>  
  49.   
  50.     <FrameLayout  
  51.         android:id="@+id/footer"  
  52.         android:layout_width="fill_parent"  
  53.         android:layout_height="wrap_content"  
  54.         android:layout_below="@id/scroll"  
  55.         android:background="@drawable/quickcontact_bottom_frame" />  
  56.   
  57.     <ImageView  
  58.         android:id="@+id/arrow_down"  
  59.         android:layout_width="wrap_content"  
  60.         android:layout_height="wrap_content"  
  61.         android:layout_marginTop="-1dip"  
  62.         android:layout_below="@id/footer"  
  63.         android:src="@drawable/quickcontact_arrow_down" />  
  64.   
  65. </RelativeLayout>  

窗体内部使用一个HorizontalScrollView可以实现一个滑动效果。我们可以动态的在这个布局中添加按钮，我们称作Actionitem。

　　写一个ActionItem类，使得我们可以用一个ArrayList做容器，动态的添加这些actionitem。这些都是服务于第二个难点。

view plaincopy to clipboardprint?
  1. package com.notice.quickaction;  
  2.   
  3. import android.graphics.drawable.Drawable;  
  4. import android.view.View.OnClickListener;  
  5.   
  6. /** 
  7.  * Action item, 每个item里面都有一个ImageView和一个TextView 
  8.  */  
  9. public class ActionItem {  
  10.   
  11.     private Drawable        icon;  
  12.     private String          title;  
  13.     private OnClickListener listener;  
  14.   
  15.     /** 
  16.      * 构造器 
  17.      */  
  18.     public ActionItem() {  
  19.     }  
  20.   
  21.     /** 
  22.      * 带Drawable参数的构造器 
  23.      */  
  24.     public ActionItem(Drawable icon) {  
  25.         this.icon = icon;  
  26.     }  
  27.   
  28.     /** 
  29.      * 设置标题 
  30.      */  
  31.     public void setTitle(String title) {  
  32.         this.title = title;  
  33.     }  
  34.   
  35.     /** 
  36.      * 获得标题 
  37.      *  
  38.      * @return action title 
  39.      */  
  40.     public String getTitle() {  
  41.         return this.title;  
  42.     }  
  43.   
  44.     /** 
  45.      * 设置图标 
  46.      */  
  47.     public void setIcon(Drawable icon) {  
  48.         this.icon = icon;  
  49.     }  
  50.   
  51.     /** 
  52.      * 获得图标 
  53.      */  
  54.     public Drawable getIcon() {  
  55.         return this.icon;  
  56.     }  
  57.   
  58.     /** 
  59.      * 绑定监听器 
  60.      */  
  61.     public void setOnClickListener(OnClickListener listener) {  
  62.         this.listener = listener;  
  63.     }  
  64.   
  65.     /** 
  66.      * 获得监听器 
  67.      */  
  68.     public OnClickListener getListener() {  
  69.         return this.listener;  
  70.     }  
  71. }  

接下来就是这个弹窗的实现了，我们继承PopupWindow类。在这个类中我们需要实现通过位置设置动画及弹出位置，并且给出一个方法供实现类调用，来动态添加item和设置动画效果。

代码如下：

view plaincopy to clipboardprint?
  1. /** 
  2.  * 继承弹窗，构造我们需要的弹窗 
  3.  */  
  4. public class QuickActions extends PopupWindow {  
  5.   
  6.     private final View            root;  
  7.     private final ImageView       mArrowUp;  
  8.     private final ImageView       mArrowDown;  
  9.     private final Animation       mTrackAnim;  
  10.     private final LayoutInflater  inflater;  
  11.     private final Context         context;  
  12.   
  13.     protected final View          anchor;  
  14.     protected final PopupWindow   window;  
  15.     private Drawable              background            = null;  
  16.     protected final WindowManager windowManager;  
  17.   
  18.     protected static final int    ANIM_GROW_FROM_LEFT   = 1;  
  19.     protected static final int    ANIM_GROW_FROM_RIGHT  = 2;  
  20.     protected static final int    ANIM_GROW_FROM_CENTER = 3;  
  21.     protected static final int    ANIM_AUTO             = 4;  
  22.   
  23.     private int                   animStyle;  
  24.     private boolean               animateTrack;  
  25.     private ViewGroup             mTrack;  
  26.     private ArrayList<ActionItem> actionList;  
  27.   
  28.     /** 
  29.      * 构造器，在这里初始化一些内容 
  30.      *  
  31.      * @param anchor 像我之前博客所说的理解成一个基准 弹窗以此为基准弹出 
  32.      */  
  33.     public QuickActions(View anchor) {  
  34.         super(anchor);  
  35.   
  36.         this.anchor = anchor;  
  37.         this.window = new PopupWindow(anchor.getContext());  
  38.   
  39.         // 在popwindow外点击即关闭该window   
  40.         window.setTouchInterceptor(new OnTouchListener() {  
  41.   
  42.             @Override  
  43.             public boolean onTouch(View v, MotionEvent event) {  
  44.                 if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {  
  45.                     QuickActions.this.window.dismiss();  
  46.   
  47.                     return true;  
  48.                 }  
  49.   
  50.                 return false;  
  51.             }  
  52.         });  
  53.   
  54.         // 得到一个windowManager对象，用来得到窗口的一些属性   
  55.         windowManager = (WindowManager) anchor.getContext().getSystemService(Context.WINDOW_SERVICE);  
  56.   
  57.         actionList = new ArrayList<ActionItem>();  
  58.         context = anchor.getContext();  
  59.         inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  60.   
  61.         // 装载布局，root即为弹出窗口的布局   
  62.         root = (ViewGroup) inflater.inflate(R.layout.quickaction, null);  
  63.   
  64.         // 得到上下两个箭头   
  65.         mArrowDown = (ImageView) root.findViewById(R.id.arrow_down);  
  66.         mArrowUp = (ImageView) root.findViewById(R.id.arrow_up);  
  67.   
  68.         setContentView(root);  
  69.   
  70.         mTrackAnim = AnimationUtils.loadAnimation(anchor.getContext(), R.anim.rail);  
  71.   
  72.         // 设置动画的加速效果   
  73.         mTrackAnim.setInterpolator(new Interpolator() {  
  74.   
  75.             public float getInterpolation(float t) {  
  76.   
  77.                 final float inner = (t * 1.55f) - 1.1f;  
  78.   
  79.                 return 1.2f - inner * inner;  
  80.             }  
  81.         });  
  82.   
  83.         // 这个是弹出窗口内的水平布局   
  84.         mTrack = (ViewGroup) root.findViewById(R.id.tracks);  
  85.         animStyle = ANIM_AUTO;// 设置动画风格   
  86.         animateTrack = true;  
  87.     }  
  88.   
  89.     /** 
  90.      * 设置一个flag来标识动画显示 
  91.      */  
  92.     public void animateTrack(boolean animateTrack) {  
  93.         this.animateTrack = animateTrack;  
  94.     }  
  95.   
  96.     /** 
  97.      * 设置动画风格 
  98.      */  
  99.     public void setAnimStyle(int animStyle) {  
  100.         this.animStyle = animStyle;  
  101.     }  
  102.   
  103.     /** 
  104.      * 增加一个action 
  105.      */  
  106.     public void addActionItem(ActionItem action) {  
  107.         actionList.add(action);  
  108.     }  
  109.   
  110.     /** 
  111.      * 弹出弹窗 
  112.      */  
  113.     public void show() {  
  114.         // 预处理，设置window   
  115.         preShow();  
  116.   
  117.         int[] location = new int[2];  
  118.         // 得到anchor的位置   
  119.         anchor.getLocationOnScreen(location);  
  120.   
  121.         // 以anchor的位置构造一个矩形   
  122.         Rect anchorRect = new Rect(location[0], location[1], location[0] + anchor.getWidth(), location[1]  
  123.                                                                                               + anchor.getHeight());  
  124.   
  125.         root.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
  126.         root.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  127.   
  128.         int rootWidth = root.getMeasuredWidth();  
  129.         int rootHeight = root.getMeasuredHeight();  
  130.   
  131.         // 得到屏幕的宽   
  132.         int screenWidth = windowManager.getDefaultDisplay().getWidth();  
  133.   
  134.         // 设置弹窗弹出的位置的x/y   
  135.         int xPos = (screenWidth - rootWidth) / 2;  
  136.         int yPos = anchorRect.top - rootHeight;  
  137.   
  138.         boolean onTop = true;  
  139.   
  140.         // 在底部弹出   
  141.         if (rootHeight > anchorRect.top) {  
  142.             yPos = anchorRect.bottom;  
  143.             onTop = false;  
  144.         }  
  145.   
  146.         // 根据弹出位置，设置不同方向箭头图片   
  147.         showArrow(((onTop) ? R.id.arrow_down : R.id.arrow_up), anchorRect.centerX());  
  148.   
  149.         // 设置弹出动画风格   
  150.         setAnimationStyle(screenWidth, anchorRect.centerX(), onTop);  
  151.   
  152.         // 创建action list   
  153.         createActionList();  
  154.   
  155.         // 在指定位置弹出弹窗   
  156.         window.showAtLocation(this.anchor, Gravity.NO_GRAVITY, xPos, yPos);  
  157.   
  158.         // 设置弹窗内部的水平布局的动画   
  159.         if (animateTrack) mTrack.startAnimation(mTrackAnim);  
  160.     }  
  161.   
  162.     /** 
  163.      * 预处理窗口 
  164.      */  
  165.     protected void preShow() {  
  166.         if (root == null) {  
  167.             throw new IllegalStateException("需要为弹窗设置布局");  
  168.         }  
  169.   
  170.         // 背景是唯一能确定popupwindow宽高的元素，这里使用root的背景，但是需要给popupwindow设置一个空的BitmapDrawable   
  171.         if (background == null) {  
  172.             window.setBackgroundDrawable(new BitmapDrawable());  
  173.         } else {  
  174.             window.setBackgroundDrawable(background);  
  175.         }  
  176.   
  177.         window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);  
  178.         window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);  
  179.         window.setTouchable(true);  
  180.         window.setFocusable(true);  
  181.         window.setOutsideTouchable(true);  
  182.         // 指定布局   
  183.         window.setContentView(root);  
  184.     }  
  185.   
  186.     /** 
  187.      * 设置动画风格 
  188.      *  
  189.      * @param screenWidth 屏幕宽底 
  190.      * @param requestedX 距离屏幕左边的距离 
  191.      * @param onTop 一个flag用来标识窗口的显示位置，如果为true则显示在anchor的顶部 
  192.      */  
  193.     private void setAnimationStyle(int screenWidth, int requestedX, boolean onTop) {  
  194.         // 取得屏幕左边到箭头中心的位置   
  195.         int arrowPos = requestedX - mArrowUp.getMeasuredWidth() / 2;  
  196.         // 根据animStyle设置相应动画风格   
  197.         switch (animStyle) {  
  198.             case ANIM_GROW_FROM_LEFT:  
  199.                 window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Left : R.style.Animations_PopDownMenu_Left);  
  200.                 break;  
  201.   
  202.             case ANIM_GROW_FROM_RIGHT:  
  203.                 window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Right : R.style.Animations_PopDownMenu_Right);  
  204.                 break;  
  205.   
  206.             case ANIM_GROW_FROM_CENTER:  
  207.                 window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Center : R.style.Animations_PopDownMenu_Center);  
  208.                 break;  
  209.   
  210.             case ANIM_AUTO:  
  211.                 if (arrowPos <= screenWidth / 4) {  
  212.                     window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Left : R.style.Animations_PopDownMenu_Left);  
  213.                 } else if (arrowPos > screenWidth / 4 && arrowPos < 3 * (screenWidth / 4)) {  
  214.                     window.setAnimationStyle((onTop) ? R.style.Animations_PopUpMenu_Center : R.style.Animations_PopDownMenu_Center);  
  215.                 } else {  
  216.                     window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Right : R.style.Animations_PopDownMenu_Right);  
  217.                 }  
  218.   
  219.                 break;  
  220.         }  
  221.     }  
  222.   
  223.     /** 
  224.      * 创建action list 
  225.      */  
  226.     private void createActionList() {  
  227.         View view;  
  228.         String title;  
  229.         Drawable icon;  
  230.         OnClickListener listener;  
  231.         int index = 1;  
  232.   
  233.         for (int i = 0; i < actionList.size(); i++) {  
  234.             title = actionList.get(i).getTitle();  
  235.             icon = actionList.get(i).getIcon();  
  236.             listener = actionList.get(i).getListener();  
  237.             // 得到action item   
  238.             view = getActionItem(title, icon, listener);  
  239.   
  240.             view.setFocusable(true);  
  241.             view.setClickable(true);  
  242.   
  243.             // 将其加入布局   
  244.             mTrack.addView(view, index);  
  245.   
  246.             index++;  
  247.         }  
  248.     }  
  249.   
  250.     /** 
  251.      * 获得 action item 
  252.      *  
  253.      * @param title action的标题 
  254.      * @param icon action的图标 
  255.      * @param listener action的点击事件监听器 
  256.      * @return action的item 
  257.      */  
  258.     private View getActionItem(String title, Drawable icon, OnClickListener listener) {  
  259.         // 装载action布局   
  260.         LinearLayout container = (LinearLayout) inflater.inflate(R.layout.action_item, null);  
  261.         ImageView img = (ImageView) container.findViewById(R.id.icon);  
  262.         TextView text = (TextView) container.findViewById(R.id.title);  
  263.   
  264.         if (icon != null) {  
  265.             img.setImageDrawable(icon);  
  266.         } else {  
  267.             img.setVisibility(View.GONE);  
  268.         }  
  269.   
  270.         if (title != null) {  
  271.             text.setText(title);  
  272.         } else {  
  273.             text.setVisibility(View.GONE);  
  274.         }  
  275.   
  276.         if (listener != null) {  
  277.             container.setOnClickListener(listener);  
  278.         }  
  279.   
  280.         return container;  
  281.     }  
  282.   
  283.     /** 
  284.      * 显示箭头 
  285.      *  
  286.      * @param 箭头资源id 
  287.      * @param 距离屏幕左边的距离 
  288.      */  
  289.     private void showArrow(int whichArrow, int requestedX) {  
  290.         final View showArrow = (whichArrow == R.id.arrow_up) ? mArrowUp : mArrowDown;  
  291.         final View hideArrow = (whichArrow == R.id.arrow_up) ? mArrowDown : mArrowUp;  
  292.   
  293.         final int arrowWidth = mArrowUp.getMeasuredWidth();  
  294.   
  295.         showArrow.setVisibility(View.VISIBLE);  
  296.   
  297.         ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams) showArrow.getLayoutParams();  
  298.   
  299.         // 以此设置距离左边的距离   
  300.         param.leftMargin = requestedX - arrowWidth / 2;  
  301.   
  302.         hideArrow.setVisibility(View.INVISIBLE);  
  303.     }  
  304.   
  305. }  

　有点长，不过注释都写的很清楚了。show()方法完成窗口的弹出。里面调用其他方法设置了窗口弹出的位置，设置了相应的动画弹出风格和箭头朝向以及位置，创建了action item。大家可以从这个方法里开始看，看每个的实现。

　　最后写个测试类。放一个Button在屏幕顶部，一个在屏幕底部。点击弹出弹窗。

view plaincopy to clipboardprint?
  1. package com.notice.quickaction;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7. import android.widget.Button;  
  8. import android.widget.Toast;  
  9.   
  10. /** 
  11.  * 实现activity 
  12.  */  
  13. public class MyQuick extends Activity {  
  14.   
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.   
  19.         setContentView(R.layout.main);  
  20.   
  21.         // 得到一个actionItem对象   
  22.         final ActionItem chart = new ActionItem();  
  23.   
  24.         // 设置标题，图标，点击事件   
  25.         chart.setTitle("Chart");  
  26.         chart.setIcon(getResources().getDrawable(R.drawable.chart));  
  27.         chart.setOnClickListener(new OnClickListener() {  
  28.   
  29.             @Override  
  30.             public void onClick(View v) {  
  31.                 Toast.makeText(MyQuick.this, "Chart selected", Toast.LENGTH_SHORT).show();  
  32.             }  
  33.         });  
  34.   
  35.         final ActionItem production = new ActionItem();  
  36.   
  37.         production.setTitle("Products");  
  38.         production.setIcon(getResources().getDrawable(R.drawable.production));  
  39.         production.setOnClickListener(new OnClickListener() {  
  40.   
  41.             @Override  
  42.             public void onClick(View v) {  
  43.                 Toast.makeText(MyQuick.this, "Products selected", Toast.LENGTH_SHORT).show();  
  44.             }  
  45.         });  
  46.   
  47.         Button btn1 = (Button) this.findViewById(R.id.btn1);  
  48.         // 点击按钮弹出   
  49.         btn1.setOnClickListener(new View.OnClickListener() {  
  50.   
  51.             @Override  
  52.             public void onClick(View v) {  
  53.                 // 初始化一个QuickActions   
  54.                 QuickActions qa = new QuickActions(v);  
  55.                 // 为他添加actionitem   
  56.                 qa.addActionItem(chart);  
  57.                 qa.addActionItem(production);  
  58.                 qa.addActionItem(production);  
  59.                 qa.addActionItem(production);  
  60.                 // 设置动画风格   
  61.                 qa.setAnimStyle(QuickActions.ANIM_AUTO);  
  62.   
  63.                 qa.show();  
  64.             }  
  65.         });  
  66.   
  67.         final ActionItem dashboard = new ActionItem();  
  68.   
  69.         dashboard.setIcon(getResources().getDrawable(R.drawable.dashboard));  
  70.         dashboard.setOnClickListener(new OnClickListener() {  
  71.   
  72.             @Override  
  73.             public void onClick(View v) {  
  74.                 Toast.makeText(MyQuick.this, "dashboard selected", Toast.LENGTH_SHORT).show();  
  75.             }  
  76.         });  
  77.   
  78.         final ActionItem users = new ActionItem();  
  79.   
  80.         users.setIcon(getResources().getDrawable(R.drawable.users));  
  81.         users.setOnClickListener(new OnClickListener() {  
  82.   
  83.             @Override  
  84.             public void onClick(View v) {  
  85.                 Toast.makeText(MyQuick.this, "Products selected", Toast.LENGTH_SHORT).show();  
  86.             }  
  87.         });  
  88.   
  89.         Button btn2 = (Button) this.findViewById(R.id.btn2);  
  90.         btn2.setOnClickListener(new OnClickListener() {  
  91.   
  92.             @Override  
  93.             public void onClick(View v) {  
  94.                 QuickActions qa = new QuickActions(v);  
  95.   
  96.                 qa.addActionItem(dashboard);  
  97.                 qa.addActionItem(users);  
  98.                 qa.setAnimStyle(QuickActions.ANIM_GROW_FROM_CENTER);  
  99.   
  100.                 qa.show();  
  101.             }  
  102.         });  
  103.     }  
  104. }  

再讲下PopupWindow的风格的实现。其中一个风格代码如下：

 

view plaincopy to clipboardprint?
  1. <style name="Animations.PopDownMenu.Left">  
  2.        <item name="@android:windowEnterAnimation">@anim/grow_from_topleft_to_bottomright</item>  
  3.        <item name="@android:windowExitAnimation">@anim/shrink_from_bottomright_to_topleft</item>  
  4.    </style>  
　写两个item，分别实现弹出和消失动画。因为篇幅有限（好像已经很长了。。。），就不全部贴出来了。动画都是一个scale加一个alpha，对动画不熟悉的朋友可以自己研究下，从底部弹出的动画文件grow_from_bottom.xml：
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <scale  
  4.         android:fromXScale="0.3" android:toXScale="1.0"  
  5.         android:fromYScale="0.3" android:toYScale="1.0"  
  6.         android:pivotX="50%" android:pivotY="100%"  
  7.         android:duration="@android:integer/config_shortAnimTime"  
  8.     />  
  9.     <alpha  
  10.         android:interpolator="@android:anim/decelerate_interpolator"  
  11.         android:fromAlpha="0.0" android:toAlpha="1.0"  
  12.         android:duration="@android:integer/config_shortAnimTime"  
  13.     />  
  14. </set>  

最后来看看实现效果：

 

  

 好了 希望大家喜欢   有问题可以留言交流～

 



欢迎转载，转载请注明出处！否则将追究法律责任！http://blog.csdn.net/notice520
分享到：
| android UI进阶之android中隐藏的layout ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android popupwindow UI进阶之弹窗的使用

    Android PopupWindow UI进阶之弹窗的使用 Android 中的 PopupWindow 是一种常用的 UI 组件，它可以弹出一个对话框，提供给用户某些选项或信息。PopupWindow 和 AlertDialog 类似，但它们有各自的特点。下面我们来...

    高清版 Android高级进阶-顾浩鑫-高清版本-带目录

    2. 性能优化：掌握Android应用性能调优的策略和工具，比如使用TraceView进行方法执行跟踪，分析内存使用情况，优化数据库操作，减少布局嵌套等。 3. 多线程和并发：了解如何在Android中高效地使用多线程技术，例如...

    iOS开发 - 第02篇 - UI进阶 - 08 - 私人通讯录

    在iOS开发中，创建一个私人通讯录应用是一个常见的练习，它可以帮助开发者深入理解用户界面（UI）设计和数据管理。本教程将重点关注三个关键知识点：多个控制器之间的跳转、控制器之间的数据传递以及数据存储。 ...

    android-自定义-悬浮弹窗

    本教程将深入探讨如何在Android应用中创建和使用自定义的悬浮弹窗。 首先，我们需要理解Android的窗口管理器（Window Manager）是如何工作的。在Android系统中，所有可见的UI元素都是通过窗口管理器来添加和管理的...

    弹窗上传--An-Upload无组件上传类8.8.19 示例

    标题 "弹窗上传--An-...这个示例可以帮助开发者快速理解和使用An-Upload库，实现弹窗上传功能。通过分析和学习这些文件，我们可以掌握如何在ASP环境中集成和使用上传类库，以及如何构建前后端交互的文件上传系统。

    APP开发教程 Java Android移动端开发 4、Android UI进阶编程 (1) 共34页.pptx

    Android UI进阶编程主要涉及了Drawable的使用以及2D图形绘制的相关概念，这些是构建Android应用界面的关键元素。首先，我们来深入理解Android Drawable。 Android Drawable是一个抽象的概念，它涵盖了各种图形对象...

    unity 3d UI 通用弹窗类

    本文将深入探讨如何构建一个通用的弹窗类，并使用Unity 3D的DOTween插件来实现动态效果。 首先，我们需要理解Unity 3D的UI系统。Unity的UI框架基于Canvas，它是所有UI元素的容器。Canvas可以设置为屏幕空间或世界...

    Android开发时间选择弹窗（开始时间-结束时间）

    在这个场景下，"Android开发时间选择弹窗（开始时间-结束时间）"是一个关键的功能点，它涉及到UI设计、事件处理以及日期和时间的处理。下面将详细介绍如何实现这样一个功能。 首先，我们需要了解Android Studio，这...

    Android学习之Activity弹窗

    这些组件的使用都需要遵循Android的生命周期管理和UI线程规则，确保弹窗的正确显示和关闭，以及与用户交互的流畅性。 对于源码学习，深入理解这些组件的工作原理是非常有益的。通过查看Android源码，我们可以了解到...

    使用jquery-mobile+html5实现android本地通讯录

    在Android上实现本地通讯录访问，需要使用HTML5的Web SQL Database或IndexedDB来存储通讯录数据，同时利用PhoneGap或Cordova这样的框架将JavaScript API与Android原生API桥接。PhoneGap提供了一个名为`contacts`的...

    android 高级UI设计---定位弹窗

    相信大家都体验过android通讯录中的弹窗效果。但是android自带有一定的局限性，不能达到任意位置的弹窗，而项目开发的过程中经常会遇到这样的情况，所以就在网上查了一些资料，经过两天的研究终于做出来了。希望对...

    一个模仿DingDing的弹窗

    在IT行业中，尤其是在...总的来说，"一个模仿DingDing的弹窗"项目涉及到了Android界面设计、UI交互、自定义视图、活动管理等多个方面的技术知识，对于提升开发者在Android开发中的技能和经验具有很高的实践价值。

    Android-ContactFuzzySearch一个Android通讯录模糊搜索

    总结起来，"Android-ContactFuzzySearch"项目涵盖了Android通讯录API的使用、拼音转换、模糊搜索算法、数据排序、UI设计、性能优化以及第三方库的集成等多个方面的知识。对于希望在Android应用中实现高效通讯录模糊...

    Android开发实验---通讯录.docx

    2. **UI设计**：考虑用户体验，设计合理的界面布局，如使用ListView或RecyclerView展示联系人列表，提供拨号键盘等。 3. **权限管理**：使用拨打电话和发送短信功能，需要在Manifest.xml中声明相应的权限。 4. **...

    《Android高级进阶》

    2. **内存管理与性能优化**：理解Android的内存模型，如何避免内存泄漏，使用WeakReference和SoftReference，以及进行内存分析工具如MAT的使用，都是进阶开发者必须掌握的知识。 3. **组件化开发**：组件化是一种将...

    Android高级进阶-高清-带目录

    4. **UI优化**：涵盖性能调优技巧，如使用 ViewHolder 模式减少视图复用时的查找开销，以及如何利用布局动画和过渡效果提升用户体验。 5. **网络编程**：介绍Volley、OkHttp等网络库的使用，以及如何处理HTTP/HTTPS...

    通讯录弹窗效果源码分享

    在Android开发中，实现通讯录弹窗效果是一个常见的需求，比如在用户需要选择联系人时。本篇将详细解析标题“通讯录弹窗效果源码分享”所涉及的知识点，并结合描述与标签来深入探讨如何利用PopupWindows实现这样的...

    iOS开发 - 第02篇 - UI进阶 - 14 - 彩票(第一天)

    在iOS开发中，UI设计是用户体验的关键组成部分，而进阶的UI技巧则能让你的应用更加吸引人和易用。在这个“iOS开发 - 第02篇 - UI进阶 - 14 - 彩票(第一天)”的主题中，我们将探讨如何创建一个彩票应用的用户界面，这...

    Android高手进阶指南

    《Android高手进阶指南》是一本专为已经具备一定Android基础的开发者准备的深度学习资料。这本书涵盖了Android开发中的高级主题和技术，旨在帮助读者提升在Android领域的专业技能，成为真正的技术专家。 首先，本书...

Magicbox
Global site tag (gtag.js) - Google Analytics