Material Design用法

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

md.gif

話不多說蓬坡,一步步來實(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登場了。
    要使用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)去志鞍,來到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 屬性即可

接下來我們實(shí)現(xiàn)一個(gè)左右滑動(dòng)的效果
  • TabLayout+ViewPger來實(shí)現(xiàn)
    我們還是先來看效果
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+"頁");
        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的長度
/*
        * 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
革命尚未成功,同志仍需努力秘症,好照卦,我們接著來

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

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


    cardview.gif

    我們來分析下乡摹,其實(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í)候隱藏干签,下拉又顯示出來

<?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用來處理可滾動(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)起來什么區(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)了峰锁,在來一個(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();

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市晃虫,隨后出現(xiàn)的幾起案子皆撩,更是在濱河造成了極大的恐慌,老刑警劉巖哲银,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扛吞,死亡現(xiàn)場離奇詭異,居然都是意外死亡荆责,警方通過查閱死者的電腦和手機(jī)滥比,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來做院,“玉大人守呜,你說我怎么就攤上這事∩胶” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵弥喉,是天一觀的道長郁竟。 經(jīng)常有香客問我,道長由境,這世上最難降的妖魔是什么棚亩? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮虏杰,結(jié)果婚禮上讥蟆,老公的妹妹穿的比我還像新娘。我一直安慰自己纺阔,他們只是感情好瘸彤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著笛钝,像睡著了一般质况。 火紅的嫁衣襯著肌膚如雪愕宋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天结榄,我揣著相機(jī)與錄音中贝,去河邊找鬼。 笑死臼朗,一個(gè)胖子當(dāng)著我的面吹牛邻寿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播视哑,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绣否,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了黎炉?” 一聲冷哼從身側(cè)響起枝秤,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎慷嗜,沒想到半個(gè)月后淀弹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡庆械,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年薇溃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缭乘。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡沐序,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出堕绩,到底是詐尸還是另有隱情策幼,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布奴紧,位于F島的核電站特姐,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏黍氮。R本人自食惡果不足惜唐含,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沫浆。 院中可真熱鬧捷枯,春花似錦、人聲如沸专执。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至争剿,卻和暖如春已艰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚕苇。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國打工哩掺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人涩笤。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓嚼吞,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蹬碧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子舱禽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

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