ANDROID L - Material Design综合应用（Demo）
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<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：
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<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()); } }); } } } Github下载地址：https://github.com/a396901990/AndroidDemo (AndroidL_MaterialDesgin_Demo)
写在最后：
代码写的比较搓，只为了快速完成功能，很多不规范的大家忽略好了。
并且代码中只有一些简单的注解，并没有详细讲解，因为我觉得也没什么可讲的，其中内容都是我之前文章中例子的应用。
大家可以对照上面的Demo简介中的知识点去相应的文章中寻找相关的详细信息。
转载请注明本文出自大苞米的博客（http://blog.csdn.net/a396901990），谢谢支持！
本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！