Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用

 

在前不久的谷歌2015 I/O大會上，發布了Android新版本M，貌似從這個版本開始Android不在以數字命名版本了。

在這次的I/O大會上谷歌對Android並沒有很大的改變，主要是修改完善之前Android L版本。不過在谷歌推出<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPk1hdGVyaWFsIERlc2lnbsnovMa357jx1q6686Osu7nKx9f2wcu63Lbgt+e48cnPtcS85sjdo6yxyMjndjew/LXEIFJlY3ljbGVyVmlld6OsQ2FyZFZpZXejrFBhbGV0dGW1yDwvcD4NCjxwPtXitM61xEkvT7Tzu+HJz9KyvMzQ+M3qycbBy01Eyei8xtans9a/4qOs1eK0zrnIuOjNxrP2wctBbmRyb2lkIERlc2lnbiBTdXBwb3J0IExpYnJhcnkgv+KjrMirw+bWp7PWPC9wPg0KPHA+TUTJ6LzGt+e48bXEVUnQp7n7oaNEZXNpZ24gU3VwcG9ydCBMaWJyYXJ5v+LO/MrVwcs4ILj20MK1xCBtYXRlcmlhbCBkZXNpZ24g1+m8/qOh1+61zdans9YgQW5kcm9pZDwvcD4NCjxwPjIuMaOsxuTKtbrctuDX6bz+trzKx0dpdGh1YsnPsci9z7vwtcSjrNa7yse5yLjosNHL/LnZt727r8HLo6yx49Pav6q3otXfyrnTw6GjvfHM7M7Sw8fAtNGnz7A8L3A+DQo8cD5GbG9hdGluZ0FjdGlvbkJ1dHRvbqOsVGV4dElucHV0TGF5b3V0o6xTbmFja2JhcqOsVGFiTGF5b3V0IMvE1ta/2Lz+oaM8L3A+DQo8aDIgaWQ9"前提">前提

為了能使用 這些 material design 組件，你需要去更新最新的SDK中的Extras支持庫，如下圖：

ps：在天朝上國，這種更新是需要翻牆的或者使用代理的，大家自行想辦法。

更新完之後，在build.gralde文件下引入如下包：

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

現在，我們可以開始使用Material Design組件啦！來看看新組件有什麼特別的地方吧！

FloatingActionButton

顧名思義：這是一個浮動按鈕。先上效果圖啦！ps：沒有效果圖的UI博客很蛋疼的。

以上是三種不同效果的FloatingActionButton。XML布局代碼如下：

由於FloatingActionButton是重寫ImageView的，所有FloatingActionButton擁有ImageView的一切屬性。為了

控制FloatingActionButton的大小，背景顏色，陰影的深度等，我們可以通過如下屬性來控制這些效果：

app:fabSize ：FloatingActionButton的大小，有兩種賦值分別是 “mini” 和 “normal”，默認是“normal”. app:backgroundTint：FloatingActionButton的背景顏色，默認的背景顏色是Theme主題中的

#ff0000

顏色，不了解的童鞋們可以參考Android5.x新特性之 Toolbar和Theme的使用：http://blog.csdn.net/feiduclear_up/article/details/46457433。
3. app:elevation ：FloatingActionButton陰影的深度，默認是有陰影的，如果覺得默認陰影深度有點大，可以改變這個屬性來修改陰影深度。

上面三個效果圖的XML布局代碼如下：

注意點

不能通過 android:background 屬性來改變 FloatingActionButton的背景顏色，只能通過app:backgroundTint屬性改變，因為FloatingActionButton是繼承自ImageView的。

TextInputLayout

該控件是用於EditView輸入框的，主要解決之前EditView在獲得焦點編輯時hint屬性提示語消失，這一點在一個頁

面有多個EditView輸入框的時候不是很好，因為很有可能用戶在輸入多個EditView之後，不知道當前EditView需

要輸入什麼內容。為了解決這一問題，TextInputLayout就此誕生了。TextInputLayout是繼承自LinearLayout容

器布局，因此我們需要將EditView包含在TextInputLayout之內才可以使用，言外之意：TextInputLayout不能單

獨使用。廢話不多說，先上效果圖啊：

XML布局代碼如下：

代碼也可以看出TextInputLayout包裹著EditView。

為了達到以上效果，我們還需添加如下代碼：

final TextInputLayout  inputLayout = findView(R.id.textInput);
        inputLayout.setHint(請輸入姓名:);

        EditText editText = inputLayout.getEditText();
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (s.length()>4){
                    inputLayout.setErrorEnabled(true);
                    inputLayout.setError(姓名長度不能超過4個);
                }else{
                    inputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });

TextInputLayout 不僅能讓EditView的提示語上彈顯示在EditView之上，而且還能把錯誤信息顯示在EditView之下。

TextInputLayout常用的方法有如下：

setHint()：設置提示語。 getEditText()：得到TextInputLayout中的EditView控件。 setErrorEnabled():設置是否可以顯示錯誤信息。 setError()：設置當用戶輸入錯誤時彈出的錯誤信息。

注意點

TextInputLayout不能單獨使用，需要包裹EditView組件。

【轉載請注明出處：http://blog.csdn.net/feiduclear_up/article/details/46500865 CSDN 廢墟的樹】

Snackbar的使用

Snackbar提供了一個介於Toast和AlertDialog之間輕量級控件，它可以很方便的提供消息的提示和動作反饋。

廢話不少說，妹子，上圖：

Snackbar的使用和Toast很類似，調用代碼如下：

final Snackbar snackbar = Snackbar.make(inputLayout,測試彈出提示,Snackbar.LENGTH_LONG);
                snackbar.show();
                snackbar.setAction(取消,new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        snackbar.dismiss();
                    }
                });

第一個參數View 可以是當前父布局中的任何一個view對象都可以。之後的參數和Toast參數一樣。Snackbar可以

設置Action行為事件，使用的方法是public Snackbar setAction (CharSequence text, View.OnClickListener listener); 也可以為Snackbar設置多個Action行為事件。Action的字體顏色默認使用系統主題中的如下顏色

#ff0000

當然你可以通過代碼去改變Action的字體顏色：Snackbar setActionTextColor (int color)；

注意

Snackbar可以同時設置多個Action行為事件 Snackbar是從整個界面的底部彈出。

TabLayout

Tabs選項卡，效果類似網易新聞客戶端的Tab。其實實現Tabs選項卡的效果有很多中方法，Github上也有很多好

用的開源控件，只是這次谷歌把它官方化了，使得開發者無需引用第三方庫，就能方便的使用。效果圖：

XML布局如下：

 
        app:tabSelectedTextColor=@android:color/holo_blue_bright
    
        app:tabTextColor=@android:color/black
    
        app:tabIndicatorColor=@android:color/holo_blue_bright
        android:layout_width=match_parent
        android:layout_height=wrap_content />

常用的屬性有三個：

app:tabSelectedTextColor：Tab被選中字體的顏色 app:tabTextColor：Tab未被選中字體的顏色 app:tabIndicatorColor：Tab指示器下標的顏色

TabLayout常用的方法如下：
- addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加選項卡到 layout 中
- addTab(TabLayout.Tab tab, boolean setSelected) 同上
- addTab(TabLayout.Tab tab) 同上
- getTabAt(int index) 得到選項卡
- getTabCount() 得到選項卡的總個數
- getTabGravity() 得到 tab 的 Gravity
- getTabMode() 得到 tab 的模式
- getTabTextColors() 得到 tab 中文本的顏色
- newTab() 新建個 tab
- removeAllTabs() 移除所有的 tab
- removeTab(TabLayout.Tab tab) 移除指定的 tab
- removeTabAt(int position) 移除指定位置的 tab
- setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 為每個 tab 增加選擇監聽器
- setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 設置滾動位置
- setTabGravity(int gravity) 設置 Gravity
- setTabMode(int mode) 設置 Mode,有兩種值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分別表示當tab的內容超過屏幕寬度是否支持橫向水平滑動，第一種支持滑動，第二種不支持，默認不支持水平滑動。
- setTabTextColors(ColorStateList textColor) 設置 tab 中文本的顏色
- setTabTextColors(int normalColor, int selectedColor) 設置 tab 中文本的顏色 默認 選中
- setTabsFromPagerAdapter(PagerAdapter adapter) 設置 PagerAdapter
- setupWithViewPager(ViewPager viewPager) 和 ViewPager 聯動

一般TabLayout都是和ViewPager共同使用才發揮它的優勢，現在我們通過代碼來看看以上方法的使用。

viewPager = findView(R.id.viewPager);

        tabLayout = findView(R.id.tabs);
        List tabList = new ArrayList<>();
        tabList.add(Tab1);
        tabList.add(Tab2);
        tabList.add(Tab3);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);//設置tab模式，當前為系統默認模式
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(0)));//添加tab選項卡
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(tabList.get(2)));

        List fragmentList = new ArrayList<>();
        for (int i = 0; i < tabList.size(); i++) {
            Fragment f1 = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString(content, http://blog.csdn.net/feiduclear_up 
 CSDN 廢墟的樹);
            f1.setArguments(bundle);
            fragmentList.add(f1);
        }

        TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragmentList, tabList);
        viewPager.setAdapter(fragmentAdapter);//給ViewPager設置適配器
        tabLayout.setupWithViewPager(viewPager);//將TabLayout和ViewPager關聯起來。
        tabLayout.setTabsFromPagerAdapter(fragmentAdapter);//給Tabs設置適配器

就不解釋了，都有注釋，來看看以上代碼的TabFragmentAdapter和TabFragment實現如下：

TabFragmentAdapter

public class TabFragmentAdapter extends FragmentStatePagerAdapter {

    private List mFragments;
    private List mTitles;

    public TabFragmentAdapter(FragmentManager fm, List fragments, List titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

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

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

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

TabFragment

public class TabFragment extends Fragment {

    private String content;
    private View view;


    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.item, container,false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        content = getArguments().getString(content);
        TextView tvContent = (TextView) view.findViewById(R.id.tv_tab_content);
        tvContent.setText(content + );
    }
}

注意 ：有這麼一種情況，當Tabs中的內容超過了手機屏幕的寬度時，Tabs選項卡中的tab為什麼不支持水平滑動？其實TabLayout是支持水平滑動的，只需要你在代碼中添加如下一行即可：

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//設置tab模式

限於篇幅有點長，接下來的CoordinatorLayout , CollapsingToolbarLayout 和 AppBarLayout，NavigationView將

在下一篇博客學習。以上代碼，如有疑問，歡迎共同討論。