Android Material Design（一）材料設計控件大全

主要內容：

本文將要介紹Material design和Support library控件，主要包括TextInputLayout、SwitchCompat、SnackBar、FloatingActionButton、Shadows、Ripples、TabLayout、RecyclerView、Card、NavigationView、BottomSheet、Palette控件。

先來看下效果吧。

1. TextInputLayout:

TextInputLayout是用來增強EditText的，使用的時候也是在EditText包裹一層布局，如：

1>主要功能特色：

①當裡面的EditText獲取焦點後，EditText的hint文字，會移動到EditText的上面做Label，提示用戶。從上面的gif圖就看出了，我就不贅述了。

②具有錯誤提示機制，當用戶輸入的內容不符合要求時，可以提示用戶，以前我們都是用toast的方式，體驗很差。在布局中設置app:errorEnabled=”true” 在代碼中調用textInputLayout.setError(tip)方法，就可以在EditText的下方顯示錯誤內容。

③具有字數統計功能，很多情況下輸入文字都有文字字數限制，比如輸入反饋、描述等。以前我們都是自己去實現，現在好了，有系統控件幫我們實現了。通過下面的配置啟用該功能

app:counterEnabled="true"
app:counterMaxLength="50"
app:errorEnabled="true"

2> 具體的使用詳解

由於篇幅的原因，下面的講解，我就不每個屬性值都去改下，然後貼出圖片，這樣也沒有任何必要，希望需要的同學，自己去試試。代碼會在後面有github鏈接。

紙上得來終覺淺，絕知此事要躬行

①如何更改EditText的下方的橫線的顏色。如下圖所示：

這個顏色的控制是在樣式文件裡設置的，通過

@color/colorAccent

② 如何更改獲取焦點後，上面Label的顏色/大小等。如下圖所示：

這個顏色大小等屬性修改通過<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> app:hintTextAppearance="@style/HintAppearance"

本工程裡的樣式是這樣的：

③如何修改錯誤提示的顏色，如下圖所示：

錯誤的樣式通過如下方式修改：

app:errorTextAppearance="@style/ErrorAppearance"

需要注意的是，該屬性不止改變的是錯誤文字的顏色、大小，還修改了EditText的的那條橫線的顏色。

如果不想在編寫TextInputLayout布局的時候都去設置，還可以通過style文件去統一設置，如：

@color/textColorError

當然，如果你設置了errorTextAppearance同時又設置了textColorError，TextInputLayout會優先使用errorTextAppearance配置的顏色。

④ 字數統計功能，修改錯誤的有顏色和上面是一樣。如何修改統計字數的樣式。如下圖：

這裡分兩種情況，一種是沒有超過的情況，另一種是超過字數的情況。

//沒有超過最大字數
app:counterTextAppearance="@style/CounterAppearance"
//超過最大字數
app:counterOverflowTextAppearance="@style/CounterOverflowAppearance"

使用TextInputLayout遇到的一些坑：

① 如果加上字數統計需要在style裡加上textErrorColor，否則超過字數會後會閃退。

② 如果不需要字數統計，且啟用錯誤機制（setErrorEnabled(true)）, 不需要加上textErrorColor（不會閃退）系統會提供一個默認的error color。
當然可以通過textErrorColor來自定義錯誤顏色(error color).
可以使用更為強大的errorTextAppearance來定義錯誤顏色，字體大小等屬性。如果TextInputLayout 同時 設置了textErrorColor和errorTextAppearance ，只有errorTextAppearance生效.

③ 如果加上字數統計，且同時設置了textErrorColor和errorTextAppearance。
這個時候回出現奇怪的效果，Label和統計的顏色為textErrorColor的顏色。
EditText的橫線 和 錯誤文字提示為errorTextAppearance設置的效果。所以為什麼不加上textErrorColor會閃退，因為超過字數後TextInputLayout需要textErrorColor屬性設置的顏色。

2 SwitchCompat

效果圖我就不上了，文章開頭就已經有了。 這個控件使用也非常簡單。下面就說一下其他相關用法：

//SwitchCompat被豎線隔開
switchCompat.setSplitTrack(false);

//SwitchCompat右邊會出現錯誤提示
switchCompat.setError("error");

//是否顯示文字[默認為 開啟/關閉](當然也可以自定義文字)
switchCompat.setShowText(true);

//自定義文字
switchCompat.setTextOff("Off");
switchCompat.setTextOn("On");

//設置左邊文字和右邊按鈕的距離
switchCompat.setSwitchPadding(20);

//設置關閉和開啟
switchCompat.setChecked(true/false);


//監聽switchCompat開啟和關閉變化
switchCompat.setOnCheckedChangeListener();

//設置Track圖標
switchCompat.setTrackResource(R.mipmap.ic_back_gray);

//switchCompat設置指示圖標[但是開啟和關閉都是一個圖標,可以在setOnCheckedChangeListener裡動態設置]
switchCompat.setThumbResource(R.mipmap.ic_back_gray);

希望有需要的同學，把github上面的工程下載下來，然後打開這些方法，運行看看效果。在這裡我就不貼圖了。

3. SnackBar、FloatingActionButton、Shadows、Ripples

因為這些都比較簡單，我就放在一起說了。

1> SnackBar 使用方法很簡單[和Toast差不多]，如下所示：

//帶按鈕的
Snackbar.make(container, "Snackbar with action", Snackbar.LENGTH_SHORT)
        .setAction("Action", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(v.getContext(), "Snackbar Action pressed",Toast.LENGTH_SHORT).show();
            }
        }).show();



//純文本的
Snackbar.make(container, "This is Snackbar", Snackbar.LENGTH_SHORT).show();

2> FloatingActionButton

使用方法：

通過android:src修改圖片
通過app:backgroundTint修改背景顏色
通過app:fabSize設置大小，只有兩個選項normal和mini

3> Shadows

在布局中設置陰影

android:elevation="2dp"
app:elevation="2dp" //如果在Toolbar等控件，一定要加上這句，否則設置無效

4> Ripple效果

在res目錄下新建drawable-v21. 然後建一個資源文件 如下所示：

 //android:color 按下去的效果
     //默認效果
        
            
            
        
    

需要注意的是，需要在drawable目錄下新建同樣名稱的資源文件，否則在低版本上運行去閃退，因為找不到該文件，drawable-v21只在android5.0或以上系統有效。

4 Toolbar+TabLayout+RecyclerView+Card

1> Toolbar的使用

在布局中：

在Java代碼中設置Toolbar相關屬性

Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
if (toolbar != null) {
    toolbar.setNavigationIcon(R.mipmap.ic_back_white);//設置返回按鈕的icon
    if (title != null) {
        toolbar.setTitle(title);//設置title
    }
    AppCompatActivity activity = (AppCompatActivity) getActivity();
    activity.setSupportActionBar(toolbar);
    toolbar.setNavigationOnClickListener(new View.OnClickListener() { //返回按鈕的點擊事件
        @Override
        public void onClick(View v) {
            finish();
        }
    });
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);//顯示返回按鈕
}

如何設置Toolbar按鈕

首先在menu文件夾下新建菜單文件人，如：

//設置菜單
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.tab_menu, menu);
    super.onCreateOptionsMenu(menu, inflater);
}


//處理菜單的點擊事件
@Override
public boolean onOptionsItemSelected(MenuItem menuItem) {
    switch (menuItem.getItemId()) {
        case R.id.fixed:
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            break;
        case R.id.scroll:
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
            break;
    }
    return super.onOptionsItemSelected(menuItem);
}

如果是在fragment使用menu，需要在onCreate方法裡調用 setHasOptionsMenu(true);

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setHasOptionsMenu(true);
    }

2> TabLayout

TabLayout屬於design支持包下，所以需要在gradle加載相關配置：

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

TabLayout一般和ViewPager一起結合使用：

使用其實非常簡單，關鍵就一個方法：

tabLayout.setupWithViewPager(viewPager);

完整代碼如下所示：

viewPager.setAdapter(new ViewPagerAdapter(
        Arrays.asList("Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6"),
        Arrays.asList(new RecyclerViewFragment(), new RecyclerViewFragment(),
                new RecyclerViewFragment(), new RecyclerViewFragment(),
                new RecyclerViewFragment(), new RecyclerViewFragment()

        )));
tabLayout.setupWithViewPager(viewPager);

TabLayout還可以設置滾動和屏幕填充。

通過以下兩個方法設置即可：

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

效果圖我就不貼出來了。

在TabLayout.MODE_SCROLLABLE模式下還可以設置左邊的padding：
app:tabContentStart=”50dp”

下面是Adapter代碼

class ViewPagerAdapter extends FragmentStatePagerAdapter {
private List list;
private List fs;

public ViewPagerAdapter(List list, List fs) {
    super(getChildFragmentManager());
    this.list = list;
    this.fs = fs;
}



@Override
public int getCount() {
    return list.size();
}



@Override
public Fragment getItem(int position) {
    return fs.get(position);
}



@Override

public Object instantiateItem(ViewGroup container, int position) {
    return super.instantiateItem(container, position);
}



@Override
public CharSequence getPageTitle(int position) {
    return list.get(position);
}
}

recyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(recyclerView.getContext());

linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

recyclerView.setHasFixedSize(true);

recyclerView.setLayoutManager(linearLayoutManager);

recyclerView.setAdapter(new RecyclerAdapter(list));

public class RecyclerAdapter extends RecyclerView.Adapter {
    private List list;
    public RecyclerAdapter(List list) {
        this.list = list;
    }
    //創建Holder和ListView中一樣。
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ItemViewHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_card_view, parent, false));
    }
    //綁定數據
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
        itemViewHolder.tvTitle.setText(list.get(position));
        itemViewHolder.tvDesc.setText(list.get(position) + " this is description");
    }

    @Override
    public int getItemCount() {
        return list.size();
    }



    static class ItemViewHolder extends RecyclerView.ViewHolder {
        TextView tvTitle, tvDesc;
        public ItemViewHolder(View itemView) {
            super(itemView);
            tvTitle = (TextView) itemView.findViewById(R.id.tv_vibrant);
            tvDesc = (TextView) itemView.findViewById(R.id.title_desc);
        }
    }
}

compile 'com.android.support:cardview-v7:23.4.0'

app:itemIconTint="#2196f3"  給icon著色
app:itemTextColor="#009688" menu文字顏色
app:itemBackground="@drawable/my_ripple" 設置menu item的背景

//然後在style中加上就可以了
@style/DrawerArrowStyle

#ffffff