Material Design用法

Material Design風(fēng)格，用一個(gè)小Demo使用下部分控件，先看下最終效果：

md.gif

話不多說，一步步來(lái)實(shí)現(xiàn)

  • Toolbar
    Android開發(fā)中，為了使用自定義的標(biāo)題欄，會(huì)把系統(tǒng)原生的Actionbar隱藏掉，因?yàn)槊總€(gè)Activity最頂部的標(biāo)題欄就是一個(gè)Actionbar，由于設(shè)計(jì)的原因，Actionbar只能位于Activity的頂部，就不能實(shí)現(xiàn)MaterialDesign的一些效果，那么Toolbar登場(chǎng)了。
    要使用Toolbar,需要在android:theme指定一個(gè)AppTheme主題
    打開AndroidManifest.xml
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

其中android:theme="@style/AppTheme"就是需要指定的AppTheme主題，好，點(diǎn)擊進(jìn)去，來(lái)到res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

這里定義了一個(gè)AppTheme的主題，指定的parent主題是Theme.AppCompat.Light.DarkActionBar，
要使用Toolbar需要指定一個(gè)不帶ActionBar的主題，通常有兩種主題可選：
Theme.AppCompat.NoActionBar 表示深色主題，即界面的主體顏色為深色，陪襯顏色為淡色；
Theme.appCompat.Light.NoactionBar表示淡色主題，即界面的主題顏色為淡色陪襯顏色為深色；
這里選擇淡色主題：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

修改activity_main.xml

 <LinearLayout  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:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    
    </LinearLayout>

  1. 這里使用了xmlns:app 指定的一個(gè)新的命名空間，是因?yàn)镸aternal Design是在Android 5.0才出現(xiàn)，所以在小于5.0的系統(tǒng)Material屬性不存在，為了能夠兼容老系統(tǒng)使用app:attribute

  2. @android/ ?android 的區(qū)別：@android引用的是系統(tǒng)的資源，?android引用的是本應(yīng)用theme內(nèi)的資源
    修改 MainActivity

public class MainActivity extends AppCompatActivity {
    private Toolbar tbMain;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tbMain = (Toolbar) findViewById(R.id.tb_main);
        setSupportActionBar(tbMain);

效果圖：
toolbar.png

ToolBar常用功能：
先看效果

title.gif

實(shí)現(xiàn)如下：

  <activity
            android:name=".MainActivity"
            android:label="Demo">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

android:label=" " 指定顯示在ToolBar中的文字內(nèi)容，如果沒有指定默認(rèn)顯示應(yīng)用名稱
res/下創(chuàng)建menu文件夾/創(chuàng)建menu_main.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  tools:context=".MainActivity"
  >
  <item android:id="@+id/action_edit"
      android:title="edit"
      android:orderInCategory="80"
      android:icon="@mipmap/ab_edit"
      app:showAsAction="ifRoom" />
  <item android:id="@+id/action_share"
      android:title="edit"
      android:orderInCategory="90"
      android:icon="@mipmap/ab_share"
      app:showAsAction="ifRoom" />
  <item android:id="@+id/action_settings"
      android:title="settings"
      android:orderInCategory="100"
      app:showAsAction="never"/>
</menu>

public class MainActivity extends AppCompatActivity {
    private Toolbar tbMain;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         tbMain = (Toolbar) findViewById(R.id.tb_main);
         setSupportActionBar(tbMain);
        tbMain.setOnMenuItemClickListener(onMenuItemClick);
       
    private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            String msg = "";
            switch (item.getItemId()) {
                case R.id.action_edit:
                    msg += "Click edit";
                    break;
                case R.id.action_share:
                    msg += "Click share";
                    break;
                case R.id.action_settings:
                    msg += "Click setting";
                    break;
            }
            if (!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };
             @Override
            public boolean onCreateOptionsMenu(Menu menu) {
 
            getMenuInflater().inflate(R.menu.menu_main, menu);
 
            return true;
 
        }

}

現(xiàn)在的標(biāo)題默認(rèn)在左邊，有時(shí)候項(xiàng)目需要在中間，這個(gè)也比較容易實(shí)現(xiàn)
首先 toolBar.setTitle(" ");

 <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="居中標(biāo)題"
                android:textColor="@color/colorWhite" />
        </android.support.v7.widget.Toolbar>
titleCenter.png
  • DrawerLayout(滑動(dòng)菜單)
    我們先看效果
dawerlayout.gif

只要修改布局就可以實(shí)現(xiàn)了；

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
      </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:backgrround="?attr/colorPrimary"
            android:text="側(cè)面菜單"
         />
</android.support.v4.widget.DrawerLayout>

注意android:layout_gravity的設(shè)定
我們往側(cè)面菜單中添加布局，這里用到一個(gè)新的控件 NavigationView，老規(guī)矩，先看實(shí)現(xiàn)效果

drawer.gif
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
            
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

只需要修改布局，設(shè)置app:headerLayout app:menu 屬性即可

接下來(lái)我們實(shí)現(xiàn)一個(gè)左右滑動(dòng)的效果
  • TabLayout+ViewPger來(lái)實(shí)現(xiàn)
    我們還是先來(lái)看效果
viewpager.gif

我們分析下：上面的標(biāo)簽是TabLayout，下面的內(nèi)容變化是通過ViewPager+Fragment實(shí)現(xiàn)的

  1. 修改activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimary"
          />
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorWhite" />
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
  1. 切換ViewPager，顯示不同的Fragment，這里先用一個(gè)相同的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        />
</LinearLayout>

3.創(chuàng)建Fragment

public class PageFragment extends Fragment {
 
    private int mPage;
    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt("page", page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt("page");
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page,container,false);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第"+mPage+"頁(yè)");
        return view;
    }
}

4.adapter

public class ViewPageAdapter extends FragmentPagerAdapter {
    private Context mContext;
    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4", "Tab5"};
    public ViewPageAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.mContext = context;
    }
    @Override
    public Fragment getItem(int position) {
        return PagerFragment.newInstance(position + 1);
    }
    @Override
    public int getCount() {
        return 5;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}
到這里就實(shí)現(xiàn)上面的效果啦~~~

這里tab注意兩個(gè)小點(diǎn)

  1. tab的顏色修改
  <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimary"
            app:tabIndicatorColor="@color/ColorYellow"
            app:tabSelectedTextColor="@color/ColorYellow"
            app:tabTextColor="@color/colorWhite" />
tabcolor.gif
  1. tab內(nèi)容的顯示和tab的長(zhǎng)度
/*
        * TabGravity有兩種效果，TabLayout.GRAVITY_CENTER和TabLayout.GRAVITY_FILL
        * 前者是居中，后者是盡可能的填充
        * */
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        /*
        * TabMode也有兩種效果，TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED
        * 前者是可滾動(dòng)的tabs,后者是固定的tabs并同時(shí)顯示所以的tabs
        * */
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

我們看下前者和后者的實(shí)現(xiàn)效果

tab_scrollable.gif
tab_fixed.gif
革命尚未成功，同志仍需努力，好，我們接著來(lái)

我們給他添加點(diǎn)內(nèi)容，這里我只顯示了圖片

  • RecyclerView+CardView添加內(nèi)容


    cardview.gif

    我們來(lái)分析下，其實(shí)就是不同的frangment顯示了不同的布局
    1.首先修改Fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_fg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       />
</LinearLayout>

2.在修改item的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:elevation="6dp"
        app:cardCornerRadius="6dp">
        <ImageView
            android:id="@+id/iv_picture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.v7.widget.CardView>
</LinearLayout>

CardView有兩個(gè)屬性值得注意：app:cardCornerRadius屬性指定圓角的弧度
app:elevation屬性指定卡片的高度
3.RecyclerView設(shè)置顯示
RecyclerView可以實(shí)現(xiàn)ListView、GridView的顯示效果，但是需要通過layoutManager設(shè)置

public class PagerFragment extends Fragment {
    private int mPage;
    private int[] mData;
    public static PagerFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt("page", page);
        PagerFragment pagerFragment = new PagerFragment();
        pagerFragment.setArguments(args);
        return pagerFragment;
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt("page");
        mData = new int[]{R.mipmap.n1, R.mipmap.n2, R.mipmap.n3, R.mipmap.n4, R.mipmap.n5, R.mipmap.n6,
                R.mipmap.s1, R.mipmap.s2, R.mipmap.s3, R.mipmap.s4, R.mipmap.s5, R.mipmap.s6};
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        RecyclerView rvFg = (RecyclerView) view.findViewById(R.id.rv_fg);
        if (mPage == 0) {
            LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
            rvFg.setLayoutManager(linearLayoutManager);
        } else if (mPage == 1) {
            StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
            rvFg.setLayoutManager(staggeredGridLayoutManager);
        } else if (mPage == 2) {
            GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2);
            rvFg.setLayoutManager(gridLayoutManager);
        } else if (mPage == 3) {
            LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
            rvFg.setLayoutManager(linearLayoutManager);
        } else if (mPage == 4) {
            LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
            linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
            rvFg.setLayoutManager(linearLayoutManager);
        }
        ItemAdapter itemAdapter = new ItemAdapter(getContext(), mData);
        rvFg.setAdapter(itemAdapter);
        return view;
    }
}

mData是圖片數(shù)組，圖片是從網(wǎng)上找的，放在mipmap里
mPage是第幾個(gè)Fragment，這里不同的Fragment設(shè)置顯示不同的樣式
然后在 ItemAdapter中通過Glide加載圖片

到這里已經(jīng)完成了80%，行百里者半九十，保持嚴(yán)謹(jǐn)?shù)膽B(tài)度，我們能讓它更完美
  • Toolbar滑動(dòng)隱藏與顯示和CollapsingToolbarLayout(可折疊標(biāo)題欄)
toolbar.gif

這里就是讓ToolBar上滑的時(shí)候隱藏，下拉又顯示出來(lái)

<?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="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        </android.support.v7.widget.Toolbar>
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/ColorYellow"
            app:tabSelectedTextColor="@color/ColorYellow"
            app:tabTextColor="@color/colorWhite" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorWhite"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

我們只是修改了布局
CoordinatorLayout可以監(jiān)聽所有子控件的的各種事件，同時(shí)也是一個(gè)加強(qiáng)版的FragmentLayout
AppBarLayout是一個(gè)垂直方向的Linearlayout
app:layout_behavior用來(lái)處理可滾動(dòng)View與AppbarLayout的聯(lián)動(dòng)
當(dāng)AppBar接收到View滑動(dòng)的時(shí)候，它的子控件就可以指定如何處理這些事件，通過 app:layout_scrollFlags="scroll|enterAlways|snap"指定實(shí)現(xiàn)，其中scroll表示當(dāng)View上滑的時(shí)候，ToolBar會(huì)一起向上滑動(dòng)并隱藏，enterAlways表示當(dāng)View下滑的時(shí)候，ToolBar會(huì)一起向下滑動(dòng)并重新顯示，snap表示當(dāng)ToolBar還沒有完全顯示或隱藏的時(shí)候，根據(jù)當(dāng)前的滑動(dòng)距離，自動(dòng)選擇顯示或隱藏。

CollapsingToolbar.gif
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.materialdesigndemo.activity.ItemActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_pic_item"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_item"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv_message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="Content  Content  Content  Content  Content  Content" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:scaleType="centerCrop"
        app:layout_anchor="@+id/appBar"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

還需要把狀態(tài)欄設(shè)置成透明，res下新建values-21，在創(chuàng)建styles.xml

<resources>
    <style name="itemTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

由于Android5.0之前的系統(tǒng)不能識(shí)別itemTheme,所以需要對(duì)values/styles.xml進(jìn)行修改

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="itemTheme" parent="AppTheme"></style>
</resources>

最后讓ItemAcivity使用這個(gè)主題，修改AndroidManifest.xml

 <activity
            android:name=".ItemActivity"
            android:theme="@style/itemTheme" />

它倆有實(shí)現(xiàn)起來(lái)什么區(qū)別呢
很明顯相同點(diǎn)是CoordinatorLayout作為父布局，都有子控件AppBarLayout和子控件可滾動(dòng)View（通過app:layout_behavior指定布局行為）
不同點(diǎn)是AppBarLayout里的子控件不同，標(biāo)題隱藏或顯示是把ToolBar作為AppBarLayout的子控件，通過app:layout_scrollFlags指定實(shí)現(xiàn)；
而可折疊標(biāo)題欄是把CollapsingToolbarLayout作為AppBarLayout的子控件，也是通過app:layout_scrollFlags指定實(shí)現(xiàn)，但是CollapsingToolbarLayout還有兩個(gè)子控件ImageView和ToolBar組成高級(jí)的標(biāo)題欄；
到這里基本功能已經(jīng)實(shí)現(xiàn)了，在來(lái)一個(gè)控件作為結(jié)束

  • Snackbar
snackbar.gif
 Snackbar.make(view, "確定點(diǎn)擊？", Snackbar.LENGTH_SHORT).setAction("確定", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(ItemActivity.this, "floatOnClick", Toast.LENGTH_SHORT).show();
                    }
                }).show();

用法比較簡(jiǎn)單，和Toast差不多，個(gè)人覺得是加了一個(gè)再次確認(rèn)的操作防止誤操作。
好了，就到這里了，不足之請(qǐng)留言指正。

github地址：https://github.com/everyk/MaterialDesignDemo.git

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,058評(píng)論 25贊 709
  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,334評(píng)論 0贊 17
  • 我的生命除了愛情以外別無(wú)所求，我拼命抓住愛情。除了來(lái)自你的音信以外，我什么也不期待，什么也不再愿意期待。而注定的，...
    叫我心夜閱讀 182評(píng)論 0贊 0
  • 最近閑著蛋疼,本想裝個(gè)雙系統(tǒng).后來(lái)在安裝完了windows系統(tǒng)時(shí),不小心把MAC系統(tǒng)格了,不知道MAC電腦使...
    一達(dá)閱讀 4,033評(píng)論 0贊 0
  • 七月已經(jīng)開始了，可我卻不知道該怎么來(lái)總結(jié)過去的30天。六月，于我而言，沒有上進(jìn)、沒有計(jì)劃，唯有一場(chǎng)一場(chǎng)的告別。曾經(jīng)...
    Roughlay成長(zhǎng)日記閱讀 606評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容