之前一直没有写侧滑菜单的实现方法,今天计划补上。手机开发中,往往存在很多功能没处放的问题。我们可能会把功能放入一个菜单列表,但现在一种流行的做法是侧滑菜单。侧滑菜单的做法其实是多种多样的,这里介绍一种我们常用的方法,也是Android自身为我们提供的,那就是DrawerLayout。

1.DrawerLayout相关API

  • setDrawerShadow:设置主页面的渐变阴影图形。
  • addDrawerListener:添加抽屉面板的拉出监听器。需实现监听器DrawerListener的4个方法。
    onDrawerSlide抽屉面板滑动时触发
    onDrawerOpened抽屉面板打开时触发
    onDrawerClosed抽屉面板关闭时触发
    onDrawerStateChanged抽屉面板的状态发生变化时触发
  • removeDrawerListener:移除抽屉面板的拉出监听器。
  • closeDrawers:关闭所有抽屉面板
  • openDrawer:打开指定抽屉面板
  • closeDrawer:关闭指定抽屉面板
  • isDrawerOpen:判断指定抽屉面板是否打开

2.DrawerLayout使用示例

activity_main.xml

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_drawer_left"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="打开左边侧滑"
                android:textColor="@color/black"
                android:textSize="17sp" />

            <Button
                android:id="@+id/btn_drawer_right"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="打开右边侧滑"
                android:textColor="@color/black"
                android:textSize="17sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/tv_drawer_center"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="top|center"
            android:paddingTop="30dp"
            android:text="这里是首页"
            android:textColor="@color/black"
            android:textSize="17sp" />
    </LinearLayout>

    <!-- 这是位于抽屉布局左边的侧滑列表视图,layout_gravity属性设定了它的对齐方式 -->
    <ListView
        android:id="@+id/lv_drawer_left"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#ffdd99" />

    <!-- 这是位于抽屉布局右边的侧滑列表视图,layout_gravity属性设定了它的对齐方式 -->
    <ListView
        android:id="@+id/lv_drawer_right"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#99ffdd" />
</androidx.drawerlayout.widget.DrawerLayout>

item_select.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    style="?android:attr/spinnerItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:ellipsize="marquee"
    android:gravity="center"
    android:textAlignment="inherit"
    android:textSize="17sp"
    android:textColor="@color/black" />

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private final static String TAG = "DrawerLayoutActivity";
    private DrawerLayout dl_layout; // 声明一个抽屉布局对象
    private Button btn_drawer_left;
    private Button btn_drawer_right;
    private TextView tv_drawer_center;
    private ListView lv_drawer_left; // 声明左侧菜单的列表视图对象
    private ListView lv_drawer_right; // 声明右侧菜单的列表视图对象
    private String[] titleArray = {"首页", "新闻", "娱乐", "博客", "论坛"}; // 左侧菜单项的标题数组
    private String[] settingArray = {"我的", "设置", "关于"}; // 右侧菜单项的标题数组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 从布局文件中获取名叫dl_layout的抽屉布局
        dl_layout = findViewById(R.id.dl_layout);
        // 给抽屉布局设置侧滑监听器
        dl_layout.addDrawerListener(new SlidingListener());
        btn_drawer_left = findViewById(R.id.btn_drawer_left);
        btn_drawer_right = findViewById(R.id.btn_drawer_right);
        tv_drawer_center = findViewById(R.id.tv_drawer_center);
        btn_drawer_left.setOnClickListener(this);
        btn_drawer_right.setOnClickListener(this);
        initListDrawer(); // 初始化侧滑的菜单列表
    }

    // 初始化侧滑的菜单列表
    private void initListDrawer() {
        // 下面初始化左侧菜单的列表视图
        lv_drawer_left = findViewById(R.id.lv_drawer_left);
        ArrayAdapter<String> left_adapter = new ArrayAdapter<String>(this,
                R.layout.item_select, titleArray);
        lv_drawer_left.setAdapter(left_adapter);
        lv_drawer_left.setOnItemClickListener(new LeftListListener());
        // 下面初始化右侧菜单的列表视图
        lv_drawer_right = findViewById(R.id.lv_drawer_right);
        ArrayAdapter<String> right_adapter = new ArrayAdapter<String>(this,
                R.layout.item_select, settingArray);
        lv_drawer_right.setAdapter(right_adapter);
        lv_drawer_right.setOnItemClickListener(new RightListListener());
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn_drawer_left) {
            if (dl_layout.isDrawerOpen(lv_drawer_left)) { // 左侧菜单列表已打开
                dl_layout.closeDrawer(lv_drawer_left); // 关闭左侧抽屉
            } else { // 左侧菜单列表未打开
                dl_layout.openDrawer(lv_drawer_left); // 打开左侧抽屉
            }
        } else if (v.getId() == R.id.btn_drawer_right) {
            if (dl_layout.isDrawerOpen(lv_drawer_right)) { // 右侧菜单列表已打开
                dl_layout.closeDrawer(lv_drawer_right); // 关闭右侧抽屉
            } else { // 右侧菜单列表未打开
                dl_layout.openDrawer(lv_drawer_right); // 打开右侧抽屉
            }
        }
    }

    // 定义一个左侧菜单列表的点击监听器
    private class LeftListListener implements AdapterView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String text = titleArray[position];
            tv_drawer_center.setText("这里是" + text + "页面");
            dl_layout.closeDrawers(); // 关闭所有抽屉
        }
    }

    // 定义一个右侧菜单列表的点击监听器
    private class RightListListener implements AdapterView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String text = settingArray[position];
            tv_drawer_center.setText("这里是" + text + "页面");
            dl_layout.closeDrawers(); // 关闭所有抽屉
        }
    }

    // 定义一个抽屉布局的侧滑监听器
    private class SlidingListener implements DrawerLayout.DrawerListener {
        // 在拉出抽屉的过程中触发
        public void onDrawerSlide(View drawerView, float slideOffset) {}

        // 在侧滑抽屉打开后触发
        public void onDrawerOpened(View drawerView) {
            if (drawerView.getId() == R.id.lv_drawer_left) {
                btn_drawer_left.setText("关闭左边侧滑");
            } else {
                btn_drawer_right.setText("关闭右边侧滑");
            }
        }

        // 在侧滑抽屉关闭后触发
        public void onDrawerClosed(View drawerView) {
            if (drawerView.getId() == R.id.lv_drawer_left) {
                btn_drawer_left.setText("打开左边侧滑");
            } else {
                btn_drawer_right.setText("打开右边侧滑");
            }
        }

        // 在侧滑状态变更时触发
        public void onDrawerStateChanged(int paramInt) {}
    }
}

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐