转载请注明本文出自大苞米的博客(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<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()); } }); } } }剩余的Layout文件和一些烂七八糟的东西大家可以通过下方的Github连接找到。
Github下载地址:https://github.com/a396901990/AndroidDemo (AndroidL_MaterialDesgin_Demo)
写在最后:
代码写的比较搓,只为了快速完成功能,很多不规范的大家忽略好了。
并且代码中只有一些简单的注解,并没有详细讲解,因为我觉得也没什么可讲的,其中内容都是我之前文章中例子的应用。
大家可以对照上面的Demo简介中的知识点去相应的文章中寻找相关的详细信息。