美文网首页
Material Desgin学习

Material Desgin学习

作者: lwwlsky | 来源:发表于2016-06-02 11:45 被阅读119次

    移步

    Activity 和 Fragment 切换
    通过声明两屏之间通用的共享元素,你可以在两种状态间创建流畅的切换。
    一图胜千言:

    album_grid.xml

    <ImageView

    android:transitionName="@string/transition_album_cover" />
    album_details.xml

    <ImageView

    android:transitionName="@string/transition_album_cover" />

    AlbumActivity.java
    Intent intent = new Intent();
    String transitionName = getString(R.string.transition_album_cover);

    ActivityOptionsCompat options =
    ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView, // The view which starts the transition
    transitionName // The transitionName of the view we’re transitioning to
    );
    ActivityCompat.startActivity(activity, intent, options.toBundle());

    1.目标启动包含共同元素的Activity 2.准备要启动的Activity的那个View3.共同元素transitionName

    我们在两屏之间定义了相同的transitionName。当打开新的Activity的时候,切换过程就自动开始了。
    除了共享元素之外,你也可以定义进入和退出元素。

    CoordinatorLayout
    coordinatorLayout是为了让子View协调工作的布局

    CoordinatorLayout
    组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果。
    AppBarLayout
    可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件
    CollapsingToolbarLayout
    可以控制包含在CollapsingToolbarLayout其中的控件,在响应collapse时是移除屏幕和固定在最上面
    TabLayout
    结合ViewPager,实现多个TAB的切换的功能
    NestedScrollView
    与ScrollView基本相同,不过包含在NestedScrollView中的控件移动时才能时AppBarLayout缩放

    <android.support.v7.widget.CardView>包含其他布局就能实现卡片效果
    app:cardBackgroundColor 设置CardView背景颜色
    app:cardCornerRadius 设置CardView圆角大小
    app:cardElevation 设置CardView阴影高度

    ToolBar 不是Android Design Support Library的一部分而是在这个库中需要与其他组件一起使用,隐藏 Action Bar 并且切换到 Toolbar,因为这些有奇妙功能的新库,包括 Design Support Library 的组件中,都被设计为和 Toolbar 协同工作
    1.<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    </style>
    2.放在 CoordinatorLayout 的东西必须被设计和实现成与它一起合作的,否则将不与任何其他兄弟 views(sibling views) 协作,提供一个组件让CoordinatorLayout与toolbar一起工作
    只是简单的用AppBarLayout包裹 Toolbar

    3.Material Design 中ToolBar
    app:popupTheme,这个属性就是用来自定义我们弹出的菜单的样式,
    app:popupTheme="ThemeOverlay.AppCompat.Light",那么这个Overflow弹出的是白底黑字
    app:popupTheme="@style/AppTheme.PopupOverlay" 黑底白字
    app:layout_scrollFlags=”scroll|enterAlways” 一旦向上滚动toolbar就可见
    Scroll 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏.
    ,enterAlwaysCollapsed 再定义android:minHeight="100dp" 最小高度何时进入
    exitUntilCollapsed 再定义android:minHeight="100dp" 最小高度titleview何时进入

    实现视差效果,在用户滚动的时候title的高度也会随着改变。
    <android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginStart="48dp"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

          <android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
          <ImageView
              android:src="@drawable/cheese_1"
              app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:scaleType="centerCrop"
              app:layout_collapseMode="parallax"    我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。
              android:minHeight="100dp"/>
    
      </android.support.design.widget.CollapsingToolbarLayout>
    
      在可以滚动的View上设置属性 app:layout_behavior.
    

    DrawerLayout+Navitationview实现侧滑效果
    DrawerLayout作为父布局
    child1:<LinearLayout></LinearLayot> 是滑动的内容区域
    child2: <LinearLayout></LinearLayot> 作为Drawer抽屉 再在Drawer中添加menu显示
    (DrawerLayout中,从左侧划出android:layout_gravity="start",从右侧 end )
    menu:中设置<group><item></item></group> <item></item>

    相关文章

      网友评论

          本文标题:Material Desgin学习

          本文链接:https://www.haomeiwen.com/subject/euckdttx.html