Material Design控件军火库集合
qaz010203
8年前
<h2>本篇适合哪些人?</h2> <ul> <li>刚刚从基于android 4.4以下项目中切出来,还没有用过5.0+新特性</li> <li>新人入门学点牛逼特效控件</li> <li>撸一个爱屁屁</li> </ul> <h2>本篇包含</h2> <ul> <li>MaterialDrawer</li> <li>material-menu</li> <li>CoordinatorLayout</li> <li>AppBarLayout</li> <li>CollapsingToolbarLayout</li> <li>DrawerLayout</li> <li>MaterialDesignLibrary</li> <li>material</li> <li>MaterialDesignInXamlToolkit</li> </ul> <p>我先抽一口,再和你讲. 啊~舒坦.</p> <h2>MaterialDrawer</h2> <p><a href="/misc/goto?guid=4958865653164680052" rel="nofollow,noindex">https://github.com/mikepenz/MaterialDrawer</a></p> <p>提供比NavigationView 更好的交互效果的侧滑菜单项</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/1217ed4bd2d295858fe8054e8dfbd0e9.png"></p> <p style="text-align: center;">MaterialDrawer.png</p> <h2>material-menu</h2> <p>提供带切换效果的Ioc</p> <p>github: <a href="/misc/goto?guid=4959615273791412469" rel="nofollow,noindex">material-menu</a></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/d36c3cc25d288cfba5ae5247ef4b029d.gif"></p> <p style="text-align: center;">material-menu.gif</p> <h2>CoordinatorLayout && AppBarLayout</h2> <ul> <li>如果你想做出嵌套View滚动效果那么必须用它来实现</li> <li>他和CoordinatorLayout是一对的.CoordinatorLayout的直接子View必须是它.因为AppBarLayout.ScrollingViewBehavior对子View滑动响应事件直接做了处理.<br> 在另外一个嵌套的View中必须设置app:layout_behavior="@string/appbar_scrolling_view_behavior"这个特殊的值.也可以自定义Behavior.</li> <li>具体用法参考: <a href="/misc/goto?guid=4958962362684858299" rel="nofollow,noindex">泡在网上的日子</a></li> <li><a href="/misc/goto?guid=4959728909853330860" rel="nofollow,noindex">CoordinatorLayout的使用如此简单</a></li> <li><a href="/misc/goto?guid=4959737394669832716" rel="nofollow,noindex">CoordinatorLayout布局的使用方式</a></li> </ul> <h2>CollapsingToolbarLayout</h2> <p>实现视差滚动动画和Toolbar滚动</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/cbf6bb1df41c745b70c776187c978826.gif"></p> <p style="text-align: center;">CollapsingToolbarLayout .gif</p> <p><a href="/misc/goto?guid=4959737394765000376" rel="nofollow,noindex">CoordinatorLayout与CollapsingToolbarLayout实现视差滚动动画和Toolbar滚动</a></p> <h2>DrawerLayout</h2> <p>提供类似 <a href="/misc/goto?guid=4958533801538828985" rel="nofollow,noindex">SlidingMenu</a> 的官方支持库(侧滑菜单)</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/3844fc3665f5a5cef232feff57270b0b.gif"></p> <p style="text-align: center;">1.gif</p> <pre> <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.widget.DrawerLayout android:id="@+id/simple_navigation_drawer" android:layout_width="match_parent" android:layout_height="match_parent"> <!--内容视图--> <include android:id="@+id/tv_content" layout="@layout/drawer_content_layout" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--左侧滑菜单栏--> <include layout="@layout/drawer_menu_layout" android:layout_width="250dp" android:layout_height="match_parent" android:layout_gravity="start" /> <!--右侧滑菜单栏--> <include layout="@layout/drawer_menu_layout" android:layout_width="250dp" android:layout_height="match_parent" android:layout_gravity="end" /> </android.support.v4.widget.DrawerLayout> </RelativeLayout></pre> <p>--</p> <h2>discreteSeekBar</h2> <p><a href="/misc/goto?guid=4959622830169094712" rel="nofollow,noindex">https://github.com/AnderWeb/discreteSeekBar</a></p> <p>百分比滑动条</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/26334b88bb1b772fb46cddca333290af.png"></p> <h2>MaterialDesignLibrary</h2> <p><a href="/misc/goto?guid=4958988892423243226" rel="nofollow,noindex">https://github.com/navasmdc/MaterialDesignLibrary</a></p> <p>一个支持兼容到android2.2 的依赖库.很强大. 详情见github.</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/a4b985cba7ca8af71f1ec5bbdbc56e6a.png"></p> <h2>material</h2> <p><a href="/misc/goto?guid=4958988894720113326" rel="nofollow,noindex">https://github.com/rey5137/material</a></p> <p>一大波封装完整的组件 直接调用就可以了</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/2972c15441d6430333df9631832c2004.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/6980392836888d3ac905c14023c37859.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/554878cb5972d5173ede5d11d85fac90.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/43340b3487ba8cd2c17cdedde8f7c6bf.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/698e0ca3a082b1b6b08bf23a84f6e9c0.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/05eb06f0b6d8e6d36afa1d5273cfded2.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/07d66b6f079adf1ea04cc8f3356b3fd4.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/36e85d6d93f4e1ff413e5aa414e750f8.gif"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/e1046ddc83128d2e4ba64302396f6a20.gif"></p> <h2>MaterialDesignInXamlToolkit</h2> <p><a href="/misc/goto?guid=4959737394959734395" rel="nofollow,noindex">https://github.com/ButchersBoy/MaterialDesignInXamlToolkit</a></p> <p>同上都是组件军火库</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/91419da6b307f77f5261d102aed90f17.gif"></p> <p>更多设计请参考: <a href="/misc/goto?guid=4959737395046714098" rel="nofollow,noindex">最全面的 Material Design 学习资料</a></p> <p> </p> <p> </p> <p>来自:http://www.jianshu.com/p/4aaf04749f16</p> <p> </p>