zoukankan      html  css  js  c++  java
  • 侧拉菜单

    1.SlidingPaneLayout
    2.DrawerLayout
    3.NavigationView
    4.SlidingMenu

    1.SlidingPaneLayout
    布局v4包下,先左侧拉(只有左侧拉),后主页,布局的位置决定前面的是左侧拉
    通过slidingPaneLayout.closePane();关闭侧拉
    2.DrawerLayout
    布局v4包下,先主页,后左侧拉或右侧拉(顺序不能变否则点击事件失效)
    通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
    3.NavigationView
    布局v4包下DrawerLayout,先主页面,后左或右侧拉(引进design包下的NavigationView)
    NavigationView可以关联headerLayout和menu
    navigationView设置监听,可以响应menu的点击事件
    通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
    4.SlidingMenu

    需要导入第三方控件(不推荐使用)
    通过slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);设置两边都可以滑动
    slidingMenu.setMenu(R.layout.left_layout);设置左边布局
    slidingMenu.setSecondaryMenu(R.layout.right_layout);设置右边布局

    第一种:SlidingPaneLayout

    布局v4包下,先左侧拉(只有左侧拉),后主页
    通过slidingPaneLayout.closePane();关闭侧拉

    <android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/sliding_pane_layout"
        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="org.mobiletrain.a7_2slidingpanelayout.MainActivity">
        <!--
        SlidingPaneLayout布局整体上分为两部分,第一部分为左边的侧拉菜单,第二部分为主页面
        -->
        <LinearLayout
            android:id="@+id/left_layout"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:background="#f90101"
            android:gravity="center"
            android:orientation="vertical">
    
            <ListView
                android:id="@+id/lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></ListView>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#08f504"
            android:orientation="vertical">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"></android.support.v7.widget.Toolbar>
    
            <Button
                android:id="@+id/toggle"
                android:layout_width="wrap_content"
                android:onClick="toggle"
                android:layout_height="wrap_content"/>
    
            <TextView
                android:id="@+id/tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="主页面"/>
        </LinearLayout>
    </android.support.v4.widget.SlidingPaneLayout>
    public class MainActivity extends AppCompatActivity {
    
        private List<String> list;
        private SlidingPaneLayout slidingPaneLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
            setSupportActionBar(toolbar);
            ListView listView = (ListView) findViewById(R.id.lv);
            final TextView textView = (TextView) findViewById(R.id.tv);
            LinearLayout leftLayout = (LinearLayout) findViewById(R.id.left_layout);
            ViewGroup.LayoutParams layoutParams = leftLayout.getLayoutParams();
            //将100px转为100dp
            layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
            leftLayout.setLayoutParams(layoutParams);
            slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.sliding_pane_layout);
            initData();
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
            listView.setAdapter(adapter);
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    textView.setText(list.get(position));
                    //关闭侧拉菜单
                    slidingPaneLayout.closePane();
                }
            });
        }
    
        //点击后退按钮
        @Override
        public void onBackPressed() {
            //如果侧拉菜单打开,则点击后退按钮时关闭侧拉菜单,否则直接退出应用
            if (slidingPaneLayout.isOpen()) {
                slidingPaneLayout.closePane();
            } else {
                super.onBackPressed();
            }
        }
    
        private void initData() {
            list = new ArrayList<>();
            list.add("收藏");
            list.add("钱包");
            list.add("相册");
            list.add("文件");
        }
    
        public void toggle(View view) {
            //点击按钮时,如果侧拉菜单已经打开,则关闭,否则打开侧拉菜单
            if (slidingPaneLayout.isOpen()) {
                slidingPaneLayout.closePane();
            } else {
                slidingPaneLayout.openPane();
            }
        }
    }

    第二种:DrawerLayout

    布局v4包下,先主页,后左侧拉或右侧拉(顺序不能变否则点击事件失效)
    通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        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="org.mobiletrain.a7_2drawerlayout.MainActivity">
        <!--
        DrawerLayout中整体上分为三大块,分别是主页面,左右两侧的侧拉菜单
        android:layout_gravity="left"属性表示该页面是左边的侧拉菜单,注意要给侧拉菜单的布局添加一个背景
        android:layout_gravity="right"属性表示该页面是右边侧拉菜单
    
        注意三部分的位置:
        第一部分为主界面
        第二部分为左边侧拉菜单
        第三部分为右边侧拉菜单
        如果侧拉菜单写在了主页面之前,则侧拉菜单中的点击事件会失效
        -->
        <RelativeLayout
            android:id="@+id/main_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="leftToggle"
                android:text="leftToggle"/>
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:onClick="rightToggle"
                android:text="@string/righttoggle"/>
    
            <TextView
                android:id="@+id/tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="主页面"/>
    
        </RelativeLayout>
    
        <LinearLayout
            android:id="@+id/left_layout"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="#00fa08"
            android:orientation="vertical">
    
            <ListView
                android:id="@+id/lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></ListView>
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/right_layout"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:background="#fa0212"
            android:orientation="vertical">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="right"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
    public class MainActivity extends AppCompatActivity {
    
        private DrawerLayout drawerLayout;
        private List<String> list;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            ListView listView = (ListView) findViewById(R.id.lv);
            final TextView textView = (TextView) findViewById(R.id.tv);
            initData();
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
            listView.setAdapter(adapter);
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    textView.setText(list.get(position));
                    drawerLayout.closeDrawer(Gravity.LEFT);
                }
            });
        }
    
        @Override
        public void onBackPressed() {
            if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
                drawerLayout.closeDrawer(Gravity.LEFT);
            } else if (drawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                drawerLayout.closeDrawer(Gravity.RIGHT);
            } else {
                super.onBackPressed();
            }
        }
    
        private void initData() {
            list = new ArrayList<>();
            list.add("收藏");
            list.add("钱包");
            list.add("文件");
            list.add("相册");
        }
    
        public void leftToggle(View view) {
            //判断左边的侧拉菜单是否打开
            if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
                //关闭掉左边的侧拉菜单
                drawerLayout.closeDrawer(Gravity.LEFT);
            } else {
                //打开左边的侧拉菜单
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        }
    
        public void rightToggle(View view) {
            //打开右边的侧拉菜单
            drawerLayout.openDrawer(Gravity.RIGHT);
        }
    }

    第三种.NavigationView

    布局v4包下DrawerLayout,先主页面,后左或右侧拉(引进design包下的NavigationView)
    NavigationView可以关联headerLayout和menu
    navigationView设置监听,可以响应menu的点击事件
    通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="org.mobiletrain.a7_3drawerlayoutnavigationview.MainActivity">
        <!--
        整个页面分为三大块,分别是主界面、左边侧滑界面、右边侧滑界面
        -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <TextView
                android:id="@+id/tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="主界面"/>
        </LinearLayout>
    
        <!--
        android:layout_width="wrap_content"表示NavigaitonView的宽度为屏幕宽度的4/5
        app:headerLayout="@layout/header_layout"设置NavigatinView的头布局
        app:menu="@menu/main"设置NavigationView的点击项
        app:itemBackground="@color/colorPrimary"设置NavigationView item的背景颜色
        app:itemIconTint="@color/colorAccent"表示给NavigationView的item上的图片设置统一的颜色
        app:itemTextColor=""表示设置NavigationView上item中文本的颜色
        -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/header_layout"
            app:menu="@menu/main"></android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:orientation="vertical">
    
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/p1"/>
    
        <Button
            android:id="@+id/login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@null"
            android:gravity="center"
            android:text="请登录"
            android:textSize="24sp"/>
    </RelativeLayout>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group android:id="@+id/g1">
            <item
                android:id="@+id/favorite"
                android:icon="@mipmap/ic_launcher"
                android:title="收藏"/>
            <item
                android:id="@+id/wallet"
                android:icon="@mipmap/ic_launcher"
                android:title="钱包"/>
        </group>
        <group android:id="@+id/g2">
            <item
                android:id="@+id/photo"
                android:icon="@mipmap/ic_launcher"
                android:title="相册"/>
        </group>
        <item
            android:id="@+id/file"
            android:icon="@mipmap/ic_launcher"
            android:title="文件"/>
    </menu>
    public class MainActivity extends AppCompatActivity {
    
        private DrawerLayout drawerLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            final TextView textView = (TextView) findViewById(R.id.tv);
            drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
            //使item上图片的颜色正常显示
            navigationView.setItemIconTintList(null);
            //设置NavigationView中item的点击事件
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.favorite:
                            textView.setText("收藏");
                            break;
                    }
                    drawerLayout.closeDrawer(Gravity.LEFT);
                    return true;
                }
            });
            /****************处理头部点击事件*************************/
            //获得头布局
            View headerView = navigationView.getHeaderView(0);
            Button login = (Button) headerView.findViewById(R.id.login);
            login.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        @Override
        public void onBackPressed() {
            if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
                drawerLayout.closeDrawer(Gravity.LEFT);
            } else {
                super.onBackPressed();
            }
        }
    }
    private void initGuide() {
            //显示导航按钮
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //1.当前Activity
            //2.侧拉菜单的根布局
            //3.4.对于侧拉菜单打开或者关闭的一个描述
            ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,0,0);
            drawerLayout.setDrawerListener(actionBarDrawerToggle);
            //表示让ActionBar的状态和DrawerLayout的状态同步
            actionBarDrawerToggle.syncState();
        }

     第四种.SlidingMenu

    通过slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);设置两边都可以滑动
    slidingMenu.setMenu(R.layout.left_layout);设置左边布局
    slidingMenu.setSecondaryMenu(R.layout.right_layout);设置右边布局

    *侧滑内容是文本

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            SlidingMenu slidingMenu = new SlidingMenu(this);
            //设置SlidingMenu的侧滑方式为左右两边都可以滑动
            slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
            //设置左边侧拉布局
            slidingMenu.setMenu(R.layout.left_layout);
            //设置右边侧拉布局
            slidingMenu.setSecondaryMenu(R.layout.right_layout);
            slidingMenu.setBehindWidth(getResources().getDisplayMetrics().widthPixels / 3);
            //第二个参数表示侧拉菜单滑动模式
            //1.SlidingMenu.SLIDING_WINDOW:表示侧拉菜单和页面一样高
            //2.SlidingMenu.SLIDING_CONTENT:表示侧拉菜单在ActionBar下面活动
            slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        }
    }

    *侧滑内容是Fragment

    public class LeftFragment extends Fragment {
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setText("left");
            return textView;
        }
    }
    
    public class RightFragment extends Fragment {
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setText("right");
            return textView;
        }
    }
    public class MainActivity extends SlidingFragmentActivity {
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //设置左边侧滑菜单的布局
            setBehindContentView(R.layout.left_layout);
            SlidingMenu slidingMenu = getSlidingMenu();
            slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
            slidingMenu.setSecondaryMenu(R.layout.right_layout);
            //设置两边菜单侧拉偏移量为屏幕宽度的1/3
            slidingMenu.setBehindWidth(getResources().getDisplayMetrics().widthPixels / 3);
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            //用Fragment替换左右两边的Linearlayout
            transaction.replace(R.id.left_linearlayout, new LeftFragment());
            transaction.replace(R.id.right_linearlayout, new RightFragment());
            transaction.commit();
        }
    }

     

  • 相关阅读:
    当tp5项目上传到服务器之后遇见的各种bug(不定期更新)
    解决LAMP下 服务器IP无法访问
    thinkphp5多图上传+同时删除本地文件
    from提交表单后 数据提交到后台 但不跳转页面 非ajax 用iframe
    window7 安装sass和compass
    开源操作系统课程设计
    Hadoop伪分布式搭建实验总结
    排序集合
    快排
    邻接矩阵
  • 原文地址:https://www.cnblogs.com/anni-qianqian/p/5435713.html
Copyright © 2011-2022 走看看