天天看點
傳回

陪伴了你N年的控件等你來看—DrawerLayout

前言

Hi，又見面啦，昨天給大家介紹了關于微信的一個控件，那麼今天給大家介紹的是一個“陪伴”了我們很多年且常用又實用的控件。闊能花粉們會很疑惑，我隻是個技術小白呀，怎麼它就陪伴了我好多年了？那麼就趕緊來看看今天的主角—

DrawerLayout

吧~

簡介及示例

DrawerLayout

被稱為滑動菜單，就是将一些菜單選項隐藏起來，而不是放在主螢幕上，通過滑動的方式将菜單顯示出來。這種方式即節省了螢幕空間，又實作了好看的動畫效果，比如我們一直在用的扣扣的左側菜單效果~

DrawerLayout

是

SupportLibrary

包中實作了側滑菜單效果的控件。

在之前的應用中，實作側滑菜單功能大多是通過開源庫SlidingMenu來實作，後來谷歌在V4包中添加了

DrawerLayout

來實作這個功能，完全可以替代

SlidingMenu

。

先上一張效果圖：

陪伴了你N年的控件等你來看—DrawerLayout

1.基本使用

對于

DrawerLayout

來說，從它的名字就可以看出來它是一個布局，繼承自

ViewGroup

，在布局中允許放入兩個直接子控件，第一個子控件為主螢幕中顯示的内容，第二個子控件是側滑菜單中顯示的内容。布局代碼如下：

<?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:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">
    <!--主螢幕中顯示的内容-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:orientation="vertical">
        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:padding="20dp"            android:text="主螢幕内容"            android:textSize="20dp" />    </LinearLayout>
    <!--側滑菜單中顯示的内容,必須設定layout_gravity屬性,表示側滑方向-->    <TextView        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="left"        android:background="#009688"        android:gravity="center"        android:text="側滑菜單内容"        android:textColor="#FFFFFF"        android:textSize="20sp" /></android.support.v4.widget.DrawerLayout>

複制

陪伴了你N年的控件等你來看—DrawerLayout

上圖代碼中，最外層控件使用了

DrawerLayout

，其包裹了兩個子控件，我們可以根據實際項目需求修改成自己的布局樣式，自行定義。

注意：側滑菜單部分的布局必須設定

layout_gravity

屬性，表示側滑菜單是在左邊（left）還是右邊（right）。

2.代碼控制及監聽

上述示例中，隻有在螢幕左邊緣處進行拖拽，才可顯示側滑菜單，有時使用者并不知道有此功能，這就需要我們通過按鈕的點選操作，控制

DrawerLayout

的顯示或隐藏。

DrawerLayout mDrawerLayout = findViewById(R.id.drawerLayout);//控制DrawerLayout的顯示mDrawerLayout.openDrawer(GravityCompat.START);//控制DrawerLayout的隐藏mDrawerLayout.closeDrawer(GravityCompat.START);

複制

并且，我們還可以通過

addDrawerListener()

對

DrawerLayout

的顯示狀态進行監聽。

mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {     @Override    public void onDrawerSlide(@NonNull View view, float v) {        Log.e(TAG, "onDrawerSlide: " + "滑動過程中的監聽");       }
    @Override       public void onDrawerOpened(@NonNull View view) {        Log.e(TAG, "onDrawerOpened: " + "滑動開始的監聽");    }
    @Override    public void onDrawerClosed(@NonNull View view) {           Log.e(TAG, "onDrawerClosed: " + "滑動結束的監聽");    }
    @Override    public void onDrawerStateChanged(int i) {        Log.e(TAG, "onDrawerStateChanged: " + "滑動狀态改變的監聽");    }});

複制

3.綜合示例

下面通過一個與

Toolbar

和

NavigationView

結合的示例，來介紹

DrawerLayout

。

1.首先引入design包依賴。

implementation 'com.android.support:design:28.0.0'

複制

2.在

styles.xml

中設定

NoActionBar

主題。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

複制

3.設定側滑菜單布局

Head

和

Menu

。

先在

layout

檔案夾下建立

head.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:gravity="center"    android:orientation="vertical">
    <ImageView        android:id="@+id/iv_head"        android:layout_width="70dp"        android:layout_height="70dp"        android:layout_marginTop="40dp"        android:src="@mipmap/ic_launcher_round" />
    <TextView        android:id="@+id/tv_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="24dp"        android:text="下碼看花"        android:textSize="20sp" />
    <TextView        android:id="@+id/tv_desc"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="18dp"        android:layout_marginTop="12dp"        android:paddingLeft="20dp"        android:paddingRight="20dp"        android:text="下碼看花，下碼看花下碼看花"        android:textSize="16sp" /></LinearLayout>

複制

再在

res

目錄下建立一個檔案夾

menu

，在menu目錄下建立

drawer_menu.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/android"            android:icon="@mipmap/ic_launcher"            android:title="Android" />        <item            android:id="@+id/ios"            android:icon="@mipmap/ic_launcher"            android:title="IOS" />        <item            android:id="@+id/web"            android:icon="@mipmap/ic_launcher"            android:title="Web" />        <item            android:id="@+id/java"            android:icon="@mipmap/ic_launcher"            android:title="Java" />        <item            android:id="@+id/php"            android:icon="@mipmap/ic_launcher"            android:title="PHP" />    </group></menu>

複制

android:checkableBehavior="single"

表示item的選項為單選。

4.在代碼中控制，完成代碼如下。

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;    private Toolbar mToolbar;    private NavigationView mNavigationView;
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
        mDrawerLayout = findViewById(R.id.drawerLayout);        mToolbar = findViewById(R.id.toolbar);        mNavigationView = findViewById(R.id.navigationView);
        //傳入ToolBar執行個體        setSupportActionBar(mToolbar);        //得到ActionBar執行個體        ActionBar actionBar = getSupportActionBar();        if (actionBar != null) {            //顯示導航按鈕            actionBar.setDisplayHomeAsUpEnabled(true);            //設定導航按鈕圖檔            actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu_top);        }
        //設定Toolbar的導航按鈕監聽事件        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                //顯示側滑菜單                mDrawerLayout.openDrawer(GravityCompat.START);            }        });
        //設定NavigationView條目點選事件        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {                //關閉側滑菜單                mDrawerLayout.closeDrawers();                return true;            }        });
        //擷取NavigationView的HeadView        View headerView = mNavigationView.getHeaderView(0);        ImageView ivHead = headerView.findViewById(R.id.iv_head);        ivHead.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(MainActivity.this, "這是頭像", Toast.LENGTH_SHORT).show();            }        });    }}

複制

<?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/drawerLayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">
    <LinearLayout        android:id="@+id/main_layout"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">
        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?android:attr/actionBarSize"            android:background="@color/colorPrimary"            app:title="DrawerLayout示例"            app:titleTextColor="#FFFFFF" />
        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="主螢幕内容"            android:textSize="20sp" />    </LinearLayout>
    <android.support.design.widget.NavigationView        android:id="@+id/navigationView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="left"        android:fitsSystemWindows="true"        app:headerLayout="@layout/head"        app:menu="@menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>

複制

效果如圖：

陪伴了你N年的控件等你來看—DrawerLayout

結語

我們目前已經給大家講了很多實戰中會用到的控件了，比如電商類型、微信、扣扣，那麼各位花粉們是不是已經有了好多demo存貨啦，希望各位花費自我發揮一哈，把我們之前講的内容都融合到一個項目之中~

以上就是今天介紹的

DrawerLayout

的全部内容，

DrawerLayout

還有很多有意思的擴充功能，讓我們根據自己的項目進行配置，趕快在項目中使用吧！

上一篇: 歌爾股份高層人事變動，知情人士稱總裁姜龍卸任系個人身體原因
下一篇: Qt官方示例-QML Axes