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

随机推荐

Logistic Regression and Gradient Descent
Logistic Regression and Gradient Descent Logistic regression is an excellent tool to know for classi ...
php多态设计
原文:http://www.cnblogs.com/tecs27/archive/2012/03/13/2394028.html 多态性是指相同的操作或函数.过程可作用于多种类型的对象上并获得不同的结 ...
centos7 nginx用systemctl方式管理的脚本
vim /usr/lib/systemd/system/nginx.service [Unit] Description=nginx - high performance web server Doc ...
IIS负载均衡-Application Request Route详解第二篇：创建与配置Server Farm（转载）
IIS负载均衡-Application Request Route详解第二篇:创建与配置Server Farm 自从本系列发布之后,收到了很多的朋友的回复!非常感谢,同时很多朋友问到了一些问题,有些问 ...
linux利用grep查看打印匹配的下几行或前后几行的命令
转自:http://www.itokit.com/2013/0308/74883.html linux系统中,利用grep打印匹配的上下几行如果在只是想匹配模式的上下几行,grep可以实现. ...
linux远程连接客户端总结
序:刚从阿里ECS买了一个ubuntu14.04_64_20G,但是没有提供页面登陆工具,因此从网上找了几个远程连接工具,特写在这里算是总结. 1 secureCRT SecureCRT是一款支持SS ...
IOC和AOP的基础原理
IoC(Inversion of Control)就是由容器控制程序之间的关系,而非传统实现中,由程序代码直接操控.这也就是所谓“控制反转”的概念所在.控制权由应用代码中转到了外部容器,控制权的转移是 ...
淘宝(阿里百川)手机客户端开发日记第四篇自定义ListView详解
我们知道,如果采用官方的ListView,实现的功能在很多时候,并不能满足自己的业务需求,比如在设计到复杂的列表的时候,这一节,我们就开始动手自己实现自定义的ListView. 在上一节中,我们采用了 ...
L4 如何在XCode中下进行工作
原地址:http://www.howzhi.com/course/286/lesson/2107 管理您的工作流程在Xcode 正如你在本教程中看到了你的第一个iOS应用,你在Xcode工作区窗口 ...
pure MVC框架目标与好处
框架一瞥 PureMVC是一个为创建基于经典MVC元设计模式应用的轻量级框架. 此框架是开源且免费的,已经被AS2,AS3,Java,C#以及其他流行语言所实现.这也允许在多样的平台上开发,包括: l ...