Android Design Support Library 使用
yzp_soft
8年前
<p>谷歌出Material design规范很久了,但是市面上的Material design风格的APP却很少(Android的杯具),这个规范应该产品经理或UI设计师应该熟知于心,这里分享开发可能会使用的知识点和注意点,有详细sample哦。</p> <h2><strong>样式</strong></h2> <h2><strong>色彩</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/7250780891174be86da4020b75b42f71.jpg"></p> <p>如图,工具栏和大色块适合使用饱和度 500 的基础色,这也是你应用的主要颜色。状态栏适合使用更深一些的饱和度 700 的基础色。更多Color见: Style– Color</p> <h2><strong>字体标准样式</strong></h2> <p><img src="https://simg.open-open.com/show/90a5a81e2ef6996ceeb552de91cf476d.jpg"></p> <pre> <code class="language-java"><dimen name="button">14sp</dimen> <!--给(图片、照片等)加说明文字--> <dimen name="caption">12sp</dimen> <dimen name="body">14sp</dimen> <!--副标题--> <dimen name="subheading">16sp</dimen> <dimen name="title">20sp</dimen> <dimen name="headline">24sp</dimen> <dimen name="display1">34sp</dimen> <dimen name="display2">45sp</dimen> <dimen name="display3">56sp</dimen> <dimen name="display4">112sp</dimen></code></pre> <p>最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放。</p> <h2><strong>使用</strong></h2> <h2><strong>添加依赖</strong></h2> <p>app/build.gradle</p> <pre> <code class="language-java">compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:support-v4:24.2.1' compile 'com.android.support:design:24.2.1'</code></pre> <h2><strong>TabLayout</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/36a50f2755c80e71772fd02e1b0c263c.gif"></p> <p>使用方法: Android Design Support Library之TabLayout</p> <h2><strong>Navigation drawer</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/59b51ff60d850c6e345821cf7efc5d65.gif"></p> <p>使用方法: Android Design Support Library之NavigationView</p> <h2><strong>CoordinatorLayout</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/d160509e67d76e011b3807ff784a78e5.gif"></p> <p>使用方法: Android Design Support Library之CoordinatorLayout</p> <h2><strong>SearchView</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/2bf3f15aed48e071a1465a086a28105a.gif"></p> <p>Toolbar+SearchView使用:</p> <pre> <code class="language-java">private void initSearchView() { final SearchView searchView = (SearchView) mToolbar.getMenu() .findItem(R.id.menu_search).getActionView(); searchView.setQueryHint("搜索…"); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { showToast("query=" + query); return false; } @Override public boolean onQueryTextChange(String s) { LogUtil.d("onQueryTextChange=" + s); // UserFeedback.show( "SearchOnQueryTextChanged: " + s); return false; } }); }</code></pre> <h2><strong>过度动画</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/bb26044cebff8c85720f15c861714f6c.gif"></p> <p>需要跳到的地方,写在DetailActivity:</p> <pre> <code class="language-java">/** * @param showImage 共享的元素 */ public static void startActivity(Activity activity, int position, ImageView showImage) { Intent intent = new Intent(); intent.setClass(activity, DetailActivity.class); intent.putExtra("position", position); ActivityOptionsCompat options = ActivityOptionsCompat .makeSceneTransitionAnimation(activity, showImage, AppConstants.TRANSITION_PIC); ActivityCompat.startActivity(activity, intent, options.toBundle()); }</code></pre> <p>需要在DetailActivity写:</p> <pre> <code class="language-java">//设置过渡动画,第一参数就是DetailActivity的共享的元素 ViewCompat.setTransitionName(backdrop, AppConstants.TRANSITION_PIC);</code></pre> <h2><strong>CollapsingToolbarLayout</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/095b8cd930dfaa20991060e0eac5a16a.gif"></p> <p>使用方法: Android Design Support Library之CollapsingToolbarLayout</p> <h2><strong>TextInputLayout</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/fbaaf58ed0b3a59684d2048db14c680f.jpg"></p> <pre> <code class="language-java">emailTextInput.setError("请输入邮箱");</code></pre> <h2><strong>夜间模式</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/c5c0e45fb0154b35362bd946b22ae6a9.jpg"></p> <p>使用方法: Android Support Library 之 夜间模式</p> <h2><strong>其他组件</strong></h2> <p>Material design规范文档内容很多,很多东西是要细致推敲,值得产品经理或UI设计师,乃至开发人员好好学习,目前这个sample,Material design风格的效果都有了,相当一个空壳子,您只需在实际开发中塞真实数据就是一个perfect app,over。</p> <p><br> </p>