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：

 public class MyActivity extends Activity {

     private RecyclerView mRecyclerView;

     private MyAdapter myAdapter;

     ImageButton button;

     Context context;

     public static List actors = new ArrayList();

     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：

 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：

 public class MyAdapter
     extends RecyclerView.Adapter
 {


     private List actors;


     private Context mContext;


     public MyAdapter( Context context , List 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简介中的知识点去相应的文章中寻找相关的详细信息。