Android Design Support Library 中控件的使用簡單介紹（一）

本文轉載自查看原文 2015-05-31 13:24 10042 Android應用開發/ android Design Support Library 使用

Android Design Support Library 中控件的使用簡單介紹（一）

介紹

在這個 Lib 中主要包含了 8 個新的 material design 組件！最低支持 Android 2.1 。這些組件在我看來就是對 Github中最近比較火的 android 組件進行了封裝！！

下載

要使用這個庫，當然得先下載啦！（沒有翻牆的同學肯定已經哭暈在廁所了！！）這里我給童鞋們，提供一個簡單的方法：
就是使用紅杏提供的公益代理！具體使用方法如下圖：

之后就是使用 Android SDK Manager 更新下載了！！

使用

第一步--引用

引用這個庫：在build.gradle文件中加上這段代碼：compile 'com.android.support:design:22.2.0

第二步--具體控件的使用

TextInputLayout

以前當我們使用 EditText 這個組件的 hint 屬性的時候，當用戶輸入第一個字母之后，這個 hint 中的文本就會消失！有點影響用戶體驗！但是現在不一樣了！現在只要把 EditText 包含在 TextInputLayout 中，這個 hint 中的文本就會變成 floating lable 浮動在 EditText 上方！同時，也支持在 EditText 下方顯示錯誤信息好了，我么先來看一下 TextInputLayout 這個控件的公共方法吧！

想必大家也能看明白 (我在有的函數解釋下)

getEditText() 得到控件中包含的 EditText 控件
setError(CharSequence error) 設置錯誤信息並顯示在 EditText 下方應用場景：比如用戶輸錯了密碼或者用戶名等
setHint(CharSequence hint) 設置提示信息
setErrorEnabled(boolean enabled) 設置 setError(CharSequence error) 這個函數是否可用記住哦：這個函數一定要在 setError(CharSequence error) 這個函數之后執行哦！具體原因大家可以去看源碼哦！

現在我們先在布局文件中布局：

 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/textinput">
    <EditText
        android:layout_marginTop="4dp"
        android:layout_width="match_parent"
        android:layout_height="48dp"/>
</android.support.design.widget.TextInputLayout>

很簡單就是一個嵌套！我們接下來 onCreate(Bundle savedInstanceState) 方法中的代碼：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textinput = (TextInputLayout) findViewById(R.id.textinput);
    et_content = textinput.getEditText();
    textinput.setHint("請輸入用戶名");
    textinput.setError("密碼輸入錯啦！");
    textinput.setErrorEnabled(true);//當設置成false的時候 錯誤信息不顯示 反之顯示
}

代碼很簡單不細說！大家直接看效果圖：

效果圖

FloatingActionButton

由於這個控件相對簡單！我就直接在上面的那個布局中增加這個按鈕，並把它顯示在右邊！

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/button"
    android:layout_width="48dp"
    android:layout_gravity="right"
    android:layout_height="48dp"
    android:orientation="vertical" />

接着我們在看代碼區域：

button.setRippleColor(Color.GRAY);//設置按下去的波紋顏色
button.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.ic_menu_add));//背景色

不解釋了簡單！

Snackbar

和 Toast 類似。但是它有簡單的可選擇的單個的Action。同時還有個特性就是用戶可以在它消失時間未到的時候，移掉它！
現在來介紹下 Snackbar 的一些函數

dismiss() 用來消失 Snackbar 的
getDuration() 得到顯示時長的
make(View view, int resId, int duration) 創建 Snackbar 的
make(View view, CharSequence text, int duration) 和上面一樣
setAction(int resId, View.OnClickListener listener) 對 Snackbar 設置單擊時間，這里的單擊時間不是作用於整個 Snackbar 的，還是作用於你所設置的這個字段的，也就是這個 resId
setAction(CharSequence text, View.OnClickListener listener) 和上面一樣
setActionTextColor(ColorStateList colors) 設置動作字的顏色，就是對上面的setAction 中文字顏色的設置
setActionTextColor(int color) 和上面一樣
setDuration(int duration) 設置 Snackbar 顯示時常
setText(int resId) 更新 Snackbar 中的文本
setText(CharSequence message) 和上面一樣
show() 顯示 Snackbar

函數已經介紹完了！現在，我會FloatingActionButton增加一個單擊事件用來顯示 Snackbar 。直接看代碼：

 button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar
                    .make(content, "你好啊", Snackbar.LENGTH_LONG)
                    .setAction("delete", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "delete", Toast.LENGTH_SHORT).show();
                        }
                    })
                    .show();
        }
    });

直接看效果吧！

效果圖

Tabs

選項卡，一般和 TabLayout 一起使用哦。現在我們來看一下 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
setTabTextColors(ColorStateList textColor) 設置 tab 中文本的顏色
setTabTextColors(int normalColor, int selectedColor) 設置 tab 中文本的顏色默認選中
setTabsFromPagerAdapter(PagerAdapter adapter) 設置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 聯動

函數介紹完了，現在來看代碼吧！
布局代碼：

  <android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:background="#1FBCD2"
    android:layout_height="48dp" />

再來看一下 onCreate(Bundle savedInstanceState) 中的方法吧

 @Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    tabLayout= (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//設置文本在選中和為選中時候的顏色
    tabLayout.addTab(tabLayout.newTab().setText("第一個"), true);//添加 Tab,默認選中
    tabLayout.addTab(tabLayout.newTab().setText("第二個"),false);//添加 Tab,默認不選中
    tabLayout.addTab(tabLayout.newTab().setText("第三個"),false);//添加 Tab,默認不選中
}

來看一下效果吧
效果圖

現在我們來把 TabLayout 和 ViewPager 連起來用
先看布局文件我們在上面的基礎上加了個ViewPager

<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:background="#1FBCD2"
    android:layout_height="48dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

再來看一下 onCreate(Bundle savedInstanceState) 中的方法吧

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    tvs = new ArrayList<TextView>();
    for (int i = 0; i < items.length; i++) {
        TextView tv = new TextView(this);
        tv.setText(items[i]);
        LinearLayout.LayoutParams lp =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        tv.setTextColor(Color.BLACK);
        tv.setBackgroundColor(Color.WHITE);
        tv.setGravity(Gravity.CENTER);
        tv.setLayoutParams(lp);
        tv.setTextSize(22);
        tvs.add(tv);
    }
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//設置文本在選中和為選中時候的顏色
    vp = (ViewPager) findViewById(R.id.vp);
    adapter = new Adapter();
    vp.setAdapter(adapter);
    
    //用來設置tab的，同時也要覆寫  PagerAdapter 的 CharSequence getPageTitle(int position) 方法，要不然 Tab 沒有 title
    tabLayout.setupWithViewPager(vp);
    //關聯 TabLayout viewpager
    tabLayout.setTabsFromPagerAdapter(adapter);
}

看效果圖：

大家都記得 DrawerLayout 這個控件吧！它是 android 用來體態 SlideMenu 的一個組件！在這個控件中我們通常需要一個 menu（也是個布局文件）和一個主體布局文件。現在這個 Navigation View 就是用來寫 menu的！
這個控件我就不一一寫函數了！我們還是直接使用吧！直接看布局文件

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="哈哈"
            android:gravity="center"
            android:textSize="30sp"
            android:textColor="@android:color/background_dark"/>
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>

我們直接看 NavigationView ，會發現我使用了兩個新的屬性 app:headerLayout 和 app:menu 這是因為這個組件把menu分為兩部分，一個是頭部還有一個是 menu。現在我們只需要寫個新的頭部和一個 menu就行啦！！這個組件我就不上圖了！主要是我認為沒啥意思這個組件！

剩下的組件

現在還剩下 CoordinatorLayout , CollapsingToolbarLayout 和 AppBarLayout 這三個組件！由於我對這個三個組件還沒有仔細研究，在這篇博文中就不說了！下篇博文再講！！

CoordinatorLayout 是一個超級 FrameLayout
CollapsingToolbarLayout 類似這張圖
AppBarLayout 全新，用來實現各種 Material Design 概念效果的一個 Layout，主要負責對滑動的響應

以上三個組件的來自代碼家的這篇博文 Google I/O 2015 為 Android 開發者帶來了哪些福利？的解釋！

結束語

不知道大家有沒有好的 unity3d 學習方面的資料求介紹啊！！！！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android Design Support Library Android Support Library詳細介紹 Android Material Design:滑動指示選項卡android.support.design.widget.TabLayout的簡單使用如何在Eclipse下使用Android Design Library 安卓Design包之超強控件CoordinatorLayout與SnackBar的簡單使用安卓Design包之TabLayout控件的簡單使用使用android.support.design.widget.TabLayout出現java.lang.reflect.InvocationTargetException 使用 CoordinatorLayout 出錯 inflating class android.support.design.widget.CoordinatorLayout 安卓進階：Percent Support Library使用 Android中ListView控件的使用