DrawerLayout實現側滑仿QQ介面
阿新 • • 發佈:2019-01-27
簡介
可以說drawerLayout是因為第三方控制元件如MenuDrawer等的出現之後,google借鑑而出現的產物。
drawerLayout分為側邊選單和主內容區兩部分,側邊選單可以根據手勢展開與隱藏(drawerLayout自身特性),
主內容區的內容可以隨著選單的點選而變化(這需要使用者自己實現)。
1.編寫Activity的佈局檔案
根佈局使用android.support.v4.widget.DrawerLayout
然後其內部第一個View為內容區域,第二個View為左側選單,第三個View為右側側滑選單,當前第三個是可選的。
第一個View的寬高應當設定為match_parent,當然了,這也理所當然。
第二、三個View需要設定Android:layout_gravity=”left”,和android:layout_gravity=”right”且一搬高度設定為match_parent,
寬度為固定值,即側滑選單的寬度(寬度你寫match_parent也行,但是不會全部覆蓋)。
首先是mainactivity_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/mdrawerLayout"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context ="com.soft.qianyu.myqqdddreawerlayout.MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#60f227"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="35sp"
android:text="我是內容介面"/>
<Button
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="開啟側滑選單"
/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#4b91f9"
android:id="@+id/left"
android:layout_width="match_parent"
android:layout_gravity="left"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="35sp"
android:text="我是側滑選單"/>
<Button
android:id="@+id/bt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="返回"
/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
寫完佈局之後,你就可以實現側滑了!但是此時的側滑並不是將內容介面擠到右側的側滑,而是覆蓋在內容介面上面的側滑。此時若還要實現像QQ那樣的側滑,則還需要以下程式碼。
2,在程式碼中為相應的控制元件新增事件監聽器
public class MainActivity extends Activity implements View.OnClickListener{
//1)宣告DrawerLayout變數
DrawerLayout drawerLayout;
//宣告內容頁面變數
LinearLayout contentView ;
//宣告按鈕
Button bt1,bt2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化
init();
}
private void init() {
//2)例項化DrawerLayout控制元件
drawerLayout = (DrawerLayout) findViewById(R.id.mdrawerLayout);
//例項化按鈕並設定點選監聽事件
findViewById(R.id.bt1).setOnClickListener(MainActivity.this);
findViewById(R.id.bt2).setOnClickListener(MainActivity.this);
//3)為DrawerLayout控制元件新增監聽器
drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
//當側滑選單正在滑動時觸發的方法
/**
第一個引數:正在滑動的側滑選單
第二個引數:選單滑動的寬度的百分比
**/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
//獲得側滑選單的寬度
int drawerViewWidth = drawerView.getMeasuredWidth();
//根據滑動百分比計算內容部分應該向右邊移動的距離
int marginLeft = (int)(drawerViewWidth * slideOffset) ;
//獲得內容部分的View物件(內容View物件是第一個,所以是0)
contentView = (LinearLayout) drawerLayout.getChildAt(0);
//修改內容部分的左邊距
contentView.setLeft(marginLeft);
}
});
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.bt1:
drawerLayout.openDrawer(Gravity.LEFT);
break;
case R.id.bt2:
drawerLayout.closeDrawers();
break;
}
}
}