仿iPhone《最美应用》app的底部滑动菜单效果

线上效果图:

上代码:

核心类:CustomLayout .java

public class CustomLayout extends FrameLayout{
	private static final String TAG = CustomLayout.class.getSimpleName();
	private LinearLayout ll_bottom;
	private View rootView;
	private List<ImageView> imageViews=new ArrayList<ImageView>();
	private List<Point> points=new ArrayList<Point>();
	private Context context;
	private int singleImageWidth; 
	private int singleImageHeight; 
	private int bannerHeight;
	private int lastPosition=-1;
	private int count;

	public CustomLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context=context;
		rootView=LayoutInflater.from(context).inflate(R.layout.custom_layout,this);
		ll_bottom=(LinearLayout) rootView.findViewById(R.id.ll_bottom);
		fillImages();
		count=imageViews.size();
		showImages();
	}
	
	@Override
	protected void onLayout(boolean changed, int left, int top, int right,int bottom) {
		Log.i(TAG, "left="+left+",top="+top+",right="+right+",bottom="+bottom+"--->onLayout()");
		bannerHeight=getHeight();
		Log.i(TAG, "底部横幅高度:"+bannerHeight);
		singleImageWidth=imageViews.get(0).getWidth();
		singleImageHeight=imageViews.get(0).getHeight();
		Log.i(TAG, "一张图片的宽度:"+singleImageWidth);
		Log.i(TAG, "一张图片的高度:"+singleImageHeight);
		
		super.onLayout(changed, left, top, right, bottom);
	}
	
	@SuppressLint("ClickableViewAccessibility") 
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		float x=event.getX();
		int index=(int)(x/singleImageWidth);
		if(!checkIndex(imageViews, index)){
			return true;
		}
		int action=event.getAction();
		switch(action){
		case MotionEvent.ACTION_DOWN:
		case MotionEvent.ACTION_MOVE:
			if(lastPosition!=index){
				up(index);
			}
			lastPosition=index;
			break;
		case MotionEvent.ACTION_UP:
			down(index);
			//只做个简单的toast
			Toast.makeText(getContext(),"index:"+index, Toast.LENGTH_SHORT).show();
			break;
		}
		return true;
	}
	
	/**
	 * 上升
	 * @param index
	 * @since 2015-5-12下午7:25:42
	 * @author cuixingwang
	 */
	private void up(int index){
		final int selectImageTop=bannerHeight-singleImageHeight;
		ImageView selectimageView=imageViews.get(index);
		selectimageView.layout(selectimageView.getLeft(),selectImageTop,selectimageView.getRight(),selectImageTop+singleImageHeight);
		
		for (int i = index-1; i >=0; i--) {
			ImageView imageView=imageViews.get(i);
			int top=selectImageTop+(index-i)*10;
			
			int duration=150;
			anim(imageView,top,duration+=20*i);
			imageView.layout(imageView.getLeft(),top,imageView.getRight(),top+singleImageHeight);
		}
		
		for (int i = index; i < count; i++) {
			ImageView imageView=imageViews.get(i);
			int top=selectImageTop+(i-index)*10;
			int duration=150;
			anim(imageView,top,duration+=20*i);
			imageView.layout(imageView.getLeft(),top,imageView.getRight(),top+singleImageHeight);
		}
	}
	
	/**
	 * 下降
	 * @param index
	 * @since 2015-5-12下午7:25:49
	 * @author cuixingwang
	 */
	private void down(int index) {
		for (int i = 0; i < count; i++) {
			if(i!=index){
				ImageView imageView=imageViews.get(i);
				int top=bannerHeight-10;
				int duration=200;
				anim(imageView,top,duration+=20*i);
				imageView.layout(imageView.getLeft(),top,imageView.getRight(),top+singleImageHeight);
			}
		}
	}
	
	/**
	 * 动画
	 * @param view
	 * @param height
	 * @param duration
	 * @since 2015-5-12下午7:25:56
	 * @author cuixingwang
	 */
	@SuppressLint("NewApi") 
	private void anim(View view,int height,int duration){
		  ObjectAnimator
         .ofFloat(view, "y",height)//  
         .setDuration(duration)
         .start(); 
	}
	
	/**
	 * 检查是否越界
	 * @param imageViews
	 * @param index
	 * @return
	 * @since 2015-5-11下午5:04:19
	 * @author cuixingwang
	 */
	private boolean checkIndex(List<ImageView> imageViews,int index){
		return index<count;
	}
	
	
	private void showImages() {
		for (int i = 0; i < count; i++) {
			ll_bottom.addView(imageViews.get(i));
		}
	}
	
	private void addImages(int imageResId) {
		ImageView imageView=new ImageView(context);
		imageView.setImageResource(imageResId);
		imageViews.add(imageView);
	}
	

	private void fillImages() {
		addImages(R.drawable.a1);
		addImages(R.drawable.a2);
        addImages(R.drawable.a3);
        addImages(R.drawable.a4);
        addImages(R.drawable.a5);
        addImages(R.drawable.a6);
        addImages(R.drawable.a7);
        addImages(R.drawable.a8);
	}
}

MainActivity.java

public class MainActivity extends Activity {
	private static final String TAG = MainActivity.class.getSimpleName();
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout);
    }
}

activity_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    tools:context="com.example.iphone.MainActivity" >

    
    <com.example.iphone.CustomLayout
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>