zoukankan      html  css  js  c++  java
  • 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(悬浮动作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简单介绍中的知识点去对应的文章中寻找相关的具体信息。


  • 相关阅读:
    BZOJ1119: [POI2009]SLO
    BZOJ1486: [HNOI2009]最小圈
    BZOJ1098: [POI2007]办公楼biu
    BZOJ2242: [SDOI2011]计算器
    PAT A1023
    SpringCloud之整合Feign
    SpringCloud之整合Feign
    小程序在wxml页面格式化类似的2019-02-16T10:54:47.831000时间
    小程序在wxml页面格式化类似的2019-02-16T10:54:47.831000时间
    Javascript基础之-var,let和const深入解析(二)
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4219885.html
Copyright © 2011-2022 走看看