在我的印象中,因为Android 5.0 的出现,让其在UI方面进一步的赶上了IOS,所以我把Design库,V4,V7包下的控件都会逐一进行讲解,本篇带来的是DrawerLayout的使用(虽然已经很成熟,但是当做回顾)
初始UI:
方式一:因为DrawerLayout又名抽屉布局,所以我们是可以直接拖拽的,至于拖拽方向,可以通过Start与End进行确定
方式二:通过DrawerLayout.openDrawer(GravityCompat.START)
进行事件显示(这里显示的也是我们最后的效果图(第一个方式最终显示的效果是一样的,只因表明拖拽的效果),有点丑请见谅> <)
注意点
- 首先我们要注意DrawerLayout为最外层布局
- 第一个视图为当前的主显示视图,我们一般都设置为Fragment
- DrawerLayout中的布局,我们可以自定义控件进行显示,也可以使用NavigationView进行处理(BottomNavigationView的使用与问题处理方案)
MainActivity
package com.example.DrawerLayout;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
private TextView mMainText;
private DrawerLayout mLayout;
private TextView mLayoutText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
//最外层的DrawerLayout布局
mLayout = (DrawerLayout) findViewById(R.id.layout);
//主页面显示的按键
mMainText = (TextView) findViewById(R.id.tv_mian);
//DrawerLayout的内部事件
mLayoutText = (TextView) findViewById(R.id.tv_layout);
//主页面的点击事件
mMainText.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mLayout.openDrawer(GravityCompat.START);
}
});
//DrawerLayout内部的点击事件
mLayoutText.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "这里是DrawerLayout的内部事件", 0).show();
}
});
}
}
activity_main
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/tv_mian"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="点击之后出现我们的DrawerLayout布局" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:text="DrawerLayout布局"
android:textColor="#f00" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:text="DrawerLayout布局"
android:textColor="#f00" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>