Android Material Design-UI

Material Design出來這麼長時間了。今天抽空總結下 Material Design 新增加的一些UI，算是一個總結吧。

首先在gradle腳本中添加

接下來我們看看design包裡面新加了些什麼玩意。

可以看出多出來這麼些個UI：

• AppBarLayout
• CollapsingToolbarLayout
• CoordinatorLayout
• FloatingActionButton
• NavigationView
• Snackbar
• Tablayout
• TextInputLayout

接下來我們一一介紹

• AppBarLayout

  用法

<android.support.design.widget.AppBarLayout  
        android:id="@+id/appbar_layout"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:fitsSystemWindows="true"> 
        ...
</android.support.design.widget.AppBarLayout>
           

就是一個ViewGroup，配合ToolBar與CollapsingToolbarLayout等使用。

• CollapsingToolbarLayout

  可伸縮折疊的Toobar，具體的用法參考這篇文章CollapsingToolbarLayout

• CoordinatorLayout

  這其實也是個viewgroup

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#ffbb55"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#30469b"
            app:tabGravity="fill"
            app:layout_collapseMode="pin"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#ffffff" />
    </android.support.design.widget.AppBarLayout>


        <android.support.v4.view.ViewPager
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


</android.support.design.widget.CoordinatorLayout>
           

該控件也是Design包下的一個控件，然而這個控件可以被稱為Design包中最複雜、功能最強大的控件：CoordinatorLayout。為什麼這樣說呢？原因是：它是組織它衆多子view之間互相協作的一個ViewGroup。CoordinatorLayout 的神奇之處就在于 Behavior 對象。怎麼了解呢？CoordinatorLayout使得子view之間知道了彼此的存在，一個子view的變化可以通知到另一個子view，CoordinatorLayout 所做的事情就是當成一個通信的橋梁，連接配接不同的view，使用 Behavior 對象進行通信。比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标記了app:layout_scrollFlags滾動事件,那麼在CoordinatorLayout布局裡其它标記了app:layout_behavior的子View（LinearLayout、RecyclerView、NestedScrollView等）就能夠響應（如ToolBar、TabLayout）控件被标記的滾動事件。

上面有一點錯誤，就是标記了app:layout_behavior的子view必須是ReayclerView。

• FloatingActionButton

  将這個控件當成ImageButton用即可。具體的用法參考FloatingActionButton 完全解析[Design Support Library(2)]

  我這裡不多說了。

• NavigationView

  具體用法繼續參考百萬的部落格Android 自己實作 NavigationView [Design Support Library(1)]

• Snackbar

  用法

Snackbar.make(textinputlayout,"quanshijie",Snackbar.LENGTH_LONG)
                .setAction("dosomething", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                })
                .show();
           

SnackBar提供了極其多的方法，我們看下

有設定顯示時間、ActionText顔色、進入動畫、退出動畫等。

• TabLayout

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#30469b"
            app:tabGravity="fill"
            app:layout_collapseMode="pin"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#ffffff" />
           

一般來說，tablayout會配合上viewpager來使用。

ViewPager mViewpager = (ViewPager) findViewById(R.id.viewpager);
        MyviewPagerAdapter adapter=new MyviewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentDemo(),"Tab one");
        adapter.addFragment(new FragmentDemo(),"Tab two");
        adapter.addFragment(new FragmentDemo(),"Tab three");
        adapter.addFragment(new FragmentDemo(),"Tab four");
        adapter.addFragment(new FragmentDemo(), "Tab five");
        mViewpager.setAdapter(adapter);

        TabLayout mTablayout = (TabLayout) findViewById(R.id.tabLayout);
        mTablayout.addTab(mTablayout.newTab().setText("1"));
        mTablayout.addTab(mTablayout.newTab().setText("2"));
        mTablayout.addTab(mTablayout.newTab().setText("3"));
        mTablayout.setupWithViewPager(mViewpager);
           

通過這個就把tablayout和viewpager關聯上了。

• TextInputLayout

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="user_password" />
    </android.support.design.widget.TextInputLayout>
           

内部隻能有一個EditText

textinputlayout= (TextInputLayout) findViewById(R.id.textinputlayout);
        textinputlayout.getEditText().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) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (textinputlayout.getEditText().getText().length()<){
                    textinputlayout.setErrorEnabled(true);
                    textinputlayout.setError("密碼長度不能小于6位");
                }else{
                    textinputlayout.setErrorEnabled(false);
                }
            }
        });
           

最後，重點戲來了。有的同學不知道控件有啥子屬性。沒關系，我在這裡就給出方法。

我們知道自定義控件的時候會寫attr.xml檔案中寫屬性。并在xml檔案中引用進來。同樣我們使用design的時候也引用了。引用的是哪裡的呢。Design包下面的。values.xml檔案下看看。那個下面就是屬性了。比如說

<declare-styleable name="FloatingActionButton">
    <attr name="android:background"/>
    <attr name="backgroundTint"/>
    <attr name="backgroundTintMode"/>
    <attr format="color" name="rippleColor"/>
    <attr name="fabSize">
        <enum name="normal" value="0"/>
        <enum name="mini" value="1"/>
    </attr>
    <attr name="elevation"/>
    <attr format="dimension" name="pressedTranslationZ"/>
    <attr format="dimension" name="borderWidth"/>
</declare-styleable>
           

這個我們就知道控件有哪些屬性了吧。

好，今天就到這裡。