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>