總結(jié)Android中MD風(fēng)格相關(guān)控件
要使用MD風(fēng)格控件，首先需要在Gradle中加入Support Design Library，例如：
compile 'com.android.support:design:24.1.1'
一、CoordinatorLayout
1、CoordinatorLayout + AppBarLayout
布局文件代碼如下：
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:title="MdView" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
................
</android.support.design.widget.CoordinatorLayout>
看一下效果：
CoordinatorLayout_1
配合CoordinatorLayout、AppBarLayout，我們實(shí)現(xiàn)了這樣的效果，向上滾動列表時(shí)，Toolbar隱藏，TabLayout置頂，再向下滾動Toolbar則顯示。
Toolbar之所以可以滾動隱藏\顯示，是通過如下屬性實(shí)現(xiàn)的：app:layout_scrollFlags="scroll|enterAlways"
相關(guān)屬性值解釋如下：
scroll：需要滾動出屏幕的view需要設(shè)置該flag， 沒有設(shè)置則view將被固定在屏幕頂部。
enterAlways: 使用該flag，則向下的滾動會使view變?yōu)榭梢姞顟B(tài)。
為Toolbar設(shè)置layout_scrollFlags屬相只是第一步，還需要在CoordinatorLayout 中提供一個可滾動的View，我們使用ViewPager，并在里邊嵌套RecyclerView。同時(shí)需要為ViewPager設(shè)置如下屬性：
app:layout_behavior="@string/appbar_scrolling_view_behavior"
這里簡單說下Tablayout的用法：
//設(shè)置TabLayout可滾動，保證Tab數(shù)量過多時(shí)也可正常顯示
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//兩個參數(shù)分別對應(yīng)Tab未選中的文字顏色和選中的文字顏色
mTabLayout.setTabTextColors(Color.WHITE, Color.RED);
//綁定ViewPager
mTabLayout.setupWithViewPager(mViewPager);
//設(shè)置TabLayout的布局方式（GRAVITY_FILL、GRAVITY_CENTER）
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//設(shè)置TabLayout的選擇監(jiān)聽
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//點(diǎn)擊Tab時(shí)回調(diào)
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
//重復(fù)點(diǎn)擊Tab時(shí)回調(diào)
@Override
public void onTabReselected(TabLayout.Tab tab) {
scrollToTop(mFragments.get(tab.getPosition()).getTypeList());
}
});
2、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
布局文件代碼如下：
<?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"
android:id="@+id/detail_content"
tools:context="com.othershe.mdview.DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/detail_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
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/AppTheme.PopupOverlay" />
</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">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
.....................
</android.support.design.widget.CoordinatorLayout>
看一下效果：
CoordinatorLayout_2
結(jié)合CollapsingToolbarLayout，我們向上滑動時(shí)ImageView隱藏、Toolbar顯示，向下滑動則反之，類似折疊展開的效果。
在CollapsingToolbarLayout中通過app:contentScrim="?attr/colorPrimary"屬相設(shè)置Toolbar折疊到頂部的背景，同時(shí)設(shè)置了app:layout_scrollFlags="scroll|exitUntilCollapsed"屬相，其中scroll的=含義已經(jīng)解釋過了，exitUntilCollapsed的含義如下：
exitUntilCollapsed: 滾動退出屏幕，最后折疊在頂端
同時(shí)AppBarLayout的高度需要時(shí)第一個固定值，這樣CollapsingToolbarLayout就有了折疊的效果。
折疊后Toolbar可以固定在頂部是因?yàn)槭褂昧?code>app:layout_collapseMode="pin"屬性，屬性值除了pin還有一個parallax：
pin：固定模式，在折疊的時(shí)候最后固定在頂端
parallax：視差模式，在折疊時(shí)會有個視差折疊的效果
同時(shí)在ImageView中使用了app:layout_collapseMode="parallax"屬相，來產(chǎn)生視差漸變的效果，使用app:layout_collapseParallaxMultiplier="0.7"可以控制視差的變化，屬性值的范圍是[0.0, 1.0]，值越大視察越大。
最后還需要在NestedScrollView中設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior屬性。
3、CoordinatorLayout + FloatingActionButton
看一下布局文件代碼：
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
.......................
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>
FloatingActionButton的父View是CoordinatorLayout，在屏幕右下角顯示，在java代碼中我們可以這樣使用：
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(mCoordinatorLayout, "點(diǎn)我分享哦！", Snackbar.LENGTH_SHORT).show();
}
});
看效果：
CoordinatorLayout_3
在Snackbar展示的時(shí)候FloatingActionButton上移，隱藏時(shí)下移。如果FloatingActionButton的父View是RelativeLayout或其它Container則FloatingActionButton不會上移而導(dǎo)致被Snackbar覆蓋。
在CoordinatorLayout_2的gif效果中，我們上滑時(shí)FloatingActionButton會折疊消失，其實(shí)只需要如下兩個屬性就可以
app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end"
第一個屬性使FloatingActionButton顯示在AppBarLayout的區(qū)域，第二個屬性確定顯示的具體位置。
二、Toolbar
使用Toolbar首先要隱藏原有的ActionBar，我們可以增加一個主題
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
也可以擴(kuò)展原有的主題,
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
colorPrimary：對應(yīng)ActionBar的顏色。
colorPrimaryDark：對應(yīng)狀態(tài)欄的顏色
colorAccent：對應(yīng)EditText編輯時(shí)、FloatingActionButton背景等顏色。
在布局文件中的用法可以參考上邊的代碼，之后在java代碼中得到Toolbar，通過setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。
接下來看一張圖：
Toolbar
標(biāo)出了一些Toolbar常用的擴(kuò)展方法，這樣我們可以更好的根據(jù)需求定制我們的Toolbar了。具體的實(shí)踐課參考源碼。
三、NavigationView
先看一下效果：
NavigationView
其實(shí)NavigationView就是用來實(shí)現(xiàn)我們常見的側(cè)滑菜單的效果的。
在布局文件中的代碼：
<?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_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
layout="@layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/menu_drawer"
app:headerLayout="@layout/nav_head_main" />
</android.support.v4.widget.DrawerLayout>
以DrawerLayout作為根布局，content_main作為主界面布局，最后是NavigationView，通過android:layout_gravity="start"設(shè)置為左側(cè)滑菜單，同理android:layout_gravity="end"代表右側(cè)滑菜單。
其中
app:menu="@menu/menu_drawer" app:headerLayout="@layout/nav_head_main"
兩個屬性分別代表NavigationView的頂部header布局以及下邊的menu item布局，具體可以參考源代碼。
準(zhǔn)備好了布局文件，接下來就是初始化工作：
private void initNavigationView() {
//初始化NavigationView頂部head的icon和name
ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon);
icon.setImageResource(R.mipmap.ic_launcher);
TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name);
name.setText("VipOthershe");
//設(shè)置NavigationView對應(yīng)menu item的點(diǎn)擊事情
mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_item1:
break;
case R.id.nav_item2:
break;
case R.id.nav_set:
break;
case R.id.menu_share:
break;
case R.id.nav_about:
break;
}
//隱藏NavigationView
mDrawerLayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
很簡單，就是初始化NavigationView的頂部header和Menu Item。
接下來看一下如何將右滑菜單和Toolbar結(jié)合使用：
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
mDrawerLayout.addDrawerListener(toggle);
//設(shè)置左上角顯示三道橫線
toggle.syncState();
通過設(shè)置將兩者綁定在一起，同時(shí)Toolbar左上角顯示三道橫線，左上角可打開左滑菜單。
還可以采用另外一種方式：
//設(shè)置Toolbar左上角圖標(biāo)
mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
先設(shè)置Toolbar左上角圖標(biāo)，并綁定事件，通過mDrawerLayout.openDrawer(GravityCompat.START);打開左滑菜單。
以上兩個方法，分別對應(yīng)打開和關(guān)閉左滑菜單：
mDrawerLayout.openDrawer(GravityCompat.START); mDrawerLayout.closeDrawer(GravityCompat.START);
如果使用右滑菜單則將GravityCompat.START改成GravityCompat.END，即可實(shí)現(xiàn)右滑菜單的開關(guān)。
以上就是Android中MD風(fēng)格相關(guān)控件的總結(jié)，文章利用實(shí)例介紹的很詳細(xì)，希望對大家在Android開發(fā)App中有所幫助。
- Android自定義狀態(tài)欄顏色與APP風(fēng)格保持一致的實(shí)現(xiàn)方法
- Android使用Dialog風(fēng)格彈出框的Activity
- Android UI設(shè)計(jì)系列之自定義Dialog實(shí)現(xiàn)各種風(fēng)格的對話框效果（7）
- Android App仿QQ制作Material Design風(fēng)格沉浸式狀態(tài)欄
- Android2.3實(shí)現(xiàn)Android4.0風(fēng)格EditText的方法
- Android自定義ViewGroup打造各種風(fēng)格的SlidingMenu
- android底部彈出iOS7風(fēng)格對話選項(xiàng)框(QQ對話框)--第三方開源之IOS_Dialog_Library
- 修改Android App樣式風(fēng)格的方法
- Android Studio設(shè)置主題與字體大小圖文教程
- Android入門教程之創(chuàng)建樣式與主題
- 分析Android多主題顏色的相關(guān)問題
- Android主題切換之探究白天和夜間模式
- 基于android樣式與主題(style&theme)的詳解
- Android中應(yīng)用界面主題Theme使用方法和頁面定時(shí)跳轉(zhuǎn)應(yīng)用
- Android編程應(yīng)用風(fēng)格和主題詳解
相關(guān)文章
這篇文章主要介紹了Android中的WebView詳細(xì)介紹,本文講解了WebView的概念、使用方法、各種使用實(shí)例等,需要的朋友可以參考下2015-06-06
Android中Intent機(jī)制詳解及示例總結(jié)(總結(jié)篇)
本文是小編日常收集整理些有關(guān)Android中Intent機(jī)制詳解及示例總結(jié)，對android中intent相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04
這篇文章主要為大家詳細(xì)介紹了Android小程序?qū)崿F(xiàn)簡易QQ界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Activity/Fragment結(jié)束時(shí)處理異步回調(diào)的解決方案
這篇文章主要介紹了關(guān)于在Activity/Fragment結(jié)束時(shí)處理異步回調(diào)的解決方案，文中介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
Android ListView用EditText實(shí)現(xiàn)搜索功能效果
本篇文章主要介紹了Android ListView用EditText實(shí)現(xiàn)搜索功能效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Android Studio使用小技巧：布局預(yù)覽時(shí)填充數(shù)據(jù)
這篇文章主要介紹了Android Studio使用小技巧：布局預(yù)覽時(shí)填充數(shù)據(jù),本文給出了代碼操作實(shí)例和效果圖例,需要的朋友可以參考下2015-05-05
這篇文章主要為大家介紹了Flutter高級玩法Flow位置自定義實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Android編程實(shí)現(xiàn)簡單流量管理功能實(shí)例
這篇文章主要介紹了Android編程實(shí)現(xiàn)簡單流量管理功能的方法,結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)流量監(jiān)控所涉及的功能模塊與布局技巧,需要的朋友可以參考下2016-02-02
Android實(shí)現(xiàn)簡易計(jì)步器功能隔天步數(shù)清零查看歷史運(yùn)動紀(jì)錄
這篇文章主要介紹了Android實(shí)現(xiàn)簡易計(jì)步器功能隔天步數(shù)清零查看歷史運(yùn)動紀(jì)錄,需要的朋友可以參考下2017-06-06
Android Studio 新建項(xiàng)目通過git上傳到碼云圖文教程詳解
本文通過圖文并茂的方式給大家介紹了Android Studio 新建項(xiàng)目通過git上傳到碼云的方法,需要的朋友可以參考下2017-11-11