材料設計控件的基本用法

2019-11-09 14:52:53
字體：大中小
來源：轉載
供稿：網友
一側滑菜單 DrawerLayout+NavigationView
1.布局文件:drawerlayout里面包含了一個是你的主布局（自己的布局），另一個NavigationView則是側滑布局
<android.support.v4.widget.DrawerLayout    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"   >    <include layout="@layout/content_main" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>注解：headerLayout:側滑布局的頭布局，menu 為菜單布局
1.1menu菜單布局
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context=".MainActivity">    <group android:checkableBehavior="single">        <item            android:id="@+id/navigation_item_book"            android:icon="@mipmap/ic_favorite"            android:title="@string/navigation_book" />        <item            android:id="@+id/navigation_item_example"            android:icon="@mipmap/ic_favorite"            android:title="@string/navigation_example" />        <item            android:id="@+id/navigation_item_about"            android:icon="@mipmap/ic_favorite"            android:title="@string/navigation_about" />    </group></menu>2.使用
2.1側邊欄的menu點擊監聽
navigationView.setNavigationItemSelectedListener(this);@SupPRessWarnings("StatementWithEmptyBody")@Overridepublic boolean onNavigationItemSelected(MenuItem item) {    // Handle navigation view item clicks here.    int id = item.getItemId();    if (id == R.id.navigation_item_book) {        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent);        fab.setVisibility(View.VISIBLE);        // Handle the camera action        AlertUtils.showToast(this,"書籍");        lastKey = currentKey;        currentKey = "三生三世十里桃花";        loadData();    } else if (id == R.id.navigation_item_example) {        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent2);        fab.setVisibility(View.GONE);        AlertUtils.showToast(this,"例子");    } else if (id == R.id.navigation_item_about) {        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent3);        fab.setVisibility(View.GONE);        AlertUtils.showToast(this,"關于");    }    drawer.closeDrawer(GravityCompat.START);    return true;}二 視差特效 coordinatorLayout+AppBarLayout+collapsingToolbarLayout+ImageView+ToolBar
1.coordinatorLayout:最外層布局相當于控制滑動聯動
2.collapsingToolbarLayout:包裹ImageView和ToolBar完成滑動由圖片切換成標題欄的視差特效
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="256dp"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/ivImage"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:transitionName="@string/iv_share_transication"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.design.widget.TabLayout            android:id="@+id/sliding_tabs"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:tabGravity="fill"            app:tabMode="fixed"            android:background="@android:color/white"            />        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@android:color/white"            />    </LinearLayout></android.support.design.widget.CoordinatorLayout>解釋：
1.expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。
2.layout_scrollFlags
scroll - 想滾動就必須設置這個。
enterAlways - 當向下移動時，立即顯示View（比如Toolbar)。
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
3.layout_collapseMode (折疊模式) - 有兩個值:
pin -  設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。
parallax - 設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值為：0~1。
總結：當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設置好的背景色，Toolbar也一直會固定在最頂端。
三 BottomNavigationBar 底部導航
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"     >    <include        android:id="@+id/appbar"        layout="@layout/app_bar_main" />    <LinearLayout        android:id="@+id/ll_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:text="Hello World!"        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>    <com.ashokvarma.bottomnavigation.BottomNavigationBar        android:id="@+id/bottom_navigation_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom"        /></android.support.design.widget.CoordinatorLayout>
最外層包裹的是CoordinatorLayout 目的是當內部空間填充的是滑動控件時候，如listview，滑動的時候可以動態顯示和隱藏底部導航
 //底部導航可以自動隱藏        bottomnavigationbar.setAutoHideEnabled(true);//自動隱藏        //底部導航模式        //BottomNavigationBar.MODE_SHIFTING;        //BottomNavigationBar.MODE_FIXED;        //BottomNavigationBar.MODE_DEFAULT;        bottomnavigationbar.setMode(BottomNavigationBar.MODE_FIXED);        //底部導航風格        // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;        // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE        // BottomNavigationBar.BACKGROUND_STYLE_STATIC        bottomnavigationbar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);        bottomnavigationbar.setBarBackgroundColor(R.color.white);//背景顏色        bottomnavigationbar.setInActiveColor(R.color.nav_gray);//未選中時的顏色        bottomnavigationbar.setActiveColor(R.color.colorPrimaryDark);//選中時的顏色        //我們還可以設置角標        badgeItem1 = new BadgeItem().setBackgroundColor(Color.RED).setText("3").setHideOnSelect(true);//角標        badgeItem2 = new BadgeItem().setBackgroundColor(Color.RED).setText("4").setHideOnSelect(true);//角標        badgeItem3 = new BadgeItem().setBackgroundColor(Color.RED).setText("5").setHideOnSelect(true);//角標        badgeItem4 = new BadgeItem().setBackgroundColor(Color.RED).setText("9").setHideOnSelect(true);//角標        item1 = new BottomNavigationItem(R.mipmap.ic_launcher, "Home");        item2 = new BottomNavigationItem(R.mipmap.ic_launcher, "Books");        item3 = new BottomNavigationItem(R.mipmap.ic_launcher, "Music");        item4 = new BottomNavigationItem(R.mipmap.ic_launcher, "Games");        //添加選項卡        bottomnavigationbar                .addItem(item1.setBadgeItem(badgeItem1))                .addItem(item2.setBadgeItem(badgeItem2))                .addItem(item3.setBadgeItem(badgeItem3))                .addItem(item4.setBadgeItem(badgeItem4))                .setFirstSelectedPosition(lastSelectedPosition)                .initialise();        bottomnavigationbar.setTabSelectedListener(this);        setDefaultFragment();    }    private void setDefaultFragment() {        FragmentManager fm = getFragmentManager();        FragmentTransaction transaction = fm.beginTransaction();        mBottomFragment = BottomFragment.newInstance("位置");        transaction.replace(R.id.ll_content, mBottomFragment);        transaction.commit();    }    boolean isSelected[] = {true, false, false, false};    @Override    public void onTabSelected(int position) {        Log.d("位置：", "onTabSelected() called with: " + "position = [" + position + "]");        FragmentManager fm = this.getFragmentManager();        //開啟事務        FragmentTransaction transaction = fm.beginTransaction();        switch (position) {            case 0:                isSelected[0] = true;                if (mBottomFragment == null) {                    mBottomFragment = BottomFragment.newInstance("位置");                }                transaction.replace(R.id.ll_content, mBottomFragment);                break;            case 1:                isSelected[1] = true;                if (mBottomFragment2 == null) {                    mBottomFragment2 = BottomFragment2.newInstance("發現");                }                transaction.replace(R.id.ll_content, mBottomFragment2);                break;            case 2:                isSelected[2] = true;                if (mBottomFragment3 == null) {                    mBottomFragment3 = BottomFragment3.newInstance("愛好");                }                transaction.replace(R.id.ll_content, mBottomFragment3);                break;            case 3:                isSelected[3] = true;                if (mBottomFragment4 == null) {                    mBottomFragment4 = BottomFragment4.newInstance("圖書");                }                transaction.replace(R.id.ll_content, mBottomFragment4);                break;            default:                break;        }        // 事務提交        transaction.commit();    }    @Override    public void onTabUnselected(int position) {        if (isSelected[0] == true) {            badgeItem1.hide();        }        if (isSelected[1] == true) {            badgeItem2.hide();        }        if (isSelected[2] == true) {            badgeItem3.hide();        }        if (isSelected[3] == true) {            badgeItem4.hide();        }    }    @Override    public void onTabReselected(int position) {    }}注意：當需要listview滑動可以讓底部導航聯動顯示和隱藏，listview需要設置一個屬性android:nestedScrollingEnabled="true"
此外除了上面主要的一些控件效果之外，還有一些控件如 TextInputLayout,CardView,RecyclerView,MaterialDialog.基本控件的使用我總結寫了一個小demo，有需要的話可以去我的github下載：https://github.com/wjn919/MyMaterialDemo。如果有什么不對的地方歡迎隨時指正和交流！