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和動畫監聽實現相似「眨眼睛」的切換視圖效果

一、二、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簡單介紹中的知識點去對應的文章中尋找相關的具體信息。