Material Design 使用總結

本文對Material Design Library裏面的庫類的使用作一個簡單的彙總，方便之後能快速查詢、快速上手使用。本文包括如下內容：

• Color Palette
• Toolbar
• AppBarLayout
• CollapsingToolbarLayout
• CoordinatorLayout
• DrawerLayout、NavigationView
• Floating Action Button (FAB)
• Snackbar
• TabLayout
• TextInputLayout

若有遺漏，歡迎你們留言告知。我會持續補充，謝謝~。

要使用Material Design Library ，首先得將依賴庫加入到項目中，在app的build.gradle中（dependencies{ }），添加以下：

compile 'com.android.support:design:24.0.0'

 

1 Color Palette

咱們能夠定義狀態欄、ActionBar（或ToolBar）、導航欄等等顏色。能夠經過以下方式：

修改res/values/styles.xml文件以下：

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>

 

 

固然了，可自定義的不單單就上面示例中的3個，你還能夠自定義以下圖所示的區域的顏色：

例如，你能夠修改窗口背景色：

<item name="android:windowBackground">@color/colorAccent</item>

• 1

• 1

2 Toolbar、AppBarLayout、CollapsingToolbarLayout

參考個人另外一篇文章【玩轉AppBarLayout，更酷炫的頂部欄 】

3 CoordinatorLayout

參考個人另外一篇文章【CoordinatorLayout的使用如此簡單 】

4 DrawerLayout、NavigationView

在不少應用中都使用到了Drawer導航，在Design Support Library中，提供了DrawerLayout，看看如何使用的吧！

首先，須要將Android.support.v4.widget.DrawerLayout做爲佈局的根標籤，而後android.support.design.widget.NavigationView做爲其中的子標籤。以下所示：

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="hello world!" /> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer" /> </android.support.v4.widget.DrawerLayout> 

 

NavigationView包含兩個引用，一個是導航裏面的頭部，另外一個是菜單項，res/layout/drawer_header以下：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="150dp" android:background="?attr/colorPrimaryDark" android:gravity="bottom" android:orientation="vertical" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="頭部" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout>

 

res/menu/drawer.xml以下：

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/home" android:checked="true" android:icon="@drawable/home" android:title="主頁" /> <item android:id="@+id/theme" android:icon="@drawable/theme" android:title="主題" /> <item android:id="@+id/settings" android:icon="@drawable/setting" android:title="設置" /> </group> <item android:title="二級菜單"> <menu> <item android:icon="@drawable/favorite" android:title="收藏" /> <item android:icon="@drawable/ablum" android:title="相冊" /> <item android:icon="@drawable/friends" android:title="好友" /> </menu> </item> </menu>

 

 

而後，能夠在咱們的Activity裏面響應菜單點擊：

public class MainActivity extends Activity implements NavigationView.OnNavigationItemSelectedListener { private DrawerLayout mDrawerLayout; private NavigationView mNavigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mNavigationView = (NavigationView) findViewById(R.id.navigation_view); mNavigationView.setNavigationItemSelectedListener(this); } @Override public boolean onNavigationItemSelected(MenuItem menuItem) { // int id = menuItem.getItemId(); String title = (String) menuItem.getTitle(); Toast.makeText(this, "您點擊了 " + title, Toast.LENGTH_SHORT).show(); return super.onContextItemSelected(menuItem); } } 

 

效果以下： 

5 Floating Action Button (FAB)

直接將android.support.design.widget.FloatingActionButton放入佈局中便可，例如，要放到右下：

<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginBottom="@dimen/activity_vertical_margin" android:src="@drawable/ic_done" />

 

 

若是須要監聽點擊，直接經過setOnclickListener便可：

fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "您點擊了FAB", Toast.LENGTH_SHORT).show(); } });

 

 

6 Snackbar

通常狀況下，若是你想給用戶一個簡短的響應反饋，咱們會選擇使用Toast，如今咱們有了另外一個選擇啦：Snackbar。

看看如何使用

public void onClick(View v) { View.OnClickListener onClickListener = new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "您點擊了Snackbar中的肯定", Toast.LENGTH_SHORT).show(); } }; Snackbar sb = Snackbar.make(v, "在這裏是Snackbar顯示內容", Snackbar.LENGTH_LONG); //添加點擊"按鈕"-->"肯定"及其對應的點擊事件 sb.setAction("肯定", onClickListener); //設置"肯定"的顏色 sb.setActionTextColor(Color.RED); //設置顯示消息的文字顏色 View view = sb.getView(); ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(Color.GREEN); //設置背景顏色 view.setBackgroundColor(Color.GRAY); //設置透明度 view.setAlpha(0.5f); //設置位置,Snackbar本質是一個LinearLayout ViewGroup.LayoutParams lp = view.getLayoutParams(); LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(lp.width, lp.height); llp.gravity = Gravity.TOP; view.setLayoutParams(llp); //顯示 sb.show(); } 

 

 

看看效果：

7 TabLayout

先看佈局文件：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.hc.materialdesign.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark" app:tabGravity="center" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>

 

 

 

 

注意到，TabLayout中有兩個陌生的屬性

• app:tabMode：能夠取以下兩個值， 
  
  • fixed：表示Tab不能滾動
  • scrollable：表示Tab能夠滾動，此時無論tabGravity取何值，都是按照從左到右排過去，即至關於app:tabGravity="left"(固然了，實際中沒有left這個值，只是咱們能夠這麼去理解)
• app:tabGravity：能夠取以下兩個值， 
  
  • fill：當tabMode取fixed時（即tab不能滾動時），tab的全部子標籤填充tab的寬度
  • center：當tabMode去fixed時，tab中全部子標籤居中顯示。

爲了有更加直觀的理解，看幾張圖片：

當app:tabMode="scrollable"：

當app:tabMode="fixed"且 app:tabGravity="center"：

當app:tabMode=fixed且 app:tabGravity="fill"：

好了，接下來看看Activity裏面具體代碼：

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化ViewPager及其適配器 MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); //將ViewPager與適配器關聯 viewPager.setAdapter(adapter); //TabLayout TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); //將ViewPager與TabLayout關聯 tabLayout.setupWithViewPager(viewPager); //設置指示器的顏色 tabLayout.setSelectedTabIndicatorColor(Color.GREEN); } static class MyPagerAdapter extends FragmentStatePagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return MyFragment.newInstance(position); } @Override public int getCount() { return 3; } @Override public CharSequence getPageTitle(int position) { return "Tab " + position; } } }

 

其中MyFragment很簡單，只是用於產生一個簡單的Fragment：

public class MyFragment extends Fragment { private static final String TAB_POSITION = "tab_position"; public MyFragment() { } public static MyFragment newInstance(int tabPosition) { MyFragment fragment = new MyFragment(); Bundle args = new Bundle(); args.putInt(TAB_POSITION, tabPosition); fragment.setArguments(args); return fragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Bundle args = getArguments(); int tabPosition = args.getInt(TAB_POSITION); TextView tv = new TextView(getActivity()); tv.setGravity(Gravity.CENTER); tv.setText("Text in Tab #" + tabPosition); return tv; } } 

 

運行效果前面已經貼出來了，這裏就再也不復制顯示了。

8 TextInputLayout

TextInputLayout主要是用在登陸註冊方面。

先看看效果：

老規矩，從佈局文件開始：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="@dimen/activity_vertical_margin" tools:context="com.hc.materialdesign.MainActivity"> <android.support.design.widget.TextInputLayout android:id="@+id/userName" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="用戶名" android:inputType="textEmailAddress" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/email" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="郵箱" android:inputType="textEmailAddress" /> </android.support.design.widget.TextInputLayout> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="login" android:text="註冊" /> </LinearLayout> 

 

 

能夠看到，其實就是將咱們平時用的Edit控件放入到android.support.design.widget.TextInputLayout裏面，而且裏面只能放一個Edit，不然會報錯。這點讓我不太滿意，可是但是是在實現上放入多個Edit不太好控制吧。

再看MainActivity對輸入框數據的驗證：

public class MainActivity extends AppCompatActivity { TextInputLayout userNameWrapper; TextInputLayout emailWrapper; String emailFormate = "^(\\w)+(\\.\\w+)*@(\\w)+((\\.\\w+)+)$"; private Pattern pattern = Pattern.compile(emailFormate); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); userNameWrapper = (TextInputLayout) findViewById(R.id.userName); emailWrapper = (TextInputLayout) findViewById(R.id.email); } private boolean checkUserName() { String userName = userNameWrapper.getEditText().getText().toString(); if (userName.trim().equals("")) return false; else return true; } private boolean checkEmail() { String email = emailWrapper.getEditText().getText().toString(); Matcher matcher = pattern.matcher(email); return matcher.matches(); } public void login(View v) { View view = getCurrentFocus(); if (view != null) { ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); } if (!checkUserName()) { userNameWrapper.setError("用戶名不正確！"); } else { userNameWrapper.setError(""); if (!checkEmail()) { emailWrapper.setError("郵箱格式不正確！"); } else { emailWrapper.setError(""); } } } } 

 

 

若是數據是錯誤的，咱們只需經過setError函數來顯示便可！

最後，可能你以及注意到，界面中，用到了各類顏色。也就是說，裏面的顏色咱們是能夠定製的，在你的style文件裏面添加部分item便可：

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- Label color in TRUE state and bar color FALSE and TRUE State --> <item name="colorAccent">#00ff00</item> <item name="colorControlNormal">#00ffff</item> <item name="colorControlActivated">#ff00ff</item> <item name="android:textColorHint">#00ffff</item> <item name="textColorError">#ff0000</item> </style> </resources>