侧拉框

主界面

在这里插入代码片package com.example.dell.myapplication1207cela;

import android.support.annotation.NonNull;
import android.support.annotation.VisibleForTesting;
import android.support.v4.app.ListFragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawer;
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //显示标题栏左边
        //actionBar是4.0  getAction
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.left,new LeftFrgemet())
                .commit();

        drawer = findViewById(R.id.drawer);
        toggle = new ActionBarDrawerToggle(this, drawer, R.string.option, R.string.close);
        
        toggle.syncState();
        drawer.addDrawerListener(toggle);
        drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View view, float v) {
                Log.i("TEST","onDrawerSilde:"+ v);
            }

            @Override
            public void onDrawerOpened(@NonNull View view) {
               Log.i("TEST","onDrawerOPend");
            }

            @Override
            public void onDrawerClosed(@NonNull View view) {
                Log.i("TEST", "onDrawerClosed");
            }

            @Override
            public void onDrawerStateChanged(int i) {
                Log.i("TEST", "onDrawerStateChanged: " + i);
            }
        });
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //先交给toggle处理
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    //关闭侧拉菜单
    public void closeDrawer() {
        drawer.closeDrawer(Gravity.START);
    }
}

fragment

在这里插入代码片package com.example.dell.myapplication1207cela;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

public class LeftFrgemet extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.left, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "点击了侧边菜单", Toast.LENGTH_SHORT).show();
                //关闭Left Drawer
                ((MainActivity) getActivity()).closeDrawer();
            }
        });
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的示例代码,演示如何在界面上添加一个抽屉侧拉框: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>抽屉侧拉框示例</title> <style> /* 抽屉侧拉框的样式 */ .drawer { position: fixed; /* 固定定位 */ top: 0; left: 0; width: 300px; /* 宽度 */ height: 100%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 阴影效果 */ transition: transform 0.3s ease-in-out; /* 过渡效果 */ transform: translateX(-100%); /* 初始状态为隐藏 */ z-index: 999; /* 层级 */ } .drawer.show { transform: translateX(0); /* 显示 */ } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #f5f5f5; } .drawer-header h2 { margin: 0; } .drawer-close { cursor: pointer; font-size: 1.5rem; color: #999; transition: color 0.3s ease-in-out; } .drawer-close:hover { color: #000; } .drawer-content { padding: 10px; } </style> </head> <body> <!-- 主界面 --> <div id="app"> <h1>抽屉侧拉框示例</h1> <p>点击下面的按钮打开侧拉框</p> <button @click="showDrawer">打开侧拉框</button> </div> <!-- 抽屉侧拉框 --> <div class="drawer" :class="{ 'show': isDrawerVisible }"> <div class="drawer-header"> <h2>侧拉框标题</h2> <span class="drawer-close" @click="hideDrawer">×</span> </div> <div class="drawer-content"> <p>这里是侧拉框的内容</p> </div> </div> <script> // Vue.js示例代码,用于控制抽屉侧拉框的显隐状态 var app = new Vue({ el: '#app', data: { isDrawerVisible: false }, methods: { showDrawer: function() { this.isDrawerVisible = true; }, hideDrawer: function() { this.isDrawerVisible = false; } } }); </script> </body> </html> ``` 你可以根据自己的需求修改样式和内容,实现自己想要的抽屉侧拉框效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值