Android M新控制項之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用，androidtablayout

Android M新控制項之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用，androidtablayout

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

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

在這次的I/O大會上Google對Android並沒有很大的改變，主要是修改完善之前Android L版本。不過在Google推出

Material Design設計風格之後，還是做了很多風格上的相容，比如v7包的 RecyclerView，CardView，Palette等

這次的I/O大會上也繼續完善了MD設計支援庫，這次Google推出了Android Design Support Library 庫，全面支援

MD設計風格的UI效果。Design Support Library庫吸收了8 個新的 material design 組件！最低支援 Android

2.1，其實很多組件都是Github上比較火的，只是Google把它官方化了，便於開發人員使用。今天我們來學習

FloatingActionButton，TextInputLayout，Snackbar，TabLayout 四種控制項。

前提

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

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

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

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

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

FloatingActionButton

顧名思義：這是一個浮動按鈕。先上啦！ps：沒有的UI部落格很蛋疼的。

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

  <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"             />

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

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

<item name="colorAccent">#ff0000</item>

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

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

  <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <android.support.design.widget.FloatingActionButton            android:id="@+id/btn"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"            app:fabSize="mini" />        <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"             />        <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"            app:backgroundTint="#000af4"            app:fabSize="normal"            app:elevation="1dp"             />    </LinearLayout>

注意點

TextInputLayout

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

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

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

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

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

XML布局代碼如下：

 <android.support.design.widget.TextInputLayout        android:id="@+id/textInput"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:textColor="@android:color/black"/>    </android.support.design.widget.TextInputLayout>

代碼也可以看出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常用的方法有如下：

注意點

【轉載請註明出處：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的字型顏色預設使用系統主題中的如下顏色

<item name="colorAccent">#ff0000</item>

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

注意

TabLayout

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

用的開原始檔控制，只是這次Google把它官方化了，使得開發人員無需引用第三方庫，就能方便的使用。：

XML布局如下：

 <android.support.design.widget.TabLayout        android:id="@+id/tabs"    <!--Tab被選中字型的顏色-->        app:tabSelectedTextColor="@android:color/holo_blue_bright"    <!--Tab未被選中字型的顏色-->        app:tabTextColor="@android:color/black"    <!--Tab指標下標的顏色-->        app:tabIndicatorColor="@android:color/holo_blue_bright"        android:layout_width="match_parent"        android:layout_height="wrap_content" />

常用的屬性有三個：

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<String> 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<Fragment> 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 \n 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<Fragment> mFragments;    private List<String> mTitles;    public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> 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將

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

源碼地址 https://github.com/xujinping/AndroidDesignLibrary/tree/master