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具体解释（动画篇）

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

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

Demo简单介绍：

左边的图：

1.RecyclerView，CardView

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

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

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

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

而且在蓝色的悬浮button上设置了阴影了轮廓（黑色背景不是非常清楚）

知识点參考：ANDROID L——Material Design具体解释（视图和阴影）

3.Reveal Effect

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

知识点參考：ANDROID L——Material Design具体解释（动画篇）

右面的图：

1.Activity transitions

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

2.Shared Elements Transition

在从第一个Activity跳转到第二个Activity时，会有一个共享元素的动画效果使图片和悬浮button在两个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简单介绍中的知识点去对应的文章中寻找相关的具体信息。

更多相关文章

随机推荐