ANDROID L——Material Design综合应用（Demo） .

转载请注明本文出自大苞米的博客（http://blog.csdn.net/a396901990），谢谢支持！

Material Design：

Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。

我将Material Design分为如下四部分：

主题和布局——ANDROID L——Material Design详解（主题和布局）

视图和阴影——ANDROID L——Material Design详解（视图和阴影）

UI控件——ANDROID L——Material Design详解（UI控件）

动画——ANDROID L——Material Design详解（动画篇）

而下面这个例子就是之前上面所介所绍的一个综合应用，废话不多说直接看图：

       

Demo简介：

左边的图：

1.RecyclerView，CardView

首先使用了Material Desgin新增的两个控件RecyclerView，CardView。

知识点参考：ANDROID L——RecyclerView,CardView导入和使用（Demo）

2. Floating Action Button & 视图阴影轮廓

这里和上篇文章不同的是我加了一个Floating Action Button（悬浮动作按钮）去控制CardView在RecyclerView中的添加和删除。

并且在蓝色的悬浮按钮上设置了阴影了轮廓（黑色背景不是很清楚）

知识点参考：ANDROID L——Material Design详解（视图和阴影）

3. Reveal Effect

在点击蓝色按钮时会有一个缩小的动画是使用了Reveal effect动画

知识点参考：ANDROID L——Material Design详解（动画篇）

右面的图：

1. Activity transitions

在点击单个条目时会跳转到一个新的Acitivty，跳转时执行Activity transitions动画，大家会看到第二个Activity中的视图会有一个向中央扩展的效果（Explode）

2. Shared Elements Transition

在从第一个Activity跳转到第二个Activity时，会有一个共享元素的动画效果使图片和悬浮按钮在两个Activity跳转时移动（控件间距离有些近效果不是特别明显）

3. Reveal effect和动画监听

通过Reveal effect和动画监听实现类似“眨眼睛”的切换视图效果

1、2、3知识点参考：ANDROID L——Material Design详解（动画篇）

代码介绍：

主Activity——MyActivity：

[java] view plain copy print ?

1. public class MyActivity extends Activity {  
2.   
3.     private RecyclerView mRecyclerView;  
4.   
5.     private MyAdapter myAdapter;  
6.   
7.     ImageButton button;  
8.   
9.     Context context;  
10.   
11.     public static List<Actor> actors = new ArrayList<Actor>();  
12.   
13.     private static String[] names = {"朱茵", "张柏芝", "张敏", "莫文蔚", "黄圣依", "赵薇", "如花"};  
14.   
15.     private static String[] pics = {"p1", "p2", "p3", "p4", "p5", "p6", "p7"};  
16.   
17.     private static String[] works = {"大话西游", "喜剧之王", "p3", "p4", "p5", "p6", "p7"};  
18.   
19.     private static String[] role = {"紫霞仙子", "柳飘飘", "p3", "p4", "p5", "p6", "p7"};  
20.   
21.     private static String[][] picGroups = {{"p1","p1_1", "p1_2", "p1_3"},{"p2","p2_1", "p2_2", "p2_3"},{"p3"},{"p4"},{"p5"},{"p6"},{"p7"}};  
22.   
23.     @Override  
24.     protected void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         // set Explode enter transition animation for current activity   
27.         getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
28.         getWindow().setEnterTransition(new Explode().setDuration(1000));  
29.         setContentView(R.layout.main_layout);  
30.   
31.         // init data   
32.         this.context = this;  
33.         actors.add(new Actor(names[0], pics[0], works[0], role[0], picGroups[0]));  
34.         getActionBar().setTitle("那些年我们追的星女郎");  
35.   
36.         // init RecyclerView   
37.         mRecyclerView = (RecyclerView) findViewById(R.id.list);  
38.         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
39.         mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
40.         // set adapter   
41.         myAdapter = new MyAdapter(this, actors);  
42.         mRecyclerView.setAdapter(myAdapter);  
43.   
44.         // set outline and listener for floating action button   
45.         button = (ImageButton) this.findViewById(R.id.add_button);  
46.         button.setOutlineProvider(new ViewOutlineProvider() {  
47.             @Override  
48.             public void getOutline(View view, Outline outline) {  
49.                 int shapeSize = (int) getResources().getDimension(R.dimen.shape_size);  
50.                 outline.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);  
51.             }  
52.         });  
53.         button.setClipToOutline(true);  
54.         button.setOnClickListener(new MyOnClickListener());  
55.   
56.     }  
57.   
58.     public class MyOnClickListener implements View.OnClickListener {  
59.         boolean isAdd = true;  
60.   
61.         @Override  
62.         public void onClick(View v) {  
63.             // start animation   
64.             Animator animator = createAnimation(v);  
65.             animator.start();  
66.   
67.             // add item   
68.             if (myAdapter.getItemCount() != names.length && isAdd) {  
69.   
70.                 actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()], works[myAdapter.getItemCount()], role[myAdapter.getItemCount()], picGroups[myAdapter.getItemCount()]));  
71.                 mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
72.                 myAdapter.notifyDataSetChanged();  
73.             }  
74.             // delete item   
75.             else {  
76.                 actors.remove(myAdapter.getItemCount() - 1);  
77.                 mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
78.                 myAdapter.notifyDataSetChanged();  
79.             }  
80.   
81.             if (myAdapter.getItemCount() == 0) {  
82.                 button.setImageDrawable(getDrawable(android.R.drawable.ic_input_add));  
83.                 isAdd = true;  
84.             }  
85.             if (myAdapter.getItemCount() == names.length) {  
86.                 button.setImageDrawable(getDrawable(android.R.drawable.ic_delete));  
87.                 isAdd = false;  
88.             }  
89.         }  
90.     }  
91.   
92.     /** 
93.      * start detail activity 
94.      */  
95.     public void startActivity(final View v, final int position) {  
96.   
97.         View pic = v.findViewById(R.id.pic);  
98.         View add_btn = this.findViewById(R.id.add_button);  
99.   
100.         // set share element transition animation for current activity   
101.         Transition ts = new ChangeTransform();  
102.         ts.setDuration(3000);  
103.         getWindow().setExitTransition(ts);  
104.         Bundle bundle = ActivityOptions.makeSceneTransitionAnimation((Activity) context,  
105.                 Pair.create(pic, position + "pic"),  
106.                 Pair.create(add_btn, "ShareBtn")).toBundle();  
107.   
108.         // start activity with share element transition   
109.         Intent intent = new Intent(context, DetailActivity.class);  
110.         intent.putExtra("pos", position);  
111.         startActivity(intent, bundle);  
112.   
113.     }  
114.   
115.     /** 
116.      * create CircularReveal animation 
117.      */  
118.     public Animator createAnimation(View v) {  
119.         // create a CircularReveal animation   
120.         Animator animator = ViewAnimationUtils.createCircularReveal(  
121.                 v,  
122.                 v.getWidth() / 2,  
123.                 v.getHeight() / 2,  
124.                 0,  
125.                 v.getWidth());  
126.         animator.setInterpolator(new AccelerateDecelerateInterpolator());  
127.         animator.setDuration(500);  
128.         return animator;  
129.     }  
130.   
131. }  

public class MyActivity extends Activity {

    private RecyclerView mRecyclerView;

    private MyAdapter myAdapter;

    ImageButton button;

    Context context;

    public static List<Actor> actors = new ArrayList<Actor>();

    private static String[] names = {"朱茵", "张柏芝", "张敏", "莫文蔚", "黄圣依", "赵薇", "如花"};

    private static String[] pics = {"p1", "p2", "p3", "p4", "p5", "p6", "p7"};

    private static String[] works = {"大话西游", "喜剧之王", "p3", "p4", "p5", "p6", "p7"};

    private static String[] role = {"紫霞仙子", "柳飘飘", "p3", "p4", "p5", "p6", "p7"};

    private static String[][] picGroups = {{"p1","p1_1", "p1_2", "p1_3"},{"p2","p2_1", "p2_2", "p2_3"},{"p3"},{"p4"},{"p5"},{"p6"},{"p7"}};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // set Explode enter transition animation for current activity
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        getWindow().setEnterTransition(new Explode().setDuration(1000));
        setContentView(R.layout.main_layout);

        // init data
        this.context = this;
        actors.add(new Actor(names[0], pics[0], works[0], role[0], picGroups[0]));
        getActionBar().setTitle("那些年我们追的星女郎");

        // init RecyclerView
        mRecyclerView = (RecyclerView) findViewById(R.id.list);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        // set adapter
        myAdapter = new MyAdapter(this, actors);
        mRecyclerView.setAdapter(myAdapter);

        // set outline and listener for floating action button
        button = (ImageButton) this.findViewById(R.id.add_button);
        button.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                int shapeSize = (int) getResources().getDimension(R.dimen.shape_size);
                outline.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);
            }
        });
        button.setClipToOutline(true);
        button.setOnClickListener(new MyOnClickListener());

    }

    public class MyOnClickListener implements View.OnClickListener {
        boolean isAdd = true;

        @Override
        public void onClick(View v) {
            // start animation
            Animator animator = createAnimation(v);
            animator.start();

            // add item
            if (myAdapter.getItemCount() != names.length && isAdd) {

                actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()], works[myAdapter.getItemCount()], role[myAdapter.getItemCount()], picGroups[myAdapter.getItemCount()]));
                mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                myAdapter.notifyDataSetChanged();
            }
            // delete item
            else {
                actors.remove(myAdapter.getItemCount() - 1);
                mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                myAdapter.notifyDataSetChanged();
            }

            if (myAdapter.getItemCount() == 0) {
                button.setImageDrawable(getDrawable(android.R.drawable.ic_input_add));
                isAdd = true;
            }
            if (myAdapter.getItemCount() == names.length) {
                button.setImageDrawable(getDrawable(android.R.drawable.ic_delete));
                isAdd = false;
            }
        }
    }

    /**
     * start detail activity
     */
    public void startActivity(final View v, final int position) {

        View pic = v.findViewById(R.id.pic);
        View add_btn = this.findViewById(R.id.add_button);

        // set share element transition animation for current activity
        Transition ts = new ChangeTransform();
        ts.setDuration(3000);
        getWindow().setExitTransition(ts);
        Bundle bundle = ActivityOptions.makeSceneTransitionAnimation((Activity) context,
                Pair.create(pic, position + "pic"),
                Pair.create(add_btn, "ShareBtn")).toBundle();

        // start activity with share element transition
        Intent intent = new Intent(context, DetailActivity.class);
        intent.putExtra("pos", position);
        startActivity(intent, bundle);

    }

    /**
     * create CircularReveal animation
     */
    public Animator createAnimation(View v) {
        // create a CircularReveal animation
        Animator animator = ViewAnimationUtils.createCircularReveal(
                v,
                v.getWidth() / 2,
                v.getHeight() / 2,
                0,
                v.getWidth());
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(500);
        return animator;
    }

}

第二个Activity——DetailActivity：

[java] view plain copy print ?

1. public class DetailActivity extends Activity {  
2.   
3.     ImageView pic;  
4.   
5.     int position;  
6.   
7.     int picIndex = 0;  
8.   
9.     Actor actor;  
10.   
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.         // set Explode enter transition animation for current activity   
15.         getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
16.         getWindow().setEnterTransition(new Explode().setDuration(1000));  
17.         getWindow().setExitTransition(null);  
18.   
19.         setContentView(R.layout.detail_layout);  
20.   
21.         position = getIntent().getIntExtra("pos", 0);  
22.         actor = MyActivity.actors.get(position);  
23.         pic = (ImageView) findViewById(R.id.detail_pic);  
24.   
25.         TextView name = (TextView) findViewById(R.id.detail_name);  
26.         TextView works = (TextView) findViewById(R.id.detail_works);  
27.         TextView role = (TextView) findViewById(R.id.detail_role);  
28.         ImageButton btn = (ImageButton) findViewById(R.id.detail_btn);  
29.   
30.         // set detail info   
31.         pic.setTransitionName(position + "pic");  
32.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this)));  
33.         name.setText("姓名：" + actor.name);  
34.         works.setText("代表作：" + actor.works);  
35.         role.setText("饰演：" + actor.role);  
36.         // set action bar title   
37.         getActionBar().setTitle(MyActivity.actors.get(position).name);  
38.   
39.         // floating action button   
40.         btn.setImageDrawable(getDrawable(android.R.drawable.ic_menu_gallery));  
41.         btn.setOnClickListener(new View.OnClickListener() {  
42.             @Override  
43.             public void onClick(View v) {  
44.                 // set first animation   
45.                 Animator animator = createAnimation(pic, true);  
46.                 animator.start();  
47.                 animator.addListener(new Animator.AnimatorListener() {  
48.                     @Override  
49.                     public void onAnimationStart(Animator animation) {  
50.   
51.                     }  
52.   
53.                     @Override  
54.                     public void onAnimationEnd(Animator animation) {  
55.                         picIndex++;  
56.                         if (actor.getPics() != null) {  
57.                             if (picIndex >= actor.getPics().length) {  
58.                                 picIndex = 0;  
59.                             }  
60.                             // set second animation   
61.                             doSecondAnim();  
62.                         }  
63.                     }  
64.   
65.                     @Override  
66.                     public void onAnimationCancel(Animator animation) {  
67.   
68.                     }  
69.   
70.                     @Override  
71.                     public void onAnimationRepeat(Animator animation) {  
72.   
73.                     }  
74.                 });  
75.             }  
76.         });  
77.     }  
78.   
79.     /** 
80.      * exec second animation for pic view 
81.      */  
82.     private void doSecondAnim() {  
83.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.getPics()[picIndex])));  
84.         Animator animator = createAnimation(pic, false);  
85.         animator.start();  
86.     }  
87.   
88.     /** 
89.      * create CircularReveal animation with first and second sequence 
90.      */  
91.     public Animator createAnimation(View v, Boolean isFirst) {  
92.   
93.         Animator animator;  
94.   
95.         if (isFirst) {  
96.             animator = ViewAnimationUtils.createCircularReveal(  
97.                     v,  
98.                     v.getWidth() / 2,  
99.                     v.getHeight() / 2,  
100.                     v.getWidth(),  
101.                     0);  
102.         } else {  
103.             animator = ViewAnimationUtils.createCircularReveal(  
104.                     v,  
105.                     v.getWidth() / 2,  
106.                     v.getHeight() / 2,  
107.                     0,  
108.                     v.getWidth());  
109.         }  
110.   
111.         animator.setInterpolator(new DecelerateInterpolator());  
112.         animator.setDuration(500);  
113.         return animator;  
114.     }  
115.   
116.     @Override  
117.     public void onBackPressed() {  
118.         super.onBackPressed();  
119.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.picName)));  
120.         finishAfterTransition();  
121.     }  
122.   
123. }  

public class DetailActivity extends Activity {

    ImageView pic;

    int position;

    int picIndex = 0;

    Actor actor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // set Explode enter transition animation for current activity
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        getWindow().setEnterTransition(new Explode().setDuration(1000));
        getWindow().setExitTransition(null);

        setContentView(R.layout.detail_layout);

        position = getIntent().getIntExtra("pos", 0);
        actor = MyActivity.actors.get(position);
        pic = (ImageView) findViewById(R.id.detail_pic);

        TextView name = (TextView) findViewById(R.id.detail_name);
        TextView works = (TextView) findViewById(R.id.detail_works);
        TextView role = (TextView) findViewById(R.id.detail_role);
        ImageButton btn = (ImageButton) findViewById(R.id.detail_btn);

        // set detail info
        pic.setTransitionName(position + "pic");
        pic.setImageDrawable(getDrawable(actor.getImageResourceId(this)));
        name.setText("姓名：" + actor.name);
        works.setText("代表作：" + actor.works);
        role.setText("饰演：" + actor.role);
        // set action bar title
        getActionBar().setTitle(MyActivity.actors.get(position).name);

        // floating action button
        btn.setImageDrawable(getDrawable(android.R.drawable.ic_menu_gallery));
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // set first animation
                Animator animator = createAnimation(pic, true);
                animator.start();
                animator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        picIndex++;
                        if (actor.getPics() != null) {
                            if (picIndex >= actor.getPics().length) {
                                picIndex = 0;
                            }
                            // set second animation
                            doSecondAnim();
                        }
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
            }
        });
    }

    /**
     * exec second animation for pic view
     */
    private void doSecondAnim() {
        pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.getPics()[picIndex])));
        Animator animator = createAnimation(pic, false);
        animator.start();
    }

    /**
     * create CircularReveal animation with first and second sequence
     */
    public Animator createAnimation(View v, Boolean isFirst) {

        Animator animator;

        if (isFirst) {
            animator = ViewAnimationUtils.createCircularReveal(
                    v,
                    v.getWidth() / 2,
                    v.getHeight() / 2,
                    v.getWidth(),
                    0);
        } else {
            animator = ViewAnimationUtils.createCircularReveal(
                    v,
                    v.getWidth() / 2,
                    v.getHeight() / 2,
                    0,
                    v.getWidth());
        }

        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(500);
        return animator;
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.picName)));
        finishAfterTransition();
    }

}

RecyclerView的Adapter：

[java] view plain copy print ?

1. public class MyAdapter  
2.     extends RecyclerView.Adapter<MyAdapter.ViewHolder>  
3. {  
4.   
5.   
6.     private List<Actor> actors;  
7.   
8.   
9.     private Context mContext;  
10.   
11.   
12.     public MyAdapter( Context context , List<Actor> actors)  
13.     {  
14.         this.mContext = context;  
15.         this.actors = actors;  
16.     }  
17.   
18.   
19.     @Override  
20.     public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )  
21.     {  
22.         View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);  
23.         return new ViewHolder(v);  
24.     }  
25.   
26.   
27.     @Override  
28.     public void onBindViewHolder( ViewHolder viewHolder, int i )  
29.     {  
30.         Actor p = actors.get(i);  
31.         viewHolder.mContext = mContext;  
32.         viewHolder.mTextView.setText(p.name);  
33.         viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));  
34.     }  
35.   
36.   
37.     @Override  
38.     public int getItemCount()  
39.     {  
40.         return actors == null ? 0 : actors.size();  
41.     }  
42.   
43.   
44.     public static class ViewHolder  
45.         extends RecyclerView.ViewHolder  
46.     {  
47.         public TextView mTextView;  
48.   
49.   
50.         public ImageView mImageView;  
51.   
52.   
53.         public Context mContext;  
54.   
55.   
56.         public ViewHolder( View v )  
57.         {  
58.             super(v);  
59.             mTextView = (TextView) v.findViewById(R.id.name);  
60.             mImageView = (ImageView) v.findViewById(R.id.pic);  
61.   
62.   
63.             v.setOnClickListener(new View.OnClickListener() {  
64.                 @Override  
65.                 public void onClick(View v) {  
66.                 ((MyActivity)mContext).startActivity(v, getPosition());  
67.                 }  
68.             });  
69.         }  
70.     }  
71. }  

public class MyAdapter
    extends RecyclerView.Adapter<MyAdapter.ViewHolder>
{


    private List<Actor> actors;


    private Context mContext;


    public MyAdapter( Context context , List<Actor> actors)
    {
        this.mContext = context;
        this.actors = actors;
    }


    @Override
    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
    {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
        return new ViewHolder(v);
    }


    @Override
    public void onBindViewHolder( ViewHolder viewHolder, int i )
    {
        Actor p = actors.get(i);
        viewHolder.mContext = mContext;
        viewHolder.mTextView.setText(p.name);
        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
    }


    @Override
    public int getItemCount()
    {
        return actors == null ? 0 : actors.size();
    }


    public static class ViewHolder
        extends RecyclerView.ViewHolder
    {
        public TextView mTextView;


        public ImageView mImageView;


        public Context mContext;


        public ViewHolder( View v )
        {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.name);
            mImageView = (ImageView) v.findViewById(R.id.pic);


            v.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                ((MyActivity)mContext).startActivity(v, getPosition());
                }
            });
        }
    }
}

剩余的Layout文件和一些烂七八糟的东西大家可以通过下方的Github连接找到。

Github下载地址：https://github.com/a396901990/AndroidDemo  (AndroidL_MaterialDesgin_Demo)

写在最后：

代码写的比较搓，只为了快速完成功能，很多不规范的大家忽略好了。

并且代码中只有一些简单的注解，并没有详细讲解，因为我觉得也没什么可讲的，其中内容都是我之前文章中例子的应用。

大家可以对照上面的Demo简介中的知识点去相应的文章中寻找相关的详细信息。