Android MaterialDesign

一、CardView


  • 误区:设置背景颜色,没有圆角
android:background="@color/colorPaiGowYellow"
mCardView.setBackgroundColor="getResources().getColor(R.color.colorPaiGowYellow)";
  • 解决:设置控件背景
app:cardBackgroundColor="@color/colorPaiGowYellow"
mCardView.setCardBackgroundColor(getResources().getColor(R.color.colorPaiGowYellow));

二、FloatingActionButton

 
    
    80dp
    
    60dp
  • 具有立体感,和普通按钮功能一样

三、CircleImageView


  • 圆形图片,常用于显示头像

四、DrawerLayout 、NavigationView


    
    
    
    

  • 允许加入两个子控件,分别是侧滑菜单和主布局
  • NavigationView:常用于侧滑菜单的根布局
  • 提供更好的侧滑菜单展示效果(nineoldandroids-2.4.0.jar)
drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {//监听菜单滑动时的动画效果
                View mContent = drawerLayout.getChildAt(0);
                View mMenu = drawerView;
                float scale = 1 - slideOffset;
                float rightScale = 0.8f + scale * 0.2f;

                //Tag,用于给相关联的view添加额外的信息
                if (drawerView.getTag().equals("START"))
                { //左侧滑栏
                    float leftScale = 1 - 0.3f * scale;

                    ViewHelper.setScaleX(mMenu, leftScale);
                    ViewHelper.setScaleY(mMenu, leftScale);
                    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
                    ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale));
                    ViewHelper.setPivotX(mContent, 0);
                    ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                } else { //右侧滑栏
                    ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset);
                    ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
                    ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                }
            }

五、SwipeRefreshLayout



  • 下拉刷新,常作为View的根布局,刷新子View的内容
  • 第三方依赖,支持下拉刷新和上拉加载
 

        

    

六、CoordinatorLayout 、AppBarLayout 、NestedScrollView 、CollapsingToolbarLayout、Toolbar

CoordinatorLayout是增强版FrameLayout,AppBarLayout是增强版LinearLayout,NestedScrollView是增强版ScrollView,Toolbar是增强版ActionBar,CollapsingToolbarLayout是一个支持折叠并且带有优美的动画渐变效果的Layout 。

Toolbar一般作为CollapsingToolbarLayout的直接子布局,CollapsingToolbarLayout一般作为AppBarLayout的直接子布局,AppBarLayout一般作为CoordinatorLayout的直接子布局

CoordinatorLayout的子布局实现属性app:layout_behavior="@string/appbar_scrolling_view_behavior",将滑动事件通知AppBarLayout,使AppBarLayout作出相应的动作。

AppBarLayout的子布局实现属性app:layout_scrollFlags,其中scroll表示AppBarLayout的ChildView 跟随滑动事件滑进或滑出屏幕 , 滑动的前提是当前的ChildView 前的ChildView也设置了scroll 属性,enterAlways 表示快速返回模式,则ChildView的滑动优先级大于AppBarLayout外的View,enterAlwaysCollapsed作为enterAlways的附加属性,需要结合android:minHeight和enterAlways 一起使用,表示 ChildView先滑动minHeight的距离,然后让AppBarLayout外的View完成滑动,再滑动ChildView剩下的距离,exitUntilCollapsed 设置了该属性的ChildView滑出屏幕后,如果其后面的ChildView没设置该属性,则不能滑出屏幕,snap是ChildView滑动的一个吸附效果,不会存在局部滑动的情况,在屏幕中整个显示或者整个隐藏 。

CollapsingToolbarLayout的子布局实现属性app:layout_collapseMode,其中off是默认属性,表示没有折叠的行为,pin表示CollapsingToolbarLayout折叠后,设置该属性的ChildView将固定在顶部,parallax表示CollapsingToolbarLayout折叠时,此布局会有视差折叠效果,CollapsingToolbarLayout自己实现属性app:contentScrim="?attr/colorPrimary",表示趋于折叠状态以及折叠后的背景颜色 。

   
  
    
        
            
            
        
    
    
        
            
            
            
        
    

七、Snackbar

可与用户实现交互,可比作增强版的Toast

Snackbar.make(v,"Data delete",Snackbar.LENGTH_INDEFINITE)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                            }
                        }).show();

八、TextInputLayout

包裹EditText,展示更丰富的提示效果



            
        

九、BottomNavigationView

     取消导航栏的点击效果
        app:itemIconTint="@color/colorPrimary" 
        app:itemTextColor="@color/colorPrimary" 
        app:menu="@menu/navigation" />

底部Item菜单



    
    
    

当菜单数目大于三时,会有位移动画,可以通过反射取消该动画

    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
          } catch (Exception e) {
        } 
    }

取消导航栏的每项点击文字和图片放大的效果

    10dp
    10dp

十、启动页优化

public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
        
            
                
                
            
        
    



    

    
        
    


十一、相关依赖

  • compile 'com.android.support:design:25.0.1'
  • compile 'de.hdodenhof:circleimageview:2.1.0'
  • compile 'com.android.support:cardview-v7:25.0.1'
  • compile 'com.liaoinstan.springview:library:1.2.6'

你可能感兴趣的:(Android MaterialDesign)