嘿嘿嘿，关于android滑动的操作，是不是经常都会用到呢。

我肯定也要学习一下啦。

https://blog.csdn.net/u013184970/article/details/82882107

https://blog.csdn.net/qq_35820350/article/details/82460376

在网上学习了一下，这两篇文章写的不错。

来看一下效果

共有4各部分

1.自定义顶部栏

2.侧滑菜单

3.弹出菜单

4.标签滑动切换

进入具体实现环节啦

先引入v4包和图片加载包

    compile 'com.android.support:design:26.1.0'

    //图片加载

    implementation 'com.github.bumptech.glide:glide:4.2.0'

第一 、自定义顶部栏

1.先要将主题设置为NoActionBar

2.屁颠屁颠去写布局咯

三部分构成：左边按钮，中间标题，右边按钮

res/layout/layout_top_title.xml

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:background="@android:color/white">

    <ImageView

        android:layout_width="45dp"

        android:layout_height="45dp"

        android:id="@+id/leftimgview"

        android:src="@mipmap/tx"

        android:layout_centerVertical="true"

        android:padding="10dp"

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/mtext"

        android:text="首页"

        android:textSize="18sp"

        android:layout_centerInParent="true"

        android:textColor="@color/colorblack"/>

    <ImageView

        android:layout_width="45dp"

        android:layout_height="45dp"

        android:id="@+id/rightimgview"

        android:src="@mipmap/menu"

        android:layout_centerVertical="true"

        android:layout_alignParentRight="true"

        android:padding="10dp"/>

</RelativeLayout>

3.在你的activity布局文件中引入

<include layout="@layout/layout_top_title"></include>

4.添加点击监听

activity要实现View.OnClickListener接口

private ImageView left,right;//左边按钮右边按钮

left=findViewById(R.id.leftimgview);

right=findViewById(R.id.rightimgview);
//添加监听

right.setOnClickListener(this);

left.setOnClickListener(this);

　　@Override

    public void onClick(View view) {

        switch (view.getId()){

            case R.id.rightimgview:

                break;

            case R.id.leftimgview:

        }

    }

再把图片变成圆角的

//图片圆角

Glide.with(this).load(R.mipmap.tx).apply(RequestOptions.bitmapTransform(new RoundedCorners())).into(left);

自定义的顶部栏就大功告成，接下来实现侧滑菜单

第二、侧滑菜单

用到Navigationview(导航视图)和Drawerlayout(抽屉布局)来实现

分析一下：使用抽屉布局，点击顶部栏左边按钮出现侧滑菜单。

侧滑菜单分为两个部分，一个是头部区域包括头像和个人信息，一个是菜单区域。

1.侧滑菜单布局

头部：res/layout/layout_head.xml  一张图片，两行字

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:gravity="center"

    android:background="@drawable/shape_gradient">

    <ImageView

        android:id="@+id/person_pic"

        android:layout_width="75dp"

        android:layout_height="75dp"

        android:layout_marginTop="42dp"

        android:src="@mipmap/tx" />

    <TextView

        android:id="@+id/companyText"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="24dp"

        android:text="新人养牛"

        android:textSize="20sp" />

    <TextView

        android:id="@+id/addressText"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="18dp"

        android:layout_marginTop="12dp"

        android:text="在线卖牛奶"

        android:textSize="16sp" />

</LinearLayout>

菜单布局 这里要新建一个menu的文件夹 res/menu/menu_navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group

        android:id="@+id/group1"

        android:checkableBehavior="single"

        >

        <item

            android:id="@+id/group_1"

            android:icon="@mipmap/myinfo"

            android:title="我的消息" />

        <item

            android:id="@+id/group_2"

            android:icon="@mipmap/shop"

            android:title="商城" />

        <item

            android:id="@+id/group_3"

            android:icon="@mipmap/back"

            android:title="退出登录" />

    </group >

    <item

        android:id="@+id/item_1"

        android:icon="@mipmap/vip"

        android:title="会员中心" />

    <item

        android:id="@+id/item_2"

        android:icon="@mipmap/setting"

        android:title="设置" />

</menu>

activity布局

<android.support.v4.widget.DrawerLayout

    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="com.steffenxuan.slide.Main2Activity"

    android:id="@+id/mdw">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

        <include layout="@layout/layout_top_title"></include>

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="hello"/>

    </LinearLayout>

    <android.support.design.widget.NavigationView

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:id="@+id/nav"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_gravity="left"

        android:fitsSystemWindows="true"

        app:headerLayout="@layout/layout_head"

        app:menu="@menu/menu_navigation">

    </android.support.design.widget.NavigationView>

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

2.activity java代码

private android.support.design.widget.NavigationView navigationview;//导航视图

private android.support.v4.widget.DrawerLayout drawerlayout;//抽屉

private ImageView person_pic;//侧滑菜单头部的图片

private TextView companyText;//侧滑菜单头部的文字

private TextView addressText;//侧滑菜单头部的文字

private void initFindId() {

        navigationview=findViewById(R.id.nav);

        drawerlayout=findViewById(R.id.mdw);

}

 private void initView() {

//监听侧滑菜单按钮点击

        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()){

                    case R.id.group_1:

                        Toast.makeText(MainActivity.this,"我的消息",Toast.LENGTH_SHORT).show();

                        break;

                    case R.id.group_2:

                        Toast.makeText(MainActivity.this,"商城",Toast.LENGTH_SHORT).show();

                        break;

                    case R.id.group_3:

                        Toast.makeText(MainActivity.this,"退出登录",Toast.LENGTH_SHORT).show();

                        break;

                    case R.id.item_1:

                        Toast.makeText(MainActivity.this,"会员中心",Toast.LENGTH_SHORT).show();

                        break;

                    case R.id.item_2:

                        Toast.makeText(MainActivity.this,"设置",Toast.LENGTH_SHORT).show();

                        break;

                }

                drawerlayout.closeDrawer(GravityCompat.START);//点击菜单后关闭左边菜单

                return true;

            }

        });

}

    @Override

    public void onClick(View view) {

        switch (view.getId()){

            case R.id.leftimgview:

                if(drawerlayout.isDrawerOpen(navigationview)){

                    drawerlayout.closeDrawer(navigationview);//关闭抽屉

                }else {

                    drawerlayout.openDrawer(navigationview);//打开抽屉

                }

                break;

        }

    }

最重要的：NavigationView无法通过findviewbyid方法获取header布局

　　　　 //侧滑菜单中的控件  要先获取到头部局才可以

        if(navigationview.getHeaderCount() > 0){

            View headerLayout = navigationview.getHeaderView(0);

            person_pic = headerLayout.findViewById(R.id.person_pic);

            companyText=headerLayout.findViewById(R.id.companyText);

            addressText=headerLayout.findViewById(R.id.addressText);

        }

        else {

            View headerLayout = navigationview.inflateHeaderView(R.layout.layout_head);

            person_pic = headerLayout.findViewById(R.id.person_pic);

            companyText=headerLayout.findViewById(R.id.companyText);

            addressText=headerLayout.findViewById(R.id.addressText);

        }

        //圆角

        Glide.with(this).load(R.mipmap.tx).apply(RequestOptions.bitmapTransform(new RoundedCorners(150))).into(person_pic);

这篇文章可以看一下 https://www.jianshu.com/p/163e0a25f0aa

第三、弹出菜单

当我们点击顶部栏右边按钮时弹出菜单

1.菜单布局 res/menu/menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/one"

        android:title="第一"

        app:showAsAction="never"/>

    <item android:id="@+id/two"

        android:title="第二"

        app:showAsAction="never"/>

</menu>

2.activity java代码

　　@Override

    public void onClick(View view) {

        switch (view.getId()){

            case R.id.rightimgview:

                showmenu(view);

                break;

        }

    }
public void showmenu(View view){

        PopupMenu popupMenu=new PopupMenu(Main2Activity.this,view);//实例化PopupMenu

        getMenuInflater().inflate(R.menu.menu_main,popupMenu.getMenu());//加载Menu资源

        //设置菜单监听

        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

            @Override

            public boolean onMenuItemClick(MenuItem item) {

                switch (item.getItemId()){

                    case R.id.one:

                        Toast.makeText(Main2Activity.this,"one",Toast.LENGTH_LONG).show();

                        return true;

                    case R.id.two:

                        Toast.makeText(Main2Activity.this,"two",Toast.LENGTH_LONG).show();

                        return true;

                    default:

                        return false;

                }

            }

        });

        popupMenu.show();//显示menu

    }

第四、TabLayout+ViewPager+Fragment联动

ViewPager搭配Fragment去实现标签页是一种非常常见的做法

1.先创建三个碎片 res/layout/fragment_main.xml

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="首页"

        android:gravity="center"/>

</LinearLayout>
public class FragmentMain extends Fragment {

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.fragment_main,container,false);

        return view;

    }

}

剩下两个和这个一毛一样，改个名字就ok

2.添加TabLayout和ViewPager

activity布局，在顶部栏的下面添加

<android.support.design.widget.TabLayout

        android:background="@android:color/white"

        android:id="@+id/mtab"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        app:tabIndicatorColor="@android:color/holo_orange_light"

        app:tabBackground="@android:color/transparent"

        app:tabGravity="fill"

        app:tabIndicatorHeight="3dp"

        android:paddingLeft="5dp"

        android:paddingRight="5dp"

        android:paddingBottom="8dp"/>

  <android.support.v4.view.ViewPager

        android:id="@+id/mvp"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

3.activity Java

private TabLayout tabLayout;

private ViewPager viewPager;

   private void initFindId() {

        tabLayout =  findViewById(R.id.mtab);

        viewPager =  findViewById(R.id.mvp);

}

private void initViewPage() {

//添加适配器

            viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override

            public Fragment getItem(int position) {

                //创建实例

                Fragment fragment=new Fragment();

                if(fragment!=null){

                    switch (position){

                        case 0:

                            fragment=new FragmentMain();

                            break;

                        case 1:

                            fragment=new FragmentSecond();

                            break;

                        case 2:

                            fragment=new FragmentEnd();

                            break;

                    }

                }

                return fragment;

            }

            @Override

            public int getCount() {

                return 3;

            }

        });

        //ViewPager关联到Tablayout中

        tabLayout.setupWithViewPager(viewPager);

        viewPager.setCurrentItem(0);

        //设置tabLayout

        tabLayout.getTabAt(0).setCustomView(getTabView("首页"));

        tabLayout.getTabAt(1).setCustomView(getTabView("另一页"));

        tabLayout.getTabAt(2).setCustomView(getTabView("最后"));

        //监听tabLayout选中

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override

            public void onTabSelected(TabLayout.Tab tab) {

                View view=tab.getCustomView();

                TextView textView = view.findViewById(R.id.tabtxt);

                textView.setTextColor(Color.parseColor("#ed8200"));

                textView.setTextSize(16);

                textView.getPaint().setFakeBoldText(true);

            }

            @Override

            public void onTabUnselected(TabLayout.Tab tab) {

                View view = tab.getCustomView();

                TextView textView = view.findViewById(R.id.tabtxt);

                textView.setTextColor(Color.parseColor("#999999"));

                textView.setTextSize(14);

            }

            @Override

            public void onTabReselected(TabLayout.Tab tab) {

            }

        });

}            

　　　/**
　　　* 获得Tablayout中tab所在的view

     * @param titleName

     * @return

     */

    private View getTabView(String titleName) {

        View view = LayoutInflater.from(this).inflate(R.layout.layout_tab_item, null);

        TextView textView = view.findViewById(R.id.tabtxt);

        textView.setText(titleName);

　　　　　//设置默认选中的view

        if (titleName.equals("首页")) {

            textView.setTextColor(Color.parseColor("#ed8200"));

            textView.setTextSize(16);

        }

        return view;

    }

自定义标题布局res/layout/layout_tab_item.xml

可以加入图标

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:gravity="center"

    android:orientation="vertical">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/tabtxt"/>

</LinearLayout>

到这里，滑动切换就完成了 这里有一篇文章设置tablayout样式的

https://www.jianshu.com/p/2b2bb6be83a8

最后

大部分都会用到这些，刚学习android肯定不能落下。

主要是控件Navigationview、Drawerlayout、TabLayout、ViewPager运用

Fragment碎片的加入。

附上GitHub地址：https://github.com/steffenx/android-

Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现的更多相关文章

  1. Android 实现形态各异的双向侧滑菜单 自定义控件来袭

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935,本文出自:[张鸿洋的博客] 1.概述 关于自定义控件侧滑已经写了两 ...

  2. android L 新控件侧滑菜单DrawerLayout 使用教程

    介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产 ...

  3. Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

    1.概述 关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向 ...

  4. Xamarin.Android中使用ResideMenu实现侧滑菜单

    上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜 ...

  5. Android开源库--SlidingMenu左右侧滑菜单

    如果说我比别人看得更远些,那是因为我站在了巨人的肩上.   github地址:https://github.com/jfeinstein10/SlidingMenu   设置: 1.下载之后以依赖项的 ...

  6. Android自定义组合控件：UIScrollLayout（支持界面滑动及左右菜单滑动）

    一.前言: 我之前很早的时候,写过一篇<左右滑出菜单>的文章: http://blog.csdn.net/qingye_love/article/details/8776650 用的是对V ...

  7. android自定义viewgroup初步之一----抽屉菜单

    转载请注明出处 http://blog.csdn.net/wingichoy/article/details/47832151 几天前在慕课网上看到鸿洋老师的 自定义卫星菜单,感觉很有意思,于是看完视 ...

  8. Android自定义组件系列【15】——四个方向滑动的菜单实现

    今天无意中实现了一个四个方向滑动的菜单,感觉挺好玩,滑动起来很顺手,既然已经做出来了就贴出来让大家也玩弄一下. 一.效果演示 (说明:目前没有安装Android模拟器,制作的动态图片太卡了,就贴一下静 ...

  9. 【朝花夕拾】Android自定义View篇之（十一）View的滑动，弹性滑动与自定义PagerView

    前言 由于手机屏幕尺寸有限,但是又经常需要在屏幕中显示大量的内容,这就使得必须有部分内容显示,部分内容隐藏.这就需要用一个Android中很重要的概念——滑动.滑动,顾名思义就是view从一个地方移动 ...

随机推荐

  1. WinForm:API

    一.WndProc:  主要用在拦截并处理系统消息和自定义消息 比如:windows程序会产生很多消息,比如你单击鼠标,移动窗口都会产生消息.这个函数就是默认的消息处理函数.你可以重载这个函数来制定自 ...

  2. 从python爬虫以及数据可视化的角度来为大家呈现“227事件”后，肖战粉丝的数据图

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...

  3. 怎样才能拥有营销号生成器功能？python帮你实现

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...

  4. 实例讲解Springboot以Repository方式整合Redis

    1 简介 Redis是高性能的NoSQL数据库,经常作为缓存流行于各大互联网架构中.本文将介绍如何在Springboot中整合Spring Data Redis,使用Repository的方式操作. ...

  5. Python - 生成随机验证码的3种实现方式

    生成6位随机验证码的3种实现方式如下: 1. 简单粗暴型:所有数字和字母都放入字符串: 2. 利用ascii编码的规律,遍历获取字符串和数字的字符串格式: 3. 引用string库. 方法1代码: i ...

  6. 2020年必须掌握的硬核技能k8s

    Kubernetes 是一个软件系统,使你在数以万计的电脑节点上运行软件时就像 所有节点是以单个大节点一样, 它将底层基础设施抽象,这样做同时简化了应用开发.部署,以及对开发和运维团队的管理. Kub ...

  7. [redis]SDS和链表

    一.SDS 1.SDS结构体 redis3.2之前:不管buf的字节数有多少,都用 4字节的len来储存长度,对于只存短字符串那么优点浪费空间,比如只存 name,则len=4 则只需要一个字节8位即 ...

  8. thymeleaf 模板语法

    模板语法 如何在 script 标签体内部使用 th 获取后端数据 添加如下属性 <script type="text/javascript" th:inline=" ...

  9. Spring5参考指南:Bean作用域

    文章目录 Bean作用域简介 Singleton作用域 Prototype作用域 Singleton Beans 中依赖 Prototype-bean web 作用域 Request scope Se ...

  10. docker容器介绍

                       Docker容器 一.什么是Docker? Docker时Docker.Lnc公司开源的一个基于LXC技术之上搭建的Container容器引擎,源代码托管在Git ...