Material Design综合实例

背景知识

drawlayout的使用
recycleView的使用
CardView的使用
一些开源动画库的使用

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综合实例的更多相关文章

ANDROID L——Material Design综合应用（Demo）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...
[转]ANDROID L——Material Design详解（动画篇）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
ANDROID L——Material Design具体解释（动画篇）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
拟物设计和Angular的实现 - Material Design(持续更新)
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
Android学习之基础知识十五 — 最佳UI体验（Material Design实战）
一.前言长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...
拟物设计和Angular的实现 - Material Design
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
Android Material Design控件学习（一）——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
Android5.0新特性——Material Design简介
Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...

随机推荐

Scrapy中的item是什么
这两天看Scrapy,看到item这个东西,觉得有点抽象,查了一下,有点明白了. Item 是保存爬取到的数据的容器:其使用方法和python字典类似, 并且提供了额外保护机制来避免拼写错误导致的未定 ...
<jsp:invoke fragment=""/>的理解和使用
在传统 JSP 中,想要实现页面布局管理比较麻烦,为了解决在 JSP 中布局的问题,出现了很多开源软件,比如 Apache Tiles 和 SiteMesh 就是其中比较优秀的.但是使用开源软件实现布 ...
LocalDB简介和在VS2012及以上版本的使用
http://www.cnblogs.com/fzrain/p/3812364.html?utm_source=tuicool LocalDB简介和在VS2012及以上版本的使用之前一不小心把自 ...
NSThread - (void)start vs java Thread implements Runnable
This method spawns the new thread and invokes the receiver’s main method on the new thread. If you i ...
Stream Byte[] 转换
public byte[] StreamToBytes(Stream stream) { byte[] bytes = new byte[stream.Length]; stream.Read(byt ...
Why The Golden Age Of Machine Learning is Just Beginning
Why The Golden Age Of Machine Learning is Just Beginning Even though the buzz around neural networks ...
js正则表达式中的问号几种用法小结
这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式,感兴趣的朋友可以参考下在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪 ...
反射型xss绕过IE xss filter
反射xss利用方法,绕过IE XSS Filter 假设 1.php页面代码如下: echo $_GET['str']; 使用IE浏览器访问该页面 1.php?str=<xss code> ...
C语言绘制余弦函数图象
#include"stdio.h" #include"math.h" void main() { double y; int x,m; for(y=1;y> ...
删除（注意，删除后，后面顶上去，所以id会一直变，所以我们用class来定义，因为id是唯一的）
删除de $(".delete").on("click",function(){ var id = $(this).attr("value" ...