Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于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
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/white"><ImageViewandroid:layout_width="45dp"android:layout_height="45dp"android:id="@+id/leftimgview"android:src="@mipmap/tx"android:layout_centerVertical="true"android:padding="10dp"/><TextViewandroid: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"/><ImageViewandroid: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);@Overridepublic 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(45))).into(left);
自定义的顶部栏就大功告成,接下来实现侧滑菜单
第二、侧滑菜单
用到Navigationview(导航视图)和Drawerlayout(抽屉布局)来实现
分析一下:使用抽屉布局,点击顶部栏左边按钮出现侧滑菜单。
侧滑菜单分为两个部分,一个是头部区域包括头像和个人信息,一个是菜单区域。
1.侧滑菜单布局
头部:res/layout/layout_head.xml 一张图片,两行字
<LinearLayoutxmlns: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"><ImageViewandroid:id="@+id/person_pic"android:layout_width="75dp"android:layout_height="75dp"android:layout_marginTop="42dp"android:src="@mipmap/tx" /><TextViewandroid:id="@+id/companyText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:text="新人养牛"android:textSize="20sp" /><TextViewandroid: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"><groupandroid:id="@+id/group1"android:checkableBehavior="single"><itemandroid:id="@+id/group_1"android:icon="@mipmap/myinfo"android:title="我的消息" /><itemandroid:id="@+id/group_2"android:icon="@mipmap/shop"android:title="商城" /><itemandroid:id="@+id/group_3"android:icon="@mipmap/back"android:title="退出登录" /></group ><itemandroid:id="@+id/item_1"android:icon="@mipmap/vip"android:title="会员中心" /><itemandroid:id="@+id/item_2"android:icon="@mipmap/setting"android:title="设置" /></menu>
activity布局
<android.support.v4.widget.DrawerLayoutxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/layout_top_title"></include><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="hello"/></LinearLayout><android.support.design.widget.NavigationViewxmlns: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() {@Overridepublic 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;}});}@Overridepublic 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代码
@Overridepublic 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);//实例化PopupMenugetMenuInflater().inflate(R.menu.menu_main,popupMenu.getMenu());//加载Menu资源//设置菜单监听popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {@Overridepublic 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
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="首页"android:gravity="center"/></LinearLayout>
public class FragmentMain extends Fragment {@Nullable@Overridepublic 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.TabLayoutandroid: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.ViewPagerandroid: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()) {@Overridepublic 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;}@Overridepublic int getCount() {return 3;}});//ViewPager关联到Tablayout中 tabLayout.setupWithViewPager(viewPager);viewPager.setCurrentItem(0); //设置tabLayouttabLayout.getTabAt(0).setCustomView(getTabView("首页"));tabLayout.getTabAt(1).setCustomView(getTabView("另一页"));tabLayout.getTabAt(2).setCustomView(getTabView("最后"));//监听tabLayout选中tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic 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);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {View view = tab.getCustomView();TextView textView = view.findViewById(R.id.tabtxt);textView.setTextColor(Color.parseColor("#999999"));textView.setTextSize(14);}@Overridepublic 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);//设置默认选中的viewif (titleName.equals("首页")) {textView.setTextColor(Color.parseColor("#ed8200"));textView.setTextSize(16);}return view;}
自定义标题布局res/layout/layout_tab_item.xml
可以加入图标
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"><TextViewandroid: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-
转载于:https://www.cnblogs.com/Steffen-xuan/p/11248348.html
Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现相关推荐
- android:自定义HorizontalScrollView实现qq侧滑菜单
今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单.学了不少的知识,同时也佩服鸿洋_大神思路的清晰. 看了教程课下也自己实现了一下.代码几乎完全相同 别喷我啊..没办法 o(︶︿︶)o 唉 像素不好 ...
- Android中导航栏之溢出菜单OverflowMenu
Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...
- Windows Server 2008自定义任务栏和开始菜单
1.1.1 任务2:自定义任务栏和开始菜单 将开始菜单改成经典模式 扩展控制面板和显示管理工具 步骤: 1. 点击,默认开始菜单如下图所示.如果不适应你的使用习惯,你可将其改为传统开始菜单. 2. 右 ...
- Android自定义操作栏示例教程
In this tutorial we will create an app that consists of Android Custom Action Bar with a custom layo ...
- 微信小程序自定义顶部栏、等十个重要的常见功能总结
一.使用本机字体 二.自定义透明顶部栏 三.拨打电话 四.获取用户信息 五.动态设置图片地址 六.一键内容到剪切板,并关闭弹框提示 七.多选及重置功能:动态改变class 八.px及rpx 九.如何使 ...
- 使用bootstrap搭建pc导航栏手机侧滑菜单
涉及技术bootstrap css html5 项目地址:https://github.com/chenqiao10/webApp/tree/master/bs-project 需求搭建pc导航栏手机 ...
- 基于android的网络音乐播放器-添加viewpager和fragment实现滑动切换多个界面(二)
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
- android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...
在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android- ...
- 微信小程序——1、自定义顶部渐变色2、封装好的自定义顶部栏(父组件获取子组件的点击事件)
1.自定义顶部渐变色 第一种使用代码实现渐变 效果图: .json代码 "navigationStyle":"custom" .wxml代码 <view ...
最新文章
- Unity接入安卓sdk查看应用内存占用
- centos恢复图形界面_centos图形界面的开启和关闭
- python elasticsearch 入门教程(一)
- 这10种创意图表,能让可视化报告瞬间变得惊艳炫酷,5分钟学会
- 一文说清Elasticsearch的核心概念
- 联想小新一键恢复小孔_联想机海真香预警!多款轻薄本平板来袭 学生/办公别错过...
- 【资源挖掘】免费DEM数据下载
- 关于城市照明的大局观
- RiceQuant开源项目Rqalpha运行演示策略的错误“ERROR 'figure' is an unknown keyword argument”...
- go reflect详解
- 67.Python修炼之路【72-前端-HTML列表】2018.06.28
- 论文阅读—图像分割方法综述(二)(arXiv:[cs:cv]20200410)
- Python实现回归树
- 通过PHP实现PNG转JPG
- 西安80坐标转成经纬度坐标
- 用for循环嵌套实现使用 “ * ” 打印直角三角形。
- Spring IOC系列学习笔记五:context:component-scan 节点解析
- Android通讯录模糊匹配搜索实现(号码、首字母,移动应用开发课程设计心得
- 我国集成电路计算机,集成电路计算机辅助设计
- 【04】Cockatrice界面构成