ANDROID L——Material Design綜合應用（Demo），androidmaterial

ANDROID L——Material Design綜合應用（Demo），androidmaterial

轉載請註明本文出自大苞米的部落格（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簡介中的知識點去相應的文章中尋找相關的詳細資料。

我是一個Android初學者，Android l的發布，對初學者意味著什？

不意味著什麼，初學就要學最新的。Android L重大的變化主要體現在UI與功能上，Google提出了Material Design的設計理念。我認為這個版本的代碼結構和之前的Android版本在大體上沒什麼不同，因此大多數的文檔還是可以用的。推薦去Google下載一份Android L的開發文檔，看看代碼上有沒有什麼變動。因為你初學，建議你在設計時優先學習卡片式布局、Fragment等等，盡量不要用Android 2.3以後被摒棄掉的方法和類。我也是一個Android開發人員，做過一些小應用，有問題歡迎來提問。希望這些能協助到你。
 
把iOS與安卓50即Android L做對比，這兩個系統的優勢與不足之處各自在什地方，各自特點在

這個看個人，如果你想要貼心優質的體驗，選iOS，如果你想追求個人化，自由度，又對安全方面沒啥要求，就選安卓