ANDROID L - Material Design綜合應用（Demo）

jopen 10年前發布 | 55K 次閱讀 Android開發移動開發 Material Design

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（懸浮動作按鈕）去控制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），謝謝支持！

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1416663568039.html

Android開發移動開發 Material Design

ANDROID L - Material Design綜合應用（Demo）

相關經驗

相關資訊

相關文檔

目錄