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的特点是干 ...

随机推荐

windows上使用image库
首先要安装这个库,可以使用pip安装,那么我们要首先安装pip 去https://bootstrap.pypa.io/get-pip.py下载get-pip.py,然后运行python get-pip ...
hdu 2041 超级楼梯
斐波那契数列,看清题意,当前为第一阶,给出M(每次只能跨1阶或2阶) 从第一阶到M,若M=1,从1-1不用走,0种方法若M=2 从1-2 一种方法 -> 1.走一次一阶若M=3 从1-3 ...
Unity3d三大光照渲染介绍
重要:在目前市面上常见的游戏引擎中,主要采用以下三种灯光实现方式: 顶点照明渲染路径细节 Vertex Lit Rendering Path Details 正向渲染路径细节 Forward Re ...
Go的50度灰：Golang新开发者要注意的陷阱和常见错误
Go的50度灰:Golang新开发者要注意的陷阱和常见错误 http://colobu.com/2015/09/07/gotchas-and-common-mistakes-in-go-golang/
自动切换的JS菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...
html5摇一摇[转]
写在前面年底了,有些公司会出一个摇奖的活动,今天在家没事就搜了一下这方面的资料. 原文地址:http://www.cnblogs.com/waitingbar/p/4682215.html 测试效 ...
ExtJS学习之路第六步：深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
C#常用函数--通用篇
C#常用函数→通用篇转载地址→http://www.cnblogs.com/superfang/archive/2008/07/02/1233706.html以前我都是"原文地址" ...
Antenna Placement（匈牙利算法，最少路径覆盖）
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6991 Accepted: 3466 ...
PPTP服务器配置选项详解
导读 PPTP服务器配置文件的格式与其它许多Unix程序相似,每一行包含一项配置内容,以配置选项名称开始,后面紧跟参数值或者关键字,它们之间用空格分隔.在读取配置文件时,pptpd进程将忽略空行和每一 ...