• 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<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简介中的知识点去相应的文章中寻找相关的详细信息。


  • 相关阅读:
    sql2005 Reporting service 自定义报表调色版
    moss2007自定义网站栏不显示
    设置列表字段为主键
    分享"SharpZipLip使用代码"
    关于“解决实现注册用户后,自动具备访问网站的权限的问题”文章中配置出现找不到角色的问题的解决办法
    共享GridView DataGrid DataTable导出到Excel代码
    TD8.0管理员工具
    共享一个对Reflector 反编译支持中文的修正FileGenerator文件
    WPF的Binding学习笔记(一)
    C#学习☞WPF的一个有趣试验
  • 原文地址:https://www.cnblogs.com/zhangyunlin/p/6168041.html
Copyright © 2020-2023  润新知