实现Instagram的Material Design概念设计

jopen 9年前
      <p> 几个月前(这篇文章的日期是2014 年11月10日),google发布了app和web应用的Material Design设计准则之后,设计师Emmanuel Pacamalan在油Tube上发布了一则概念视频,演示了Instagram如果做成Material风格会是什么样子: </p>     <p> <embed type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/XODg2NDQ1NDQ4/v.swf" width="420" height="280" loop="false" allowscriptaccess="never" /> </p>     <p> 这 仅仅是停留在图像上的设计,是美好的愿景,估计很多人都会问,能否使用相对简单的办法将它实现出来呢?答案是:yes,不仅仅能实现,而且无须要求在 Lillipop版本,实际上几年前4.0发布之后我们就可以实现这些效果了。ps 读到这里我们应该反思这几年开发者是不是都吃屎去了。 </p>     <p> 鉴于这个原因,我决定开始撰写一个新的课题-如何将<a href="/misc/goto?guid=4959640014492155256">INSTAGRAM with Material Design</a> 视频中的效果转变成现实。当然,我们并不是真的要做一个Instagram应用,只是将界面做出来而已,并且尽量减少一些不必要的细节。 </p>     <h1> 开始 </h1>     <p> 本文将要实现的是视频中前7秒钟的效果。我觉得对于第一次尝试来说已经足够了。我想要提醒诸位的是,里面的实现方法不仅仅是能实现,也是我个人最喜欢的实现方式。还有,我不是一个美工,因此项目中的所有图片是直接从网上公开的渠道获取的。(主要是从<a href="/misc/goto?guid=4959640014574641486">resources page</a>)。 </p>     <p> 好了,下面是最终效果的两组截图和视频(很短的视频,就是那7秒钟的效果,可以在上面的视频中看到,这里因为没法直接引用油Tube的视频就略了)(分别从Android 4 和5上获得的): </p>     <p> <img src="https://simg.open-open.com/show/126ef0de56bcb76c1556f887ba020d42.png" alt="实现Instagram的Material Design概念设计" title="Android Lollipop screenshot" width="360" height="640" /><img src="https://simg.open-open.com/show/383b03901813900de6676c3d3400f623.png" alt="实现Instagram的Material Design概念设计" title="Android pre-21 screenshot" width="360" height="640" /> </p>     <h1> 准备<br /> </h1>     <p> 在我们的项目中,将使用一些热门的android开发工具和库。并不是所有这些东西本篇文章都会用到,我只是将它们准备好以备不时之需。 </p>     <h2> 初始化项目 </h2>     <p> 首先我们需要创建一个新的android项目。我使用的是Android Studio和gradle的build方式。最低版本的sdk是15(即Android 4.0.4)。然后我们将添加一些依赖。没什么好讲的,下面是build.gradle以及app/build.gradle文件的代码: </p>     <p> build.gradle </p>     <pre class="brush:js;toolbar:false">buildscript {      repositories {          jcenter()      }      dependencies {          classpath 'com.android.tools.build:gradle:0.14.0'          classpath 'com.jakewharton.hugo:hugo-plugin:1.1.+'      }  }     allprojects {      repositories {          jcenter()      }  }</pre>     <p> app/build.gradle </p>     <pre class="brush:js;toolbar:false">apply plugin: 'com.android.application'  apply plugin: 'hugo'     android {      compileSdkVersion 21      buildToolsVersion "21.1"             defaultConfig {          applicationId "io.github.froger.instamaterial"          minSdkVersion 15          targetSdkVersion 21          versionCode 1          versionName "1.0"      }  }     dependencies {      compile fileTree(dir: 'libs', include: ['*.jar'])             compile "com.android.support:appcompat-v7:21.0.0"      compile 'com.android.support:support-v13:21.+'      compile 'com.android.support:support-v4:21.+'      compile 'com.android.support:palette-v7:+'      compile 'com.android.support:recyclerview-v7:+'      compile 'com.android.support:cardview-v7:21.0.+'      compile 'com.jakewharton:butterknife:5.1.2'      compile 'com.jakewharton.timber:timber:2.5.0'      compile 'com.非死book.rebound:rebound:0.3.6'  }</pre>     <p>   </p>     <p> 简而言之,我们有如下工具: </p>     <p> 一些兼容包(CardView, RecyclerView, Palette, AppCompat)-我喜欢使用最新的控件。当然你完全可以使用ListView Actionbar甚至View/FrameView来替代,但是为什么要这么折腾?�� </p>     <p> <a href="/misc/goto?guid=4958873636818564987">ButterKnife</a> - view注入工具简化我们的代码。(比方说不再需要写findViewById()来引用view,以及一些更强大的功能)。 </p>     <p> <a href="/misc/goto?guid=4958822653952750826">Rebound</a> - 我们目前还没有用到,但是我以后肯定会用它。这个非死book开发的动画库可以让你的动画效果看起来更自然。 </p>     <p> <a href="/misc/goto?guid=4958964955571283452">Timber</a> 和 <a href="/misc/goto?guid=4958866344171193400">Hugo</a> - 对这个项目而言并不是必须,我仅仅是用他们打印log。 </p>     <h3> 图片资源 </h3>     <p> 本项目中将使用到一些Material Design的图标资源。App 图标来自于<a href="/misc/goto?guid=4959640014492155256">NSTAGRAM with Material Design</a> 视频,这里<a href="/misc/goto?guid=4959640014791696861">complete bunch of images</a> 是项目的全套资源。 </p>     <h3> 样式 </h3>     <p> 我们从定义app的默认样式开始。同时为Android 4和5定义Material Desing样式的最简单的方式是直接继承Theme.AppCompat.NoActionBar 或者 Theme.AppCompat.Light.NoActionBar主题。为什么是NoActionBar?因为新的sdk中为我们提供了实现Actionbar功能的新模式。本例中我们将使用Toolbar控件,基于这个原因-Toolbar是ActionBar更好更灵活的解决方案。我们不会深入讲解这个问题,但你可以去阅读android开发者博客<a href="/misc/goto?guid=4959640014861660087">AppCompat v21</a>。 </p>     <p> <br /> </p>     <p> 根据概念视频中的效果,我们在AppTheme中定义了三个基本颜色(基色调): </p>     <p> styles.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!-- styles.xml-->  <resources>      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">          <item name="colorPrimary">@color/style_color_primary</item>          <item name="colorPrimaryDark">@color/style_color_primary_dark</item>          <item name="colorAccent">@color/style_color_accent</item>      </style>  </resources></pre>     <p> colors1.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--colors.xml-->  <resources>      <color name="style_color_primary">#2d5d82</color>      <color name="style_color_primary_dark">#21425d</color>      <color name="style_color_accent">#01bcd5</color>  </resources></pre>     <p> 关于这三个颜色的意义,你可以在这里找到<a href="/misc/goto?guid=4959640014949315552">Material Theme Color Palette documentation</a>。 </p>     <h3> 布局 </h3>     <p> 项目目前主要使用了3个主要的布局元素 </p>     <ul>      <li> <p> <strong>Toolbar</strong> - 包含导航图标和applogo的顶部bar </p> </li>      <li> <p> <strong>RecyclerView</strong> - 用于显示feed </p> </li>      <li> <p> <strong>Floating Action Button</strong> - 一个实现了Material Design中<a href="/misc/goto?guid=4959640015023917463">action button pattern</a>的ImageButton。 </p> </li>     </ul>     <p> 在开始实现布局之前,我们先在res/values/dimens.xml文件中定义一些默认值: </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--dimens.xml-->  <resources>      <dimen name="btn_fab_size">56dp</dimen>      <dimen name="btn_fab_margins">16dp</dimen>      <dimen name="default_elevation">8dp</dimen>  </resources></pre>     <p>  这些值的大小是基于Material Design设计准则中的介绍。 </p>     <p> 现在我们来实现MainActivity中的layout: </p>     <p> activity_main.xml </p>     <pre class="brush:js;toolbar:false"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/root"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context=".MainActivity">         <android.support.v7.widget.Toolbar          android:id="@+id/toolbar"          android:layout_width="match_parent"          android:layout_height="?attr/actionBarSize"          android:background="?attr/colorPrimary">                 <ImageView              android:id="@+id/ivLogo"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:layout_gravity="center"              android:scaleType="center"              android:src="@drawable/img_toolbar_logo" />      </android.support.v7.widget.Toolbar>             <android.support.v7.widget.RecyclerView          android:id="@+id/rvFeed"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:layout_below="@id/toolbar"          android:scrollbars="none" />             <ImageButton          android:id="@+id/btnCreate"          android:layout_width="@dimen/btn_fab_size"          android:layout_height="@dimen/btn_fab_size"          android:layout_alignParentBottom="true"          android:layout_alignParentRight="true"          android:layout_marginBottom="@dimen/btn_fab_margins"          android:layout_marginRight="@dimen/btn_fab_margins"          android:background="@drawable/btn_fab_default"          android:elevation="@dimen/default_elevation"          android:src="@drawable/ic_instagram_white"          android:textSize="28sp" />     </RelativeLayout></pre>     <p> 以上代码的解释: </p>     <ul>      <li> <p> 关于Toolbar最重要的特征是他现在是activity layout的一部分,而且继承自ViewGroup,因此我们可以在里面放一些UI元素(它们将利用剩余空间)。本例中,它被用来放置logo图片。同时,因为Toolbar是比Actionbar更灵活的控件,我们可以自定义更多的东西,比如设置背景颜色为colorPrimary(否则Toolbar将是透明的)。 </p> </li>      <li> <p> RecyclerView虽然在xml中用起来非常简单,但是如果java代码中没有设置正确,app是不能启动的,会报java.lang.NullPointerException。 </p> </li>     </ul>     <p> <br /> </p>     <ul>      <li> <p> Elevation(ImageButton中)属性不兼容api21以前的版本。所以如果我们想做到<strong>Floating Action Button</strong>的效果需要在Lollipop和Lollipop之前的设备上使用不同的background。 </p> </li>     </ul>     <h4> Floating Action Button </h4>     <p> 为了简化FAB的使用,我们将用对Lollipop以及Lollipop之前的设备使用不同的样式: </p>     <p> <strong>FAB for Android v21</strong>: </p>     <p>  <img src="https://simg.open-open.com/show/532dc9a9b30e30e519f23d038f9e7cbc.png" alt="实现Instagram的Material Design概念设计" title="FAB Android 21" width="432" height="169" /><strong><br /> </strong><strong><strong>FAB for Android pre-21</strong></strong> </p>     <p> <img src="https://simg.open-open.com/show/3bee3c9cc12567f9095e376c0a69fa8d.png" alt="实现Instagram的Material Design概念设计" title="FAB Android pre-21" width="432" height="169" /> </p>     <p> 我们需要创建两个不同的xml文件来设置button的background:/res/drawable-v21/btn_fab_default.xml(Lollipop设备) ,/res/drawable/btn_fab_default.xml(Lollipop之前的设备): </p>     <p> btn_fab_default2.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--drawable-v21/btn_fab_default.xml-->  <ripple xmlns:android="http://schemas.android.com/apk/res/android"      android:color="@color/fab_color_shadow">      <item>      <shape android:shape="oval">      <solid android:color="@color/style_color_accent" />      </shape>      </item>  </ripple></pre>     <p> btn_fab_default1.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--drawable/btn_fab_default.xml-->  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="false">          <layer-list>              <item android:bottom="0dp" android:left="2dp" android:right="2dp" android:top="2dp">                  <shape android:shape="oval">                      <solid android:color="@color/fab_color_shadow" />                  </shape>              </item>                             <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp">                  <shape android:shape="oval">                      <solid android:color="@color/style_color_accent" />                  </shape>              </item>          </layer-list>      </item>      <item android:state_pressed="true">          <shape android:bottom="2dp" android:left="2dp" android:right="2dp" android:shape="oval" android:top="2dp">          <solid android:color="@color/fab_color_pressed" />          </shape>      </item>  </selector></pre>     <p> 上面的代码涉及到两个颜色的定义,在res/values/colors.xml中添加: </p>     <pre class="brush:js;toolbar:false"><color name="btn_default_light_normal">#00000000</color>  <color name="btn_default_light_pressed">#40ffffff</color></pre>     <p>   </p>     <p> 可以看到在 21之前的设备商制造阴影比较复杂。不幸的是在xml中达到真实的阴影效果没有渐变方法。其他的办法是使用图片的方式,或者通过java代码实现(参见<a href="/misc/goto?guid=4959640015108991688">creating fab shadow</a>)。 </p>     <h4> Toolbar </h4>     <p> 现在我们来完成Toolbar。我们已经有了background和应用的logo,现在还剩下navigation以及menu菜单图标了。关于navigation,非常不幸的是,在xml中app:navigationIcon=""是不起作用的,而android:navigationIcon=""又只能在Lollipop上有用,所以只能使用代码的方式了: </p>     <pre class="brush:js;toolbar:false">toolbar.setNavigationIcon(R.drawable.ic_menu_white);</pre>     <p> 注:app:navigationIcon=""的意思是使用兼容包appcompat的属性,而android:navigationIcon=""是标准的sdk属性。 </p>     <p> 至于menu图标我们使用标准的定义方式就好了: </p>     <p> 在res/menu/menu_main.xml中 </p>     <pre class="brush:js;toolbar:false"><!--menu_main.xml-->  <menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      xmlns:tools="http://schemas.android.com/tools"      tools:context=".MainActivity">          <item              android:id="@+id/action_inbox"              android:icon="@drawable/ic_inbox_white"              android:title="Inbox"              app:showAsAction="always" />  </menu></pre>     <p> 在activity中inflated这个menu: </p>     <pre class="brush:js;toolbar:false">@Override  public boolean onCreateOptionsMenu(Menu menu) {      getMenuInflater().inflate(R.menu.menu_main, menu);      return true;  }</pre>     <p>  本应运行的很好,但是正如我在推ter上提到的,Toolbar onClick  selectors有不协调的情况: </p>     <p> <br /> </p>     <p> 为了解决这个问题,需要做更多的工作,首先为menu item创建一个自定义的view </p>     <p> res/layout/menu_item_view.xml: </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--menu_item_view.xml-->  <ImageButton xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="?attr/actionBarSize"      android:layout_height="?attr/actionBarSize"      android:background="@drawable/btn_default_light"      android:src="@drawable/ic_inbox_white" /></pre>     <p>   </p>     <p> 然后为Lollipop和Lollipop之前的设备分别创建onClick的selector,在Lollipop上有ripple效果: </p>     <p> btn_default_light2.xml             </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--drawable-v21/btn_default_light.xml-->  <ripple xmlns:android="http://schemas.android.com/apk/res/android"      android:color="@color/btn_default_light_pressed" /></pre>     <p> btn_default_light1.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--drawable/btn_default_light.xml-->  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:drawable="@color/btn_default_light_normal" android:state_focused="false" android:state_pressed="false" />      <item android:drawable="@color/btn_default_light_pressed" android:state_pressed="true" />      <item android:drawable="@color/btn_default_light_pressed" android:state_focused="true" />  </selector></pre>     <p> 现在,工程中的所有的color应该是这样子了: </p>     <p> colors.xml             </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?>  <!--colors.xml-->  <resources>  <color name="style_color_primary">#2d5d82</color>  <color name="style_color_primary_dark">#21425d</color>  <color name="style_color_accent">#01bcd5</color>     <color name="fab_color_pressed">#007787</color>  <color name="fab_color_shadow">#44000000</color>     <color name="btn_default_light_normal">#00000000</color>  <color name="btn_default_light_pressed">#40ffffff</color>  </resources></pre>     <p>  最后我们应该将custom view放到menu item中,在onCreateOptionsMenu()中: </p>     <pre class="brush:js;toolbar:false">@Override  public boolean onCreateOptionsMenu(Menu menu) {      getMenuInflater().inflate(R.menu.menu_main, menu);      inboxMenuItem = menu.findItem(R.id.action_inbox);      inboxMenuItem.setActionView(R.layout.menu_item_view);      return true;  }</pre>     <p>  以上就是toolbar的所有东西。并且onClick的按下效果也达到了预期的效果: </p>     <p> <img src="https://simg.open-open.com/show/c3994fe21747bbac9e2a6c1b7440b25f.png" alt="实现Instagram的Material Design概念设计" title="Toolbar menu item onClick" width="360" height="92" /> </p>     <h4> Feed </h4>     <p> Last thing we should implement is feed, built onRecyclerView. Right now we have to setup two things: layout manager (RecyclerView has to know how to arrange items) and adapter (to provide items). </p>     <p> First thing is straightforward - while our layout is simple ListView we can useLinearLayoutManagerfor items arragement. For the second one we have to do more work, buth there is no magic to deal with. </p>     <p> Let’s start from defining list item layout (res/layout/item_feed.xml): </p>     <p> 最后需要实现的是feed,基于RecyclerView实现。我们需要设置两个东西:layout manager和adapter,因为这里其实就是想实现ListView的效果,所以直接用LinearLayoutManager就行了,而adapter我们首先从item的布局开始(res/layout/item_feed.xml): </p>     <p> item_feed.xml </p>     <pre class="brush:js;toolbar:false"><?xml version="1.0" encoding="utf-8"?><!-- item_feed.xml -->  <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:card_view="http://schemas.android.com/apk/res-auto"      android:id="@+id/card_view"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:layout_gravity="center"      android:layout_margin="8dp"      card_view:cardCornerRadius="4dp">         <LinearLayout          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:orientation="vertical">                 <ImageView              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:src="@drawable/ic_feed_top" />                     <io.github.froger.instamaterial.SquaredImageView              android:id="@+id/ivFeedCenter"              android:layout_width="match_parent"              android:layout_height="wrap_content" />                     <ImageView              android:id="@+id/ivFeedBottom"              android:layout_width="match_parent"              android:layout_height="wrap_content" />             </LinearLayout>  </android.support.v7.widget.CardView></pre>     <p> FeedAdapter也非常简单: </p>     <p> FeedAdapter.java </p>     <pre class="brush:js;toolbar:false">public class FeedAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {      private static final int ANIMATED_ITEMS_COUNT = 2;             private Context context;      private int lastAnimatedPosition = -1;      private int itemsCount = 0;             public FeedAdapter(Context context) {          this.context = context;      }             @Override      public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {          final View view = LayoutInflater.from(context).inflate(R.layout.item_feed, parent, false);          return new CellFeedViewHolder(view);      }             private void runEnterAnimation(View view, int position) {          if (position >= ANIMATED_ITEMS_COUNT - 1) {              return;          }                     if (position > lastAnimatedPosition) {              lastAnimatedPosition = position;              view.setTranslationY(Utils.getScreenHeight(context));              view.animate()              .translationY(0)              .setInterpolator(new DecelerateInterpolator(3.f))              .setDuration(700)              .start();          }      }             @Override      public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {          runEnterAnimation(viewHolder.itemView, position);          CellFeedViewHolder holder = (CellFeedViewHolder) viewHolder;          if (position % 2 == 0) {              holder.ivFeedCenter.setImageResource(R.drawable.img_feed_center_1);              holder.ivFeedBottom.setImageResource(R.drawable.img_feed_bottom_1);          } else {              holder.ivFeedCenter.setImageResource(R.drawable.img_feed_center_2);              holder.ivFeedBottom.setImageResource(R.drawable.img_feed_bottom_2);          }      }             @Override      public int getItemCount() {          return itemsCount;      }             public static class CellFeedViewHolder extends RecyclerView.ViewHolder {          @InjectView(R.id.ivFeedCenter)          SquaredImageView ivFeedCenter;          @InjectView(R.id.ivFeedBottom)          ImageView ivFeedBottom;                     public CellFeedViewHolder(View view) {          super(view);              ButterKnife.inject(this, view);          }      }             public void updateItems() {          itemsCount = 10;          notifyDataSetChanged();      }  }</pre>     <p> 没什么特别之处需要说明。 </p>     <p> 通过以下方法将他们放在一起: </p>     <pre class="brush:js;toolbar:false">private void setupFeed() {      LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);      rvFeed.setLayoutManager(linearLayoutManager);      feedAdapter = new FeedAdapter(this);      rvFeed.setAdapter(feedAdapter);  }</pre>     <p> 下面是整个MainActivity class的源码: </p>     <pre class="brush:js;toolbar:false">//MainActivity.java  public class MainActivity extends ActionBarActivity {      @InjectView(R.id.toolbar)      Toolbar toolbar;      @InjectView(R.id.rvFeed)      RecyclerView rvFeed;             private MenuItem inboxMenuItem;      private FeedAdapter feedAdapter;             @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.inject(this);                     setupToolbar();          setupFeed();      }             private void setupToolbar() {          setSupportActionBar(toolbar);          toolbar.setNavigationIcon(R.drawable.ic_menu_white);      }             private void setupFeed() {          LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);          rvFeed.setLayoutManager(linearLayoutManager);          feedAdapter = new FeedAdapter(this);          rvFeed.setAdapter(feedAdapter);      }             @Override      public boolean onCreateOptionsMenu(Menu menu) {          getMenuInflater().inflate(R.menu.menu_main, menu);          inboxMenuItem = menu.findItem(R.id.action_inbox);          inboxMenuItem.setActionView(R.layout.menu_item_view);          return true;      }  }</pre>     <p> 运行结果: </p>     <p> <strong>Android Lollipop</strong> </p>     <p> <img src="https://simg.open-open.com/show/126ef0de56bcb76c1556f887ba020d42.png" alt="实现Instagram的Material Design概念设计" title="Android Lollipop screenshot" width="360" height="640" /> </p>     <p> <strong>Android pre-21</strong> </p>     <p> <img src="https://simg.open-open.com/show/383b03901813900de6676c3d3400f623.png" alt="实现Instagram的Material Design概念设计" title="Android pre-21 screenshot" width="360" height="640" /> </p>     <h3> 动画 </h3>     <p> 最后一件也是最重要的事情就是进入时的动画效果,再浏览一遍概念视频,可以发现在main Activity启动的时候有如下动画,分成两步: </p>     <p> <br /> 显示Toolbar以及其里面的元素 </p>     <p> 在Toolbar动画完成之后显示feed和floating action button。 </p>     <p> Toolbar中元素的动画表现为在较短的时间内一个接一个的进入。实现这个效果的主要问题在于navigation icon的动画,navigation icon是唯一一个不能使用动画的,其他的都好办。 </p>     <h4> Toolbar animation </h4>     <p> 首先我们只是需要在activity启动的时候才播放动画(在旋转屏幕的时候不播放),还要知道menu的动画过程是不能在onCreate()中去实现的(我们在onCreateOptionsMenu()中实现),创建一个布尔类型的变量pendingIntroAnimation,在onCreate()方法中初始化: </p>     <pre class="brush:js;toolbar:false">//...  if (savedInstanceState == null) {      pendingIntroAnimation = true;  }</pre>     <p> onCreateOptionsMenu(): </p>     <pre class="brush:js;toolbar:false">@Override  public boolean onCreateOptionsMenu(Menu menu) {      getMenuInflater().inflate(R.menu.menu_main, menu);      inboxMenuItem = menu.findItem(R.id.action_inbox);      inboxMenuItem.setActionView(R.layout.menu_item_view);      if (pendingIntroAnimation) {          pendingIntroAnimation = false;          startIntroAnimation();      }      return true;  }</pre>     <p> 这样startIntroAnimation()将只被调用一次。 </p>     <p> 现在该来准备Toolbar中元素的动画了,也非常简单 </p>     <p> ToolbarAnimation </p>     <pre class="brush:js;toolbar:false">//...  private static final int ANIM_DURATION_TOOLBAR = 300;     private void startIntroAnimation() {      btnCreate.setTranslationY(2 * getResources().getDimensionPixelOffset(R.dimen.btn_fab_size));      int actionbarSize = Utils.dpToPx(56);      toolbar.setTranslationY(-actionbarSize);      ivLogo.setTranslationY(-actionbarSize);      inboxMenuItem.getActionView().setTranslationY(-actionbarSize);             toolbar.animate()          .translationY(0)          .setDuration(ANIM_DURATION_TOOLBAR)          .setStartDelay(300);      ivLogo.animate()          .translationY(0)          .setDuration(ANIM_DURATION_TOOLBAR)          .setStartDelay(400);      inboxMenuItem.getActionView().animate()          .translationY(0)          .setDuration(ANIM_DURATION_TOOLBAR)          .setStartDelay(500)          .setListener(new AnimatorListenerAdapter() {              @Override              public void onAnimationEnd(Animator animation) {              startContentAnimation();              }          })          .start();  }  //...</pre>     <p> 在上面的代码中: </p>     <ul>      <li> <p> 首先我们将所有的元素都通过移动到屏幕之外隐藏起来(这一步我们将FAB也隐藏了)。 </p> </li>      <li> <p> 让Toolbar元素一个接一个的开始动画 </p> </li>      <li> <p> 当动画完成,调用了startContentAnimation()开始content的动画(FAB和feed卡片的动画) </p> </li>     </ul>     <p>  简单,是吧? </p>     <h4> Content 动画 </h4>     <p> 在这一步中我们将让FAB和feed卡片动起来。FAB的动画很简单,跟上面的方法类似,但是feed卡片稍微复杂些。 </p>     <p> startContentAnimation方法 </p>     <pre class="brush:js;toolbar:false">//...  //FAB animation  private static final int ANIM_DURATION_FAB = 400;     private void startContentAnimation() {      btnCreate.animate()          .translationY(0)          .setInterpolator(new OvershootInterpolator(1.f))          .setStartDelay(300)          .setDuration(ANIM_DURATION_FAB)          .start();      feedAdapter.updateItems();  }  //...</pre>     <p> FeedAdapter的代码在上面已经贴出来了。结合着就知道动画是如何实现的了。 </p>     <p> <br /> </p>     <p> 本篇文章就结束了,避免遗漏,这里是这篇文章是提交的代码<a href="/misc/goto?guid=4959640015178553338">commit for our project with implemented animations</a>. </p>     <p>   </p>     <h2> 源代码 </h2>     <p> 完整的代码在Github <a href="/misc/goto?guid=4959624996352212247">repository</a>. </p>     <p> 作者: Miroslaw Stanek </p>     <p> <br /> </p>     <p> 英文原文:<a target="_self" href="/misc/goto?guid=4959640015289385019">Instagram with Material Design concept is getting real</a>  </p>     <p> 转载请注明出处:<a href="/misc/goto?guid=4959640015377998182">http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0204/2415.html</a>  </p>