以前是有民間的效果:SliddingMenu
側滑兩種效果:
1.蓋在整個頁面上面;
2.在Toolbar下面。
MaterialDesign的側滑
在MD提出來以後,谷歌就收錄並改變了很多開源項目,放到API及support包裏面。實現方式:
1.DrawerLayout 抽屜容器
來自support-v4包裏面的(android.support.v4.widget),相當於一個自定義容器 extends ViewGroup ,可以看出是一個有側滑效果的幀佈局,包括兩個部分:
(1)內容佈局;
(2)側滑出來的菜單佈局
側滑部分設置:android:layout_gravity=”start|end”(start:從左邊滑出、end表示右邊)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 內容部分的佈局 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0"
android:text="我是內容部分" />
</LinearLayout>
<!-- 側滑菜單左側部分 -->
<LinearLayout
android:layout_width="200dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:background="#0f0"
android:orientation="vertical"
android:paddingTop="50dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item3" />
</LinearLayout>
<!-- 側滑菜單右側部分 -->
<LinearLayout
android:layout_width="200dp"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:background="#0f0"
android:orientation="vertical"
android:paddingTop="50dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item3" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
Activity:
public class SildingMenuActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawerlayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_slidingmenu);
toolbar = (Toolbar) findViewById(R.id.toolbar);
// 將actionBar替換成toolbar
setSupportActionBar(toolbar);
drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,
drawerlayout, toolbar, R.string.drawer_open,
R.string.drawer_close);
// 同步狀態
drawerToggle.syncState();
// 給側滑控件設置監聽
// drawerlayout.setDrawerListener(drawerToggle);
drawerlayout.setDrawerListener(new DrawerListener() {
@Override
public void onDrawerStateChanged(int newState) {
// 狀態發生改變
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
// 滑動的過程當中不斷地回調 slideOffset:0~1
View content = drawerlayout.getChildAt(0);
View menu = drawerView;
float scale = 1 - slideOffset;// 1~0
float leftScale = (float) (1 - 0.3 * scale);
float rightScale = (float) (0.7f + 0.3 * scale);// 0.7~1
menu.setScaleX(leftScale);// 1~0.7
menu.setScaleY(leftScale);// 1~0.7
content.setScaleX(rightScale);
content.setScaleY(rightScale);
content.setTranslationX(menu.getMeasuredWidth() * (1 - scale));// 0~width
}
@Override
public void onDrawerOpened(View drawerView) {
// 打開
}
@Override
public void onDrawerClosed(View drawerView) {
// 關閉
}
});
}
}
2.NavigationView
是谷歌在側滑的MaterialDesign的一種規範,所以提出了一個新的控件,用來規範側滑的基本樣式。
DrawerLayout+ NavigationView結合使用
注意:
使用NavigationView,需要依賴項目:Design項目。
同時還需要依賴recyclerView項目和CardView項目!!!!
(1)佈局:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.lsn8_materialdesign_slidingmenu_navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.lsn8_materialdesign_slidingmenu_navigationview.MainActivity" >
<!-- 內容部分 -->
<FrameLayout
android:id="@+id/fl"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<!-- 菜單部分 -->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:background="@android:color/darker_gray"
app:headerLayout="@layout/navigation_headerlayout"
app:menu="@menu/navigation_menu" />
</android.support.v4.widget.DrawerLayout>
(2)activity:
public class NavigationViewActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation);
}
}