Android——展开导航的设计...

我们来看看效果：

未展开之前：

展开以后：

这个就和手游中的+那个图形效果一样的，玩过手游的人应该知道。

布局文件采用framelayout：（层叠布局）

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


    <ImageView 
        android:id="@+id/iv_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/h"
        />

    <ImageView 
        android:id="@+id/iv_g"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g"
        />

    <ImageView 
        android:id="@+id/iv_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/f"
        />


    <ImageView 
        android:id="@+id/iv_e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/e"
        />

    <ImageView 
        android:id="@+id/iv_d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/d"
        />


    <ImageView 
        android:id="@+id/iv_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/c"
        />

    <ImageView 
        android:id="@+id/iv_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b"
        />

    <ImageView 
        android:id="@+id/iv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/a"


        />

</FrameLayout>

前提将图片导入到工程中去，按一个一个，最后一个图片将在页面显示，覆盖后面的图片。

Mainactivity：

package com.example.animtext1;

import java.util.ArrayList;
import java.util.List;

import android.R.anim;
import android.R.animator;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
    private int[] res = { R.id.iv_a, R.id.iv_b, R.id.iv_c, R.id.iv_d, R.id.iv_e, R.id.iv_f, R.id.iv_g, R.id.iv_h };
    private List<ImageView> ivlist = new ArrayList<ImageView>();
    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);

        for (int i = 0; i < res.length; i++) {
            ImageView iv = (ImageView) findViewById(res[i]);
            ivlist.add(iv);
            iv.setOnClickListener(this);
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.iv_a:
            if (flag) {
                openview();
            } else {
                closeview();
            }

            break;

        default:

            Toast.makeText(this, "clicked", Toast.LENGTH_SHORT).show();
            break;
        }
    }

    private void closeview() {
        // TODO Auto-generated method stub
        ObjectAnimator.ofFloat(ivlist.get(0), "alpha", 0f, 1f).setDuration(1000).start();
        for (int i = 1; i < res.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(ivlist.get(i), "translationY", i * 80f, 0f);
            animator.setDuration(300);
            animator.setInterpolator(new BounceInterpolator());
            animator.setStartDelay(i * 100);
            animator.start();
            flag = true;
        }
    }

    private void openview() {
        // TODO Auto-generated method stub

        ObjectAnimator.ofFloat(ivlist.get(0), "alpha", 0f, 1f).setDuration(1000).start();
        for (int i = 1; i < res.length; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(ivlist.get(i), "translationY", 0f, i * 80f);
            animator.setDuration(300);
            animator.setInterpolator(new BounceInterpolator());
            animator.setStartDelay(i * 100);
            animator.start();
            flag = false;
        }
    }



}

1、定义图片的id数组，for循环来初始化控件，将图片存入list容器当中。

2、通过图片的点击事件来进行效果的展开收缩。

3、定义一个标志位，true为展开，false为关闭导航。

4、ObjectAnimator.ofFloat(ivlist.get(0), “alpha”, 0f, 1f).setDuration(1000).start();

这是改变点击展开的图片透明度的改变。

5、animator.setStartDelay(i * 100);设置延迟，更好的观察动画效果。