通用抽屜布局（DrawerLayout）
效果圖
布局
布局文件
新建一個tool_bar.xml
之所以使用另外新建布局文件靠柑，是因為考慮到toolbar在很多Activity可能會復(fù)用奇唤。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="enterAlways|scroll">
</android.support.v7.widget.Toolbar>
新建一個drawer.xml
新建一個drawer.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:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="this is content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="option1"
android:text="選項1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="option2"
android:text="選項2" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
注意，一個DrawerLayout里面需要有兩個ViewGroup港谊，其中帶有
android:layout_gravity="start"的將會是左邊側(cè)滑的菜單贾漏。
activity_main.xml
由于上面兩個布局都寫好了，所以我們就直接包含進(jìn)來就可以了具伍。
<?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">
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar" />
<include
android:id="@+id/drawerLayout"
layout="@layout/drawer" />
</LinearLayout>
菜單文件
<?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">
<item
android:icon="@mipmap/ic_launcher"
android:title="選項1"
app:showAsAction="always" />
<item android:title="選項2" />
<item android:title="選項3" />
<item android:title="選項4" />
<item
android:title="選項5"
app:showAsAction="always" />
</menu>
app:showAsAction表示該菜單項會在toolbar上顯示
MainActivity.java
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
setupDraerLayuout();
}
private void setupDraerLayuout() {
toolbar.setTitle("");
toolbar.setTitleTextColor(Color.parseColor("#ffffff"));
setSupportActionBar(toolbar);
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
}
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
}
};
drawerToggle.syncState();
drawerLayout.setDrawerListener(drawerToggle);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public void option1(View v) {
Intent intent = new Intent();
intent.setClass(this, ToolbarHideActivity.class);
startActivity(intent);
}
public void option2(View v) {
Intent intent = new Intent();
intent.setClass(this, CollaspingLayoutActivity.class);
startActivity(intent);
}
}
較為關(guān)鍵的應(yīng)該就是下面的代碼
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
}
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
}
};
drawerToggle.syncState();
drawerLayout.setDrawerListener(drawerToggle);
由于
ActionBarDrawerToggle自身實現(xiàn)DrawerLayout.DrawerListener接口翅雏，所以我們只需要重寫他的一些接口方法，就可以直接設(shè)置為drawerLayout的監(jiān)聽器了人芽。
導(dǎo)航抽屜布局（DrawerLayout）
效果圖
布局
這種布局跟上面的布局差不多望几，只是左邊的側(cè)滑欄改變了。我們不使用普通的
LinearLayout啼肩，而是使用NavigationView代替橄妆。這讓我們的代碼更加地優(yōu)雅衙伶。
所以我們只需要在上面的代碼作修改
activity_main_drawer.xml
左邊的選項是通過菜單的形式展示的
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/option1"
android:icon="@mipmap/ic_launcher"
android:title="選項1" />
<item
android:id="@+id/option2"
android:icon="@mipmap/ic_launcher"
android:title="選項2" />
</group>
<item android:title="分組2">
<menu>
<item
android:id="@+id/option3"
android:icon="@mipmap/ic_launcher"
android:title="選項3" />
<item
android:id="@+id/option4"
android:icon="@mipmap/ic_launcher"
android:title="選項4" />
</menu>
</item>
</menu>
drawer.xml
我們只需要把原來的
LinearLyaout改成NavigationView就可以了祈坠。
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="this is content" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/activity_main_drawer"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
MainActivity.java
至于代碼害碾，差不多就只有設(shè)置菜單點擊事件的代碼了
navigationView.setNavigationItemSelectedListener(this);
可選
因為我們的效果是帶有圖片的，這一步可以為左邊的側(cè)滑欄添加
headerView赦拘。
header_view.xml
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/header" />
</LinearLayout>
MainActivity.java
NavigationView navigationView = (NavigationView) findViewById(R.id.nav);
navigationView.addHeaderView(getLayoutInflater().inflate(R.layout.header_view, null, false));
上述代碼就可以為
NavigationView添加一個headerView了慌随。
普通Toolbar自動隱藏布局（視差滾動視圖）
效果圖
布局
這是純布局的代碼，那就直接上代碼了躺同。
布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/text" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
ToolbarHideActivity.java
public class ToolbarHideActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar_hide);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("新聞");
setSupportActionBar(toolbar);
}
}
帶圖片的Toolbar自動隱藏布局（視差滾動視圖）
效果圖
布局
這個基本也都是純布局的代碼
activity_collapsing_layout.xml
<?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:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/header"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<include layout="@layout/tool_bar" />
</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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/text" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fac"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="6dp"
android:src="@mipmap/ic_launcher"
app:backgroundTint="@color/colorPrimary"
app:layout_anchor="@id/toolbar_layout"
app:layout_anchorGravity="bottom|center"
app:pressedTranslationZ="16dp"
app:rippleColor="@color/colorPrimaryDark" />
</android.support.design.widget.CoordinatorLayout>
-
app:layout_scrollFlags
- scroll: 當(dāng)滾動的時候開始移出屏幕
- enterAlways: 一旦向上滾動這個view就可見阁猜。
- enterAlwaysCollapsed: 顧名思義，這個flag定義的是何時進(jìn)入（已經(jīng)消失之后何時再次顯示）蹋艺。假設(shè)你定義了一個最小高度（minHeight）同時enterAlways也定義了剃袍，那么view將在到達(dá)這個最小高度的時候開始顯示，并且從這個時候開始慢慢展開捎谨，當(dāng)滾動到頂部的時候展開完民效。
- exitUntilCollapsed: 同樣顧名思義，這個flag時定義何時退出涛救，當(dāng)你定義了一個minHeight畏邢，這個view將在滾動到達(dá)這個最小高度的時候消失。
app:contentScrim: 當(dāng)內(nèi)容收起來的時候检吆，顯示的背景顏色舒萎。
appbar_scrolling_view_behavior: 改字符串其實是一個class的完成名字，可以直接被使用蹭沛。這個Behavior的class是真正控制滾動時候View的滾動行為.我們也可以繼承Behavior這個class去實現(xiàn)特有的滾動行為.
CollapsingLayoutActivity.java
public class CollapsingLayoutActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collapsing_layout);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
}
}
