仿网易下拉菜单，UC底部弹出菜单（带动画效果，讲解原理）

首先看看效果

实现该效果，我们想要的是

1. 布局自定义，修改简单

2.代码简单，容易控制，学习成本低

OK，以上2个条件都满足。

来看如何实现。首先这种操作是用了动画效果，动画文件需要2个，第一个显示，第二个隐藏。全部放在res/anim 目录下

首先看进入代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="300"
        android:fromYDelta="-100%"
        android:fillAfter="true"
        android:toYDelta="0%" />
</set>

fromYdelta 设置为 -100% 指的是以现在位置为基准线，让自己位置在上面。画个图

注意我写的是对应的方框的底部来说的，注意是0% 而不是100%  这里面也是因为布局的时候，要弹出，显示的UI是 0%的状态。

来看缩回的代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromYDelta="0%"
        android:fillAfter="true"
        android:toYDelta="-100%" />
</set>

fromYDelta起点当然是0%了

OK，你如果真的明白以上我表达的意思，那接下来的代码不看也罢，就是简单的View.setAnimation() 而已了

全部贴出来吧

首先布局文件，注意一定把该布局设置为  android:visiability="gone"   这样用户不会点击到

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!-- 弹出/缩回的布局 -->
      <RelativeLayout android:id="@+id/layout"
        			android:layout_width="fill_parent"
        			android:layout_height="200dip"
        			android:background="#00ff00"
        			android:layout_below="@+id/top"
        			android:visibility="gone"
        			>
          <ImageView android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_centerInParent="true"
                     android:src="@drawable/a"/>
       </RelativeLayout>
       
      
      <!-- title -->
      <RelativeLayout android:id="@+id/top" 
                    android:layout_width="fill_parent"
        		    android:layout_height="100dip"
        		    android:background="#000000">
        <Button android:id="@+id/btn"
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
            	android:layout_centerInParent="true"
            	android:text="下垃菜单"/>
    </RelativeLayout>

代码:

/**
 * 
 * 仿网易下拉菜单
 * 
 * @author Lq
 */
public class PullAndUpMenuActivity extends Activity{
	
	private Button mBtn;
	private RelativeLayout mLayout;
	private boolean isShow =false;
	private Animation animEnter = null;
	private Animation animExit = null;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_menu);
		mBtn = (Button) findViewById(R.id.btn);
		mBtn.setOnClickListener(onMenuClickListener);
		mLayout = (RelativeLayout) findViewById(R.id.layout);
		animEnter = AnimationUtils.loadAnimation(this, R.anim.vertical_enter);
	    animExit = AnimationUtils.loadAnimation(this, R.anim.vertical_exit);
	}
	
	OnClickListener onMenuClickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			if(!isShow){
				performAnimateOn();
			}else{
				performAnimateOff();
			}
		}
		
		
	};
	
	 private void performAnimateOn() {
			 mLayout.setAnimation(animEnter);
	         animEnter.start();
	         mLayout.setVisibility(View.VISIBLE);
	         isShow = true;
	    }

	 private void performAnimateOff() {
		 mLayout.setAnimation(animExit);
         animExit.start();
         mLayout.setVisibility(View.GONE);
         isShow = false;
	    }
}

接下来说说UC的吧，来看看图。

好了，如果你看懂了，那么你就会了。