關於material-menu

（轉）http://www.jcodecraeer.com/a/opensource/2014/1202/2093.html

介绍：

Android L drawer指示图标的动画效果，该库提供了两种对MaterialMenuDrawable封装，可以方便的应用到actionbar、NavigationDrawer 以及任意的自定义layout中。

运行效果：

使用说明：

MaterialMenuView

绘制icon的view，提供了一些改变其状态的方法，同时还可以通过下列属性自定义：

1 2 3 4 5 6

app:mm_color= "color"               // Color of drawable app:mm_transformDuration= "integer" // Transformation animation duration app:mm_pressedDuration= "integer"   // Pressed circle animation duration app:mm_scale= "integer"             // Scale factor of drawable app:mm_strokeWidth= "integer"       // Stroke width of icons (can only be 1, 2 or 3) app:mm_rtlEnabled= "boolean"        // Enabled RTL layout support (flips all drawables)

MaterialMenuIcon

取代ActionBar icon的控件

api

MaterialMenu共有四种状态

BURGER, ARROW, X, CHECK

改变drawable state 带有动画并且有圆形按下的效果：

1	MaterialMenu.animatePressedState(IconState state)

改变drawable state 带有动画，但没有圆形按下效果

1	MaterialMenu.animateState(IconState state)

不带任何效果：

1	MaterialMenu.setState(IconState state)

主动触发动画效果：

1	MaterialMenu.setTransformationOffset(AnimationState state, float value)

其中AnimationState可以为BURGER_ARROW, BURGER_X, ARROW_X, ARROW_CHECK, BURGER_CHECK, X_CHECK ，value在0到2之间。




自定义

1 2 3 4 5 6 7 8 9 10

// change color MaterialMenu.setColor(int color) // change transformation animation duration MaterialMenu.setTransformationDuration(int duration) // change pressed animation duration MaterialMenu.setPressedDuration(int duration) // change transformation interpolator MaterialMenu.setInterpolator(Interpolator interpolator) // set RTL layout support MaterialMenu.setRTLEnabled(boolean enabled)

actionbar中的运用

取决于你用的是何种actionbar，不同的actionbar使用不同的MaterialMenuIcon，分别是： MaterialMenuIcon, MaterialMenuIconCompat 和MaterialMenuIconSherlock

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      materialMenu = new MaterialMenuIcon( this , Color.WHITE, Stroke.THIN); } protected void onPostCreate(Bundle savedInstanceState) {      super .onPostCreate(savedInstanceState);      materialMenu.syncState(savedInstanceState); } protected void onSaveInstanceState(Bundle outState) {      super .onSaveInstanceState(outState);      materialMenu.onSaveInstanceState(outState); } public boolean onOptionsItemSelected(MenuItem item) {      if (item.getId() == android.R.id.home) {          // Handle your drawable state here          materialMenu.animatePressedState(newState);      } }

在ToolBar中

完全把它当作一个标准的drawable来用，不过你需要自己处理icon state

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

private MaterialMenuDrawable materialMenu; protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      setContentView(R.layout.toolbar);      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);      setSupportActionBar(toolbar);      toolbar.setNavigationOnClickListener( new View.OnClickListener() {          @Override public void onClick(View v) {          // Handle your drawable state here          materialMenu.animatePressedState(newState);          }      });      materialMenu = new MaterialMenuDrawable( this , Color.WHITE, Stroke.THIN);      toolbar.setNavigationIcon(materialMenu);      materialMenu.setNeverDrawTouch( true ); }

或者MaterialMenuIconToolbar

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

private MaterialMenuIconToolbar materialMenu; @Override protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      setContentView(R.layout.toolbar);      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);      setSupportActionBar(toolbar);      toolbar.setNavigationOnClickListener( new View.OnClickListener() {          @Override public void onClick(View v) {          // Handle your drawable state here          materialMenu.animatePressedState(newState);          }      });      materialMenu = new MaterialMenuIconToolbar( this , Color.WHITE, Stroke.THIN) {          @Override public int getToolbarViewId() {              return R.id.toolbar;          }      };      materialMenu.setNeverDrawTouch( true ); } @Override protected void onPostCreate(Bundle savedInstanceState) {      super .onPostCreate(savedInstanceState);      materialMenu.syncState(savedInstanceState); } @Override protected void onSaveInstanceState(Bundle outState) {      materialMenu.onSaveInstanceState(outState);      super .onSaveInstanceState(outState); }

在自定义的布局中

直接将MaterialMenuView添加到布局中，注册一个OnClickListener处理icon的变换。

详细使用请查看 source of Demo  

与NavigationDrawer 的交互

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

private DrawerLayout drawerLayout; private boolean      isDrawerOpened; private MaterialMenuIcon materialMenu; @Override protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      materialMenu = new MaterialMenuIcon( this , Color.WHITE, Stroke.THIN); // or retrieve from your custom view, etc      drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);      drawerLayout.setDrawerListener( new DrawerLayout.SimpleDrawerListener() {          @Override          public void onDrawerSlide(View drawerView, float slideOffset) {              materialMenu.setTransformationOffset(                  MaterialMenuDrawable.AnimationState.BURGER_ARROW,                  isDrawerOpened ? 2 - slideOffset : slideOffset              );          }          @Override          public void onDrawerOpened(View drawerView) {              isDrawerOpened = true ;          }          @Override          public void onDrawerClosed(View drawerView) {              isDrawerOpened = false ;          }          @Override          public void onDrawerStateChanged(int newState) {              if (newState == DrawerLayout.STATE_IDLE) {                  if (isDrawerOpened) menu.setState(MaterialMenuDrawable.IconState.ARROW)                  else menu.setState(MaterialMenuDrawable.IconState.BURGER)              }          }      }); } @Override protected void onPostCreate(Bundle savedInstanceState) {      super .onPostCreate(savedInstanceState);      isDrawerOpened = drawerLayout.isDrawerOpen(Gravity.START); // or END, LEFT, RIGHT      materialMenu.syncState(savedInstanceState); } @Override protected void onSaveInstanceState(Bundle outState) {      super .onSaveInstanceState(outState);      materialMenu.onSaveInstanceState(outState); }

Circle pressed state

为了让本库的圆形按下效果起作用，你必须先屏蔽了actionbar本身的背景：

1 2 3 4 5 6 7 8 9 10 11

<style name= "AppTheme" parent= "android:Theme.Holo.Light.DarkActionBar" >      <item name= "android:actionBarItemBackground" >@ null </item>      <item name= "android:actionButtonStyle" >@style/ActionButtonStyle</item>      <item name= "android:actionOverflowButtonStyle" >@style/OverflowButtonStyle</item> </style> <style name= "ActionButtonStyle" parent= "android:Widget.Holo.ActionButton" >      <item name= "android:background" >@drawable/action_bar_item_background</item> </style> <style name= "OverflowButtonStyle" parent= "android:Widget.Holo.ActionButton.Overflow" >      <item name= "android:background" >@drawable/action_bar_item_background</item> </style>