安卓第八天---侧滑菜单的实现

最新推荐文章于 2024-04-27 14:28:41 发布

Autumn_leavess

最新推荐文章于 2024-04-27 14:28:41 发布

阅读量261

点赞数

分类专栏： Android 文章标签： Android 侧滑菜单多布局

本文链接：https://blog.csdn.net/Autumn_leavess/article/details/84207867

版权

Android 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客篇幅有点长,内容也有很多重复,但主要是担心我后面的增加ListView的一些更改会让小白找不到更改的地方,所以重复的代码有很多,多多体谅,但是这里的多布局是挺实用的哟 !
在这里插入图片描述

首先这里是左右两边只有两个简单的一个侧滑菜单,并没有特殊的效果,但也是将滑动菜单进行了引入,这里,最重要的就是布局的写法了:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/drawerlayout_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent">


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <Button
        android:id="@+id/left_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="左边" />

    <Button
        android:id="@+id/right_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/left_button"
        android:text="右边" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="180dp"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:layout_gravity="start"
    android:gravity="start"
    android:paddingTop="50dp">
    <TextView
        android:text="左边测试栏"
        android:gravity="left"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/right_drawer"
    android:layout_width="180dp"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:layout_gravity="end"
    android:paddingTop="50dp">
    <TextView
        android:text="右边测试栏"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</RelativeLayout>

</android.support.v4.widget.DrawerLayout>

这里描出了侧滑菜单的主界面.
当然上面的actionbar也是需要做一定的更改,不是系统原有的actionbar

<android.support.v7.widget.Toolbar android:id="@+id/layout_toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">

</android.support.v7.widget.Toolbar>

这里也单独写一个不觉文件,然后,我们就可以到mian_activity.xml中将这两个布局引用进来,当然也可以将这两个布局同时写在布局里面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
  android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
//将布局引入
<include layout="@layout/layout_toolbar"/>
<include layout="@layout/activity_drawerlayout_main"/>
</LinearLayout>

然后就是主函数里面对布局控件的控制了

import android.graphics.Color;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
private ActionBarDrawerToggle actionBarDrawerToggle;//侧滑菜单状态监听器
private DrawerLayout drawerLayout;// DrawerLayout组件
private RelativeLayout left_drawerlayout,right_drawerlayout;//左右侧滑菜单

private Button left_button,right_button;


private Toolbar toolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
    initEvtent();

}
public void  init(){
    toolbar = findViewById(R.id.layout_toolbar);
    toolbar.setTitle("HelloWorld");
    toolbar.setTitleMargin(0,15,75,15);
    setSupportActionBar(toolbar);
    drawerLayout = findViewById(R.id.drawerlayout_main);

    //设置菜单内容之外其他区域的背景色
    drawerLayout.setScrimColor(Color.TRANSPARENT);

    left_drawerlayout = findViewById(R.id.left_drawer);
    right_drawerlayout = findViewById(R.id.right_drawer);
    left_button = findViewById(R.id.left_button);
    right_button = findViewById(R.id.right_button);
    left_button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (drawerLayout.isDrawerOpen(left_drawerlayout)){
                drawerLayout.closeDrawer(left_drawerlayout);
            }else{
                drawerLayout.openDrawer(left_drawerlayout);
            }
        }
    });

    right_button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (drawerLayout.isDrawerOpen(right_drawerlayout)){
                drawerLayout.closeDrawer(right_drawerlayout);
            }else{
                drawerLayout.openDrawer(right_drawerlayout);
            }
        }
    });

}

//设置监听开关
public void initEvtent(){
    actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.open,R.string.close){
        //菜单打开
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
        //菜单关闭
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }
    };
    drawerLayout.addDrawerListener(actionBarDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    actionBarDrawerToggle.syncState();

}
}

当然需要去掉系统自带的actionbar,首先在style.xml中设置

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

        <item name="android:windowActionBar">false</item>

        <item name="android:windowNoTitle">true</item>

</style>

然后在manifest.xml配置文件中设置属性android:theme="@style/NoActionBar"
在string.xml文件中添加需要的字段

  <string name="open">Open</string>
  <string name="close">Close</string>

然后这个界面就可以成功的运行了!
到这里,我们也肯定要做到侧滑菜单能够进行一些点击事件,所以在这里,先贴出一个做好的图片,当然也是基于上面的例子稍微做了一点更改
在这里插入图片描述

首先,将左侧的菜单栏更改为一个ListView控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerlayout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <Button
            android:id="@+id/left_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="左边" />

        <Button
            android:id="@+id/right_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toRightOf="@id/left_button"
            android:text="右边" />
    </RelativeLayout>

    <!--<RelativeLayout
        android:id="@+id/left_drawer"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:layout_gravity="start"
        android:gravity="start"
        android:paddingTop="50dp">
        <TextView
            android:text="左边测试栏"
            android:gravity="left"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>-->
//将上面的RelativeLayout注释掉
    <ListView
        android:id="@+id/left_list"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:padding="3dp"
        android:paddingTop="10dp"></ListView>

    <RelativeLayout
        android:id="@+id/right_drawer"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="@color/colorPrimary"
        android:paddingTop="50dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="右边测试栏" />


    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

由于这个策划菜单分成一个头像区域以及下面的列表,所以我们在这里可以给ListView设置两个item,当position=0的时候我们在那一栏设置为头像栏,首先,设置头像所在区域的item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/menu_head"
    android:scaleType="fitXY"
    android:layout_width="100dp"
    android:layout_height="100dp" />
<TextView
    android:id="@+id/user_name"
    android:gravity="center"
    android:layout_width="100dp"
    android:layout_height="wrap_content" />
</LinearLayout>

然后设置另外一个item

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/item_style"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<ImageView
    android:id="@+id/menu_icon"
    android:scaleType="fitXY"
    android:layout_width="40dp"
    android:layout_height="40dp" />
<TextView
    android:id="@+id/menu_title"
    android:layout_toRightOf="@id/menu_head"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="40dp" />

</RelativeLayout>

我们有了两个item后,为ListView设置适配器
package com.leaves.autum.drawwelayoutdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

class MenuItem{
private int menuIcon;
private String menuTitle;

public MenuItem(int menuIcon, String menuTitle) {
    this.menuIcon = menuIcon;
    this.menuTitle = menuTitle;
}

public int getMenuIcon() {
    return menuIcon;
}

public void setMenuIcon(int menuIcon) {
    this.menuIcon = menuIcon;
}

public String getMenuTitle() {
    return menuTitle;
}

public void setMenuTitle(String menuTitle) {
    this.menuTitle = menuTitle;
}

@Override
public String toString() {
    return "MenuItem{" +
            "menuIcon=" + menuIcon +
            ", menuTitle='" + menuTitle + '\'' +
            '}';
}
}

public class LeftListAdapter extends BaseAdapter {

List<MenuItem> menuItems = new ArrayList<>();
Context context;

public LeftListAdapter(Context context) {
    this.context = context;
    menuItems.add(new MenuItem(R.mipmap.head0,"HelloWorld"));
    menuItems.add(new MenuItem(R.drawable.find,"发现"));
    menuItems.add(new MenuItem(R.drawable.offline,"离线"));
    menuItems.add(new MenuItem(R.drawable.recommend,"推荐"));
    menuItems.add(new MenuItem(R.drawable.search,"搜索"));
    menuItems.add(new MenuItem(R.drawable.station,"站点"));
    menuItems.add(new MenuItem(R.drawable.theme,"主题"));
    menuItems.add(new MenuItem(R.drawable.setting,"设置"));
}

@Override
public int getCount() {
    return menuItems.size();
}

@Override
public Object getItem(int position) {
    return menuItems.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View view = convertView;
    ImageView imageView = null;
    TextView textView = null;
    if (view == null){
    //这里是为不同类型的布局做判断,现在只是单一的设置为position为0的时候设置为头像布局,其他设置为普通布局
    //之后再实际项目的时候可以判断获取的json数据中的特定的值,如果有需要,可以根据特定的值来设置特定的布局
        if (position == 0){
            view = LayoutInflater.from(context).inflate(R.layout.head_item,parent,false);
            imageView = view.findViewById(R.id.menu_head);
            textView = view.findViewById(R.id.user_name);
            imageView.setImageResource(menuItems.get(position).getMenuIcon());
            textView.setText(menuItems.get(position).getMenuTitle());
        }else{
            view = LayoutInflater.from(context).inflate(R.layout.menu_item,parent,false);
            imageView = view.findViewById(R.id.menu_icon);
            textView = view.findViewById(R.id.menu_title);
            imageView.setImageResource(menuItems.get(position).getMenuIcon());
            textView.setText(menuItems.get(position).getMenuTitle());
        }


    }
    return view;
}
}

然后重新配置mainActivity
package com.leaves.autum.drawwelayoutdemo;

import android.graphics.Color;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
private ActionBarDrawerToggle actionBarDrawerToggle;//侧滑菜单状态监听器
private DrawerLayout drawerLayout;// DrawerLayout组件
private RelativeLayout right_drawerlayout;//左右侧滑菜单
//    private RelativeLayout left_drawerlayout;
private ListView leftList;

private Button left_button,right_button;


private Toolbar toolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
    initEvtent();

}
public void  init(){
    toolbar = findViewById(R.id.layout_toolbar);
    toolbar.setTitle("HelloWorld");
    toolbar.setTitleMargin(0,15,75,15);
    setSupportActionBar(toolbar);
    drawerLayout = findViewById(R.id.drawerlayout_main);

    //设置菜单内容之外其他区域的背景色
    drawerLayout.setScrimColor(Color.TRANSPARENT);

 //        left_drawerlayout = findViewById(R.id.left_drawer);
    right_drawerlayout = findViewById(R.id.right_drawer);
    leftList = findViewById(R.id.left_list);
    left_button = findViewById(R.id.left_button);
    right_button = findViewById(R.id.right_button);
   //        left_button.setOnClickListener(new View.OnClickListener() {
   //            @Override
   //            public void onClick(View v) {
   //                if (drawerLayout.isDrawerOpen(left_drawerlayout)){
   //                    drawerLayout.closeDrawer(left_drawerlayout);
   //                }else{
   //                    drawerLayout.openDrawer(left_drawerlayout);
   //                }
   //            }
   //        });
    //将侧滑栏切换成打开list(同样是打开侧滑菜单,只不过将侧滑的控件更改层ListVeiw)
    left_button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (drawerLayout.isDrawerOpen(leftList)){
                drawerLayout.closeDrawer(leftList);
            }else{
                drawerLayout.openDrawer(leftList);
            }
        }
    });
	
    right_button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (drawerLayout.isDrawerOpen(right_drawerlayout)){
                drawerLayout.closeDrawer(right_drawerlayout);
            }else{
                drawerLayout.openDrawer(right_drawerlayout);
            }
        }
    });
	//为ListView设置适配器
    leftList.setAdapter(new LeftListAdapter(MainActivity.this));
	//为每个item设置监听事件,在实际项目中可设置不同的判断条件,无论是在这里也好,还是在适配器中进行逻辑的设置都行
    leftList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this, parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
        }
    });

}

//设置监听开关
public void initEvtent(){
    actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.open,R.string.close){
        //菜单打开
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
        //菜单关闭
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }
    };
    drawerLayout.addDrawerListener(actionBarDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    actionBarDrawerToggle.syncState();

}


}

到这里,侧滑菜单就实现了

Autumn_leavess

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
安卓第八天---侧滑菜单的实现

这篇博客篇幅有点长,内容也有很多重复,但主要是担心我后面的增加ListView的一些更改会让小白找不到更改的地方,所以重复的代码有很多,多多体谅,但是这里的多布局是挺实用的哟 !首先这里是左右两边只有两个简单的一个侧滑菜单,并没有特殊的效果,但也是将滑动菜单进行了引入,这里,最重要的就是布局的写法了:&amp;lt;android.support.v4.widget.DrawerLayout ...
复制链接

扫一扫