Android Design Support Library 使用

谷歌出Material design規范很久了，但是市面上的Material design風格的APP卻很少（Android的杯具），這個規范應該產品經理或UI設計師應該熟知于心，這里分享開發可能會使用的知識點和注意點，有詳細sample哦。

樣式

色彩

如圖，工具欄和大色塊適合使用飽和度 500 的基礎色，這也是你應用的主要顏色。狀態欄適合使用更深一些的飽和度 700 的基礎色。更多Color見： Style– Color

字體標準樣式

<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>

最基本的樣式集合就是基于 12、14、16、20 和 34 號的字體排版縮放。

使用

添加依賴

app/build.gradle

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'

TabLayout

使用方法： Android Design Support Library之TabLayout

Navigation drawer

使用方法： Android Design Support Library之NavigationView

CoordinatorLayout

使用方法： Android Design Support Library之CoordinatorLayout

SearchView

Toolbar+SearchView使用：

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;
        }
    });
}

過度動畫

需要跳到的地方，寫在DetailActivity：

/**
 * @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());
}

需要在DetailActivity寫：

//設置過渡動畫，第一參數就是DetailActivity的共享的元素
ViewCompat.setTransitionName(backdrop, AppConstants.TRANSITION_PIC);

CollapsingToolbarLayout

使用方法： Android Design Support Library之CollapsingToolbarLayout

TextInputLayout

emailTextInput.setError("請輸入郵箱");

夜間模式

使用方法： Android Support Library 之 夜間模式

其他組件

Material design規范文檔內容很多，很多東西是要細致推敲，值得產品經理或UI設計師，乃至開發人員好好學習，目前這個sample，Material design風格的效果都有了，相當一個空殼子，您只需在實際開發中塞真實數據就是一個perfect app，over。