背景知識(shí)

drawlayout的使用

recycleView的使用

CardView的使用

一些開源動(dòng)畫庫的使用

ImageView的scaleType屬性與adjustViewBounds屬性 ，參考鏈接：

ImageView的android:adjustViewBounds屬性 - - ITeye技術(shù)網(wǎng)站
Android ImageView的scaleType屬性與adjustViewBounds屬性 - Android移動(dòng)開發(fā)技術(shù)文章_手機(jī)開發(fā) - 紅黑聯(lián)盟

效果如下

程序開始動(dòng)畫實(shí)現(xiàn)

第一步：使用開源庫

gzu-liyujiang/ViewAnimator: A fluent Android animation library。安卓動(dòng)畫庫

在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(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);}};@Overrideprotected 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() {@Overridepublic void run() {// TODO Auto-generated method stub//進(jìn)入主頁面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>() {@Overridepublic 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() {@Overridepublic void onStop() {Intent intent = new Intent(StartActivity.this, MainActivity.class);startActivity(intent);}}).duration(1000).start();}}

主界面效果實(shí)現(xiàn)

使用開源庫

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/" } }

實(shí)現(xiàn)

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(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar= (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);setTitle("天天美食");//設(shè)置DrawerLayoutmDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,R.string.drawer_open, R.string.drawer_close){//關(guān)閉側(cè)邊欄時(shí)響應(yīng)@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);}//打開側(cè)邊欄時(shí)響應(yīng)@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);}};mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);//設(shè)置NavigationView點(diǎn)擊事件mNavigationView = (NavigationView) findViewById(R.id.navigation_view);setupDrawerContent(mNavigationView);//設(shè)置NavigationView點(diǎn)擊事件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() {@Overridepublic void run() {// TODO Auto-generated method stub//進(jìn)入主頁面recyclerView.setAdapter(slideInBottomAnimatorAdapter);}}, 1000);//recyclerView.setAdapter(mAdapter);}private void setupDrawerContent(NavigationView mNavigationView) {}class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder>{@Overridepublic HomeAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {MyViewHolder holder=new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item_main,parent,false));return holder;}@Overridepublic void onBindViewHolder(HomeAdapter.MyViewHolder holder, int position) {holder.iv.setBackgroundResource(ids[position]);}@Overridepublic 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);}@Overridepublic void onClick(View view) {Intent intent=new Intent(MainActivity.this,FoodCardActivity.class);startActivity(intent);}}} }

食物列表界面

注意，筆者在這里碰到了很大的坑

老是報(bào)空指針異常，后來發(fā)現(xiàn)問題出在設(shè)置TextView時(shí)，setTextView時(shí)總是出錯(cuò)，搞了很久都不明白，后來才發(fā)現(xiàn)是在 public ViewHolder(View v) 方法中，綁定View與ViewHolder時(shí)，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代碼實(shí)現(xiàn)

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[]{"麻婆豆腐","燈影牛肉","夫妻肺片","蒜泥白肉","白油豆腐","魚香肉絲","泉水豆花","宮保雞丁 ","東坡墨魚 ","麻辣香鍋"};@Overrideprotected 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 holderpublic class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {// each data item is just a string in this casepublic 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);}@Overridepublic 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)@Overridepublic MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {// create a new viewView v = LayoutInflater.from(parent.getContext()).inflate(R.layout.food_item, parent, false);// set the view's size, margins, paddings and layout parametersViewHolder vh = new ViewHolder(v);return vh;}// Replace the contents of a view (invoked by the layout manager)@Overridepublic 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號(hào) \n234人吃過 \n價(jià)格: 88.00元");}// Return the size of your dataset (invoked by the layout manager)@Overridepublic int getItemCount() {return 10;}}@Overridepublic 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);}} }

完成

總結(jié)

以上是生活随笔為你收集整理的Material Design综合实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。