一.簡介
Material Design是Google在2014年I/O大會上發布的一種新的設計規範。一經推出就好評如潮,個人是非常喜歡這種風格的,由於他只支持5.0及其以上的設備,開發者也只是自己空閑時嘗嘗鮮,並沒用在真實的項目中去,使得其在國內的市場並不是太好。公司的設計也並沒有按照找個規範來設計過App,但是市場上還是有些MD風格的App,如知乎,簡書等都能找到它的身影,不管怎樣,先學了再說,今天我們要實現一個這樣的效果:
二.總體概覽
本例使用android Studio開發,開發之前先引入design庫,在build.gradle文件中添加如下代碼並編譯:
compile 'com.android.support:design:25.1.0'
compile 'com.jakewharton:butterknife:7.0.0'
註:我這裏使用了butterknife註解框架,這個開源庫可以讓我們從大量的findViewById()和setonclicktListener()解放出來,這裏不做具體介紹,自行百度;
1.首先看一下最頂部的Toolbar控件
在這裏引用一下網上的一張講解Toolbar的圖:
我們例子中布局文件如下:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/draw_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/root_coordina_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src=http://www.ithao123.cn/"@mipmap/header"
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"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#1565C0"
android:visibility="gone"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#f3512d"
app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
app:tabTextColor="#ffffff" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tab_layout"
android:visibility="gone" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src=http://www.ithao123.cn/"@mipmap/ic_launcher" />
<--此處省略了很多imageView-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
<!--外層根需為CoordinatorLayout,指定make()的第一個參數-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src=http://www.ithao123.cn/"@mipmap/fbb"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:itemIconTint="#333"
app:itemTextColor="#333"
app:menu="@menu/navigation_drawer_items" />
</android.support.v4.widget.DrawerLayout>
2.下面一一介紹下各個控件的作用:
(1).CoordinatorLayout:在Material Design裏,CoordinatorLayout通常用來作為頂層視圖,來協調處理各個子View之間的動作,從而實現各種動畫效果,如Snackbar與FloatingActionButton的配合顯示效果,就是以CoordinatorLayout作為根布局來實現的;
(2).AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器組件,它是為了Material Design設計的App Bar,支持手勢滑動操作。
(3).CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar,它繼承至FrameLayout,給它設置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
通過app:layout_scrollFlags=”scroll|enterAlways”屬性來確定哪個組件是可滑動的.
設置的layout_scrollFlags有如下幾種選項:
- scroll: 所有想滾動出屏幕的view都需要設置這個flag- 沒有設置這個flag的view將被固定在屏幕頂部。
- enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見,啟用快速“返回模式”。
- enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時,你的視圖只能已最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。
- exitUntilCollapsed: 滾動退出屏幕,最後折疊在頂端。
3.為了使得Toolbar可以滑動,我們必須還得有個條件,就是CoordinatorLayout布局下包裹一個可以滑動的布局,比如 RecyclerView,NestedScrollView(經過測試,ListView,ScrollView不支持)具有滑動效果的組件。並且給這些組件設置如下屬性來告訴CoordinatorLayout,該組件是帶有滑動行為的組件,然後CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出屏幕了。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
4.下面來看下MainActivity的代碼:
public class MainActivity extends AppCompatActivity {
@Bind(R.id.toolbar)
Toolbar toolbar;
@Bind(R.id.tab_layout)
TabLayout tabLayout;
@Bind(R.id.viewPager)
ViewPager viewPager;
@Bind(R.id.collapsingToolbarLayout)
CollapsingToolbarLayout collapsingToolbarLayout;
@Bind(R.id.fabBtn)
FloatingActionButton fabBtn;
@Bind(R.id.root_coordina_layout)
CoordinatorLayout rootCoordinaLayout;
@Bind(R.id.navigation)
NavigationView navigation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initView();
}
private void initView() {
//指定我們自己的Toolbar
setSupportActionBar(toolbar);
//設置左上角的圖標是否顯示
getSupportActionBar().setHomeButtonEnabled(true);
//給左上角圖標加上返回圖標
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
fabBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(rootCoordinaLayout, "floating", Snackbar.LENGTH_LONG).show();
}
});
//設置toolbar的title
collapsingToolbarLayout.setTitle("酒色");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.setting) {
Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();
return true;
} else if (id == R.id.message) {
Snackbar.make(toolbar, "消息", Snackbar.LENGTH_LONG).show();
return true;
} else if (id == R.id.about) {
Snackbar.make(toolbar, "關於", Snackbar.LENGTH_LONG).show();
return true;
}
return super.onOptionsItemSelected(item);
}
}
三.Snackbar
SnackBar是DesignSupportLibrary中的一個重要的控件,用於在界面下面提示一些關鍵信息,跟Toast不同的地方是SnackBar允許用戶向右滑動消除它,同時,也允許在SnackBar中設定一個Action,當用戶點擊了SnackBar裏面的按鈕的時候,可以進行一些操作.
如下代碼就可以彈出一個提示信息:
Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();
還可以設定一個action,比如:
Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG)
.setAction("todo", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
})
.show();
小夥伴們可以自己試試效果,這裏不再演示。
四.FloatingActionButton懸浮按鈕
可以通過src指定懸浮按鈕的圖標
android:src=http://www.ithao123.cn/"@mipmap/fbb"
可以通過setOnClickListener監聽懸浮按鈕的點擊事件:
fabBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(rootCoordinaLayout, "floating", Snackbar.LENGTH_LONG).show();
}
});
五.Toolbar右上角的按鈕
在res目錄下新建menu目錄,創建menu_main.xml
<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/message"
//設置優先級,值越大優先級越低
android:orderInCategory="10"
//標題
android:title="消息"
//always:總是顯示在界面上,never:不顯示在界面上ifRoom:如果有位置才顯示
app:showAsAction="never" />
<item
android:id="@+id/setting"
android:orderInCategory="20"
android:title="設置"
app:showAsAction="never" />
<item
android:id="@+id/about"
android:orderInCategory="30"
android:title="關於"
app:showAsAction="never" />
</menu>
相應的Activity中對應的代碼:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//導入菜單布局文件
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
//處理點擊事件
if (id == R.id.setting) {
Snackbar.make(toolbar, "設置", Snackbar.LENGTH_LONG).show();
return true;
} else if (id == R.id.message) {
Snackbar.make(toolbar, "消息", Snackbar.LENGTH_LONG).show();
return true;
} else if (id == R.id.about) {
Snackbar.make(toolbar, "關於", Snackbar.LENGTH_LONG).show();
return true;
}
return super.onOptionsItemSelected(item);
}
先說這麽多吧,源碼下載:
源碼下載
Tags:
文章來源: