背景知识

  1. drawlayout的使用
  2. recycleView的使用
  3. CardView的使用
  4. 一些开源动画库的使用

ImageView的scaleType属性与adjustViewBounds属性 ，参考链接：

ImageView的android:adjustViewBounds属性 - - ITeye技术网站

Android ImageView的scaleType属性与adjustViewBounds属性 - Android移动开发技术文章_手机开发 - 红黑联盟

效果如下





程序开始动画实现

第一步：使用开源库

gzu-liyujiang/ViewAnimator: A fluent Android animation library。安卓动画库

在depencies中加入

compile 'com.github.florent37:viewanimator:1.0.2@aar'

compile 'com.nineoldandroids:library:2.4.0'

java代码

package com.zj.materialfood;

import android.content.Intent;

import android.graphics.Color;

import android.os.Bundle;

import android.os.Message;

import android.support.v7.app.AppCompatActivity;

import android.view.animation.AccelerateDecelerateInterpolator;

import android.widget.ImageView;

import android.widget.TextView;

import com.github.florent37.viewanimator.AnimationListener;

import com.github.florent37.viewanimator.ViewAnimator;

import java.util.Locale;

/**

 * Created by jjx on 2016/4/9.

 */

public class StartActivity extends AppCompatActivity{

    ImageView image;

    ImageView mountain;

    TextView text;

    TextView percent;

    android.os.Handler handler=new android.os.Handler()

    {

        @Override

        public void handleMessage(Message msg) {

            super.handleMessage(msg);

        }

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_start);

        image = (ImageView) findViewById(R.id.image1);

        mountain = (ImageView) findViewById(R.id.mountain);

        text = (TextView) findViewById(R.id.text1);

        percent = (TextView) findViewById(R.id.percent);

        animateParallel();

        /*handler.postDelayed(new Runnable() {

            @Override

            public void run() {

                // TODO Auto-generated method stub

                //进入主页面

                Intent intent = new Intent(StartActivity.this, MainActivity.class);

                startActivity(intent);

            }

        }, 6000);*/

    }

    private void animateParallel() {

        ViewAnimator.animate(mountain, image)

                .dp().translationY(-1000, 0)

                .alpha(0, 1)

                .andAnimate(percent)

                .scale(0, 1)

                .andAnimate(text)

                .dp().translationY(1000, 0)

                .textColor(Color.BLACK, Color.WHITE)

                .backgroundColor(Color.WHITE, Color.BLACK)

                .waitForHeight()

                .interpolator(new AccelerateDecelerateInterpolator())

                .duration(1000)

                .thenAnimate(percent)

                .custom(new AnimationListener.Update<TextView>() {

                    @Override

                    public void update(TextView view, float value) {

                        value = value * 100;

                        view.setText(String.format(Locale.US, "%.0f%%", value));

                    }

                }, 0, 1)

                .andAnimate(image)

                .rotation(0, 360)

                .onStop(new AnimationListener.Stop() {

                    @Override

                    public void onStop() {

                        Intent intent = new Intent(StartActivity.this, MainActivity.class);

                        startActivity(intent);

                    }

                })

                .duration(1000)

                .start();

    }

}

主界面效果实现

使用开源库

gabrielemariotti/RecyclerViewItemAnimators: An Android library which provides simple Item animations to RecyclerView items

添加依赖

dependencies {

    compile 'com.github.gabrielemariotti.recyclerview:recyclerview-animators:0.3.0-SNAPSHOT@aar'

}

添加仓库

repositories {

    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }

}

实现

package com.zj.materialfood;

import android.content.Intent;

import android.os.Bundle;

import android.os.Message;

import android.support.design.widget.NavigationView;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.GridLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import java.util.List;

import it.gmariotti.recyclerview.adapter.SlideInBottomAnimatorAdapter;

import it.gmariotti.recyclerview.adapter.SlideInRightAnimatorAdapter;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    private List<String> mDatas;

    private HomeAdapter mAdapter;

    int ids[]=new int[]{R.drawable.food1,R.drawable.food2,R.drawable.food3,R.drawable.food4,R.drawable.food5,R.drawable.food6,R.drawable.food7,R.drawable.food8};

    Toolbar toolbar;

    SlideInBottomAnimatorAdapter slideInBottomAnimatorAdapter;

    SlideInRightAnimatorAdapter slideInRightAnimatorAdapter;

    DrawerLayout mDrawerLayout;

    ActionBarDrawerToggle mDrawerToggle;

    NavigationView mNavigationView;

    android.os.Handler handler=new android.os.Handler()

    {

        @Override

        public void handleMessage(Message msg) {

            super.handleMessage(msg);

        }

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        toolbar= (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        setTitle("天天美食");

        //设置DrawerLayout

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,

                R.string.drawer_open, R.string.drawer_close)

        {

            //关闭侧边栏时响应

            @Override

            public void onDrawerClosed(View drawerView) {

                super.onDrawerClosed(drawerView);

            }

            //打开侧边栏时响应

            @Override

            public void onDrawerOpened(View drawerView) {

                super.onDrawerOpened(drawerView);

            }

        };

        mDrawerToggle.syncState();

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        //设置NavigationView点击事件

        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

        setupDrawerContent(mNavigationView);

        //设置NavigationView点击事件

        recyclerView= (RecyclerView) findViewById(R.id.id_recyclerview);

        recyclerView.setLayoutManager(new GridLayoutManager(this, 4));

        mAdapter=new HomeAdapter();

        slideInBottomAnimatorAdapter=new SlideInBottomAnimatorAdapter(mAdapter,recyclerView);

        //recyclerView.setAdapter(slideInRightAnimatorAdapter);

        handler.postDelayed(new Runnable() {

            @Override

            public void run() {

                // TODO Auto-generated method stub

                //进入主页面

                recyclerView.setAdapter(slideInBottomAnimatorAdapter);

            }

        }, 1000);

        //recyclerView.setAdapter(mAdapter);

    }

    private void setupDrawerContent(NavigationView mNavigationView) {

    }

    class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder>

    {

        @Override

        public HomeAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            MyViewHolder holder=new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item_main,parent,false));

            return holder;

        }

        @Override

        public void onBindViewHolder(HomeAdapter.MyViewHolder holder, int position) {

            holder.iv.setBackgroundResource(ids[position]);

        }

        @Override

        public int getItemCount() {

            return 8;

        }

        class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener

        {

            ImageView iv;

            public MyViewHolder(View view)

            {

                super(view);

                iv = (ImageView) view.findViewById(R.id.iv_food);

                view.setOnClickListener(this);

            }

            @Override

            public void onClick(View view) {

                Intent intent=new Intent(MainActivity.this,FoodCardActivity.class);

                startActivity(intent);

            }

        }

    }

}

食物列表界面

注意，笔者在这里碰到了很大的坑

老是报空指针异常，后来发现问题出在设置TextView时，setTextView时总是出错，搞了很久都不明白，后来才发现是在 public ViewHolder(View v) 方法中，绑定View与ViewHolder时，findViewById没有用 v.findViewById(R.id.iv_food_item)，而是直接findViewById(R.id.iv_food_item)了。

总体页面布局

<?xml version="1.0" encoding="utf-8"?>

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar

            android:id="@+id/food_toolbar"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_alignParentTop="true"

            android:title="天天美食"

            android:background="?attr/colorPrimary"

            >

        </android.support.v7.widget.Toolbar>

        <android.support.v7.widget.RecyclerView

            android:id="@+id/food_recyclerview"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_below="@+id/food_toolbar"

            android:scrollbars="none" />

    </RelativeLayout>

recyView的item布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_marginBottom="@dimen/card_margin"

    android:layout_marginLeft="@dimen/card_margin"

    android:layout_marginRight="@dimen/card_margin"

    android:clickable="true"

    app:cardCornerRadius="10dp"

    app:cardElevation="10dp">

    <LinearLayout

        style="@style/CardView.Content"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/iv_food_item"

        android:layout_width="109dp"

        android:layout_height="135dp"

        android:adjustViewBounds="true"

        android:background="@drawable/food6"

        android:gravity="center"

        android:layout_margin="4dp"

        />

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginLeft="10dp"

            android:orientation="vertical">

            <TextView

                android:id="@+id/tvTitle"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:textAppearance="@style/TextAppearance.AppCompat.Title"

                android:text="麻婆豆腐"

                android:textColor="@color/primary_text" />

         <TextView

                android:id="@+id/tvDesc"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="2dp"

                android:text="@string/book_description_1"

                android:textColor="@color/secondary_text" />

        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

java代码实现

package com.zj.materialfood;

import android.content.Intent;

import android.os.Bundle;

import android.support.design.widget.Snackbar;

import android.support.v4.app.NavUtils;

import android.support.v4.app.TaskStackBuilder;

import android.support.v7.app.ActionBar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.DefaultItemAnimator;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.support.v7.widget.Toolbar;

import android.util.TypedValue;

import android.view.LayoutInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

/**

 * Created by jjx on 2016/4/10.

 */

public class FoodCardActivity extends AppCompatActivity{

    Toolbar toolbar;

    RecyclerView recyclerView;

    MyAdapter mAdapter;

    int img_ids[]=new int[]{R.drawable.lvfood1,R.drawable.lvfood2,R.drawable.lvfood3,R.drawable.lvfood4,R.drawable.lvfood5,R.drawable.lvfood6,R.drawable.lvfood7,R.drawable.lvfood8,R.drawable.lvfood9,R.drawable.lvfood10};

    String titles[]=new String[]{"麻婆豆腐","灯影牛肉","夫妻肺片","蒜泥白肉","白油豆腐","鱼香肉丝","泉水豆花","宫保鸡丁 ","东坡墨鱼 ","麻辣香锅"};

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_foodcard);

        toolbar= (Toolbar) findViewById(R.id.food_toolbar);

        setSupportActionBar(toolbar);

        setTitle("美食菜单");

        ActionBar actionBar=getSupportActionBar();

        actionBar.setDisplayHomeAsUpEnabled(true);

        recyclerView= (RecyclerView) findViewById(R.id.food_recyclerview);

        recyclerView.setHasFixedSize(true);

        LinearLayoutManager linearLayoutManager=new LinearLayoutManager(FoodCardActivity.this);

        recyclerView.setLayoutManager(linearLayoutManager);

        recyclerView.setItemAnimator(new DefaultItemAnimator());

        mAdapter = new MyAdapter();

        recyclerView.setAdapter(mAdapter);

    }

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

        private final TypedValue mTypedValue = new TypedValue();

        // Provide a reference to the views for each data item

        // Complex data items may need more than one view per item, and

        // you provide access to all the views for a data item in a view holder

        public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

            // each data item is just a string in this case

            public TextView mTextView;

            public ImageView iv_food;

            public TextView textDesc;

            public ViewHolder(View v) {

                super(v);

                mTextView = (TextView) v.findViewById(R.id.tvTitle);

                iv_food= (ImageView) v.findViewById(R.id.iv_food_item);

                textDesc= (TextView) v.findViewById(R.id.tvDesc);

                v.setOnClickListener(this);

            }

            @Override

            public void onClick(View view) {

                String text = "I Love " + mTextView.getText() + ".";

                Snackbar.make(view, text, Snackbar.LENGTH_SHORT).show();

            }

        }

        // Provide a suitable constructor (depends on the kind of dataset)

        @Override

        public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,

                                                       int viewType) {

            // create a new view

            View v = LayoutInflater.from(parent.getContext())

                    .inflate(R.layout.food_item, parent, false);

            // set the view's size, margins, paddings and layout parameters

            ViewHolder vh = new ViewHolder(v);

            return vh;

        }

        // Replace the contents of a view (invoked by the layout manager)

        @Override

        public void onBindViewHolder(ViewHolder holder, int position) {

            // - get element from your dataset at this position

            // - replace the contents of the view with that element

            //holder.mTextView.setText(mDataset[position]);

            holder.mTextView.setText(titles[position]);

            holder.iv_food.setBackgroundResource(img_ids[position]);

            holder.textDesc.setText("很好吃的一道菜 \n东南第一佳味，天下之至美 \n地址：武珞路30号 \n234人吃过 \n价格: 88.00元");

        }

        // Return the size of your dataset (invoked by the layout manager)

        @Override

        public int getItemCount() {

            return 10;

        }

    }

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        switch(item.getItemId())

        {

            case android.R.id.home:

                Intent upIntent = NavUtils.getParentActivityIntent(this);

                if (NavUtils.shouldUpRecreateTask(this, upIntent)) {

                    TaskStackBuilder.create(this)

                            .addNextIntentWithParentStack(upIntent)

                            .startActivities();

                } else {

                    upIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

                    NavUtils.navigateUpTo(this, upIntent);

                }

                return true;

            default:

                return super.onOptionsItemSelected(item);

        }

    }

}

完成

Material Design综合实例的更多相关文章

  1. ANDROID L——Material Design综合应用（Demo）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

  2. [转]ANDROID L——Material Design详解（动画篇）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

  3. ANDROID L——Material Design具体解释（动画篇）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  4. 拟物设计和Angular的实现 - Material Design(持续更新)

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  5. Android学习之基础知识十五 — 最佳UI体验（Material Design实战）

    一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...

  6. 拟物设计和Angular的实现 - Material Design

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  7. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  8. Android Material Design控件学习（一）——TabLayout的用法

    前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...

  9. Android5.0新特性——Material Design简介

    Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...

随机推荐

  1. UVA1262Password(第K字典序）

    题目链接 紫书P323 题意:两个6*5的字母矩阵,两个矩阵每列相同的字母,每列取一个,求按照字典序第k小的序列 分析: 对于第一个样例来说,我们得到{ACDW}.{BOP}.{GMOX}.{AP}. ...

  2. js中网页图片自动更换的效果

    <script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...

  3. Assembly文件被锁定

    使用 Assembly.LoadFile 加载程序集后 ,被加载的文件就会被锁定,之后就不能对其执行转移.删除等操作 为了解决次问题,我们可以先读取成字节流,然后转换成Assembly.代码如下:复制 ...

  4. MIM协议与Base64编码

    MIME Protocol 1. MIME的全称是"Multipurpose Internet Mail Extensions",中译为"多用途互联网邮件扩展" ...

  5. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  6. mapreduce job提交流程源码级分析（一）（原创）

    首先,在自己写的MR程序中通过org.apache.hadoop.mapreduce.Job来创建Job.配置好之后通过waitForCompletion方法来提交Job并打印MR执行过程的log.H ...

  7. Goldbach's Conjecture

     Goldbach's Conjecture Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I ...

  8. UItableView 编辑

    - (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:( ...

  9. [BZOJ2724][Violet 6]蒲公英

    [BZOJ2724][Violet 6]蒲公英 试题描述 输入 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod n + 1 输出 输入示 ...

  10. Coursera台大机器学习技法课程笔记04-Soft-Margin Support Vector Machine

    之前的SVM非常的hard,要求每个点都要被正确的划分,这就有可能overfit,为此引入了Soft SVM,即允许存在被错分的点,将犯的错放在目 标函数中进行优化,非常类似于正则化. 将Soft S ...