ANDROID L - Material Design综合应用(Demo)

Material Design   2014-11-22 21:40:33 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)
 

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)        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(悬浮动作按钮)去控制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简介中的知识点去相应的文章中寻找相关的详细信息。

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!


扩展阅读

ANDROID L - Material Design详解(动画篇)
Material Design 介绍
Android开源工具项目集合
ANDROID L - Material Design详解(UI控件)
ANDROID L - Material Design详解(视图和阴影)

为您推荐

非常实用的CSS使用技巧
java发送内嵌图片邮件
【译】60个有用CSS代码片段
基于原生JS移动端响应式解决方案:AUTOSTRAP
jQuery Validate 表单验证

更多

Material Design
Android开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多