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
<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滑动切换的实现的更多相关文章
- Android 实现形态各异的双向侧滑菜单 自定义控件来袭
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935,本文出自:[张鸿洋的博客] 1.概述 关于自定义控件侧滑已经写了两 ...
- android L 新控件侧滑菜单DrawerLayout 使用教程
介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产 ...
- Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)
1.概述 关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向 ...
- Xamarin.Android中使用ResideMenu实现侧滑菜单
上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜 ...
- Android开源库--SlidingMenu左右侧滑菜单
如果说我比别人看得更远些,那是因为我站在了巨人的肩上. github地址:https://github.com/jfeinstein10/SlidingMenu 设置: 1.下载之后以依赖项的 ...
- Android自定义组合控件:UIScrollLayout(支持界面滑动及左右菜单滑动)
一.前言: 我之前很早的时候,写过一篇<左右滑出菜单>的文章: http://blog.csdn.net/qingye_love/article/details/8776650 用的是对V ...
- android自定义viewgroup初步之一----抽屉菜单
转载请注明出处 http://blog.csdn.net/wingichoy/article/details/47832151 几天前在慕课网上看到鸿洋老师的 自定义卫星菜单,感觉很有意思,于是看完视 ...
- Android自定义组件系列【15】——四个方向滑动的菜单实现
今天无意中实现了一个四个方向滑动的菜单,感觉挺好玩,滑动起来很顺手,既然已经做出来了就贴出来让大家也玩弄一下. 一.效果演示 (说明:目前没有安装Android模拟器,制作的动态图片太卡了,就贴一下静 ...
- 【朝花夕拾】Android自定义View篇之(十一)View的滑动,弹性滑动与自定义PagerView
前言 由于手机屏幕尺寸有限,但是又经常需要在屏幕中显示大量的内容,这就使得必须有部分内容显示,部分内容隐藏.这就需要用一个Android中很重要的概念——滑动.滑动,顾名思义就是view从一个地方移动 ...
随机推荐
- day28作业
import os import uuid import pickle from conf import settings class School: def __init__(self,name,a ...
- idea 激活方法
转载自: https://www.jianshu.com/p/7d60ea5e51e9
- 负载均衡服务之HAProxy基础配置(一)
前文我们聊了下haproxy的基础安装,以及怎样去代理后端主机的配置:当然没有很详细的去说配置文件中各指令的意思:有关haproxy的安装和代理后端server可以参考本人博客https://www. ...
- Java IO 流--FileUtils 工具类封装
IO流的操作写多了,会发现都已一样的套路,为了使用方便我们可以模拟commosIo 封装一下自己的FileUtils 工具类: 1.封装文件拷贝: 文件拷贝需要输入输出流对接,通过输入流读取数据,然后 ...
- BypassUAC
BypassUAC 本篇主要介绍如何以ICMLuaUtil方式BypassUAC,主要内容如下: 过掉UAC提示框的方法总结 UACME项目 什么类型的COM interface可以利用? 如何快速找 ...
- MySQL优化之COUNT(*)效率(部分转载与个人亲测)
说到MySQL的COUNT(*)的效率,发现越说越说不清楚,干脆写下来,分享给大家. COUNT(*)与COUNT(COL)网上搜索了下,发现各种说法都有:比如认为COUNT(COL)比COUNT(* ...
- git工具上传项目到码云
首先,你需要在本地安装git客户端,此处简单易懂,略过然后,在本地建好文件夹,以本人为例,我的路径为 E:\git_project,此时需要通过鼠标右键选择:git bush here 如图所示然后会 ...
- JVM 真的很难学么?不、只是你“不敢学”而已
JVM 真的很难学么?不.只是你"不敢学"而已 许多招聘的信息上面都说,要了解jvm.多线程什么的对于 java 程序员来说,这是工作好多年的程序员都不一定能掌握的东 ...
- python-trade
https://tool.lu/pyc/在线反编译pyc import base64 correct = 'XlNkVmtUI1MgXWBZXCFeKY+AaXNt' flag = base64.b6 ...
- python学习笔记(四)---用户输入与while循环
用户输入 函数input demo1: message = input("all you input is chars:") print(message) demo2: 由inpu ...