自定义控件：SlidingMenu，侧边栏，侧滑菜单

最新推荐文章于 2024-09-08 11:15:00 发布

Jack-Chan

最新推荐文章于 2024-09-08 11:15:00 发布

阅读量3.4k

点赞数 1

分类专栏： Android自定义控件自定义控件文章标签：自定义控件自定义view 自定义widget 侧边栏 slidemenu

本文链接：https://blog.csdn.net/axi295309066/article/details/55509609

版权

本文介绍了如何自定义一个具有侧边栏效果的控件，详细讲解了布局界面UI设计，包括MainActivity.java和slidmenu_left.xml等文件的代码实现。在业务逻辑部分，通过MainActivity.java展示了主界面的交互逻辑。最后，利用ViewDragHelper实现SlidingMenu的功能，并提供了项目源码链接。

摘要由CSDN通过智能技术生成

1. 项目概述

观察如图2-4 的完整项目中的效果界面，点击标题栏的左上角会弹出侧边栏，再次点击时会关闭侧边栏，这种效果在很多手机应用中使用，因此，我们有必要学会如何自定义一个具有侧边栏效果的控件。

2. 布局界面UI

在本章中，主界面为MainActivity.java，具体代码如文件所示：res/layout/activity_main.xml

<RelativeLayout 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" >
    <com.itheima.slidmenudemo.view.SlidMenu
        android:id="@+id/slidmenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <!-- 当前为左边菜单界面索引为0 -->
        <include layout="@layout/slidmenu_left" />
        <!-- 当前为主界面索引为1 -->
        <include layout="@layout/slidmenu_main"/>
    </com.itheima.slidmenudemo.view.SlidMenu>
</RelativeLayout>

其中，slidmenu_left.xml 是侧边栏的布局文件，具体代码如文件【2-7】所示：【文件2-7】res/layout/slidmenu_left.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="240dp"
            android:layout_height="match_parent" >
    <LinearLayout
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/menu_bg" >
        <ImageButton
            style="@style/tab_style"
            android:text="新闻"
            android:background="#33000000"
            android:drawableLeft="@drawable/tab_news" />
        <ImageButton
            style="@style/tab_style"
            android:text="订阅"
            android:drawableLeft="@drawable/tab_read" />
        <TextView
            style="@style/tab_style"
            android:text="本地"
            android:drawableLeft="@drawable/tab_local" />

        <TextView
            style="@style/tab_style"
            android:text="跟帖"
            android:drawableLeft="@drawable/tab_ties" />
        <TextView
            style="@style/tab_style"
            android:text="图片"
            android:drawableLeft="@drawable/tab_pics" />
        <TextView
            style="@style/tab_style"
            android:text="话题"
            android:drawableLeft="@drawable/tab_ugc" />
        <TextView
            style="@style/tab_style"
            android:text="投票"
            android:drawableLeft="@drawable/tab_vote" />
        <TextView
            style="@style/tab_style"
            android:text="聚合阅读"
            android:drawableLeft="@drawable/tab_focus" />
    </LinearLayout>
</ScrollView>

上面的代码中我们在styles.xml 文件中定义了一个样式tab_style，它是用来修饰左边侧栏中每一个条目，详细代码如下所示。

<!-- tab 菜单界面的样式-->
<style name="tab_style">
    <item name="android:padding">5dp</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:drawablePadding">5dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android</