简单的方法实现仿微信底部的Tab选项卡界面
在网上看了比较多的关于Tab的教程,发现都很杂乱。比较多的用法是用TitlePagerTabStrip和ViewPaper。不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来。而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观。虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个。功能不错而且非常简单。
直接点击或者是滑动界面,都可以转到相应的页面。
效果图:
原理是用了三个按钮和ViewPaper,抛弃了TitlePagerTabStrip。
ViewPaper通俗的说,它是一个装页面的容器。如上图我有三个不同的界面,是因为我把三个view加了进去。然后再把这个viewPaper加到主界面的布局中。
这样,主界面上就有三个按钮,按钮下方是一个viewPaper,这个viewPaper里面有三个view,我每滑一下或点击按钮就会跳到相应的view。
就是说我们看到的,其实都是主界面,按钮是一直在那的。我们只是不断的转换viewPaper这个容器里面的视图而已。
主界面的布局代码:
<RelativeLayout 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=".MainActivity" > //这里加三个按钮
//这里是viewPaper 一个容器
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" > </RelativeLayout>
怎么实现,按相应的按钮跳转到viewPaper中相应的视图呢?很简单,只要为按钮设置监听,然后调用viewPaper的setCurrentItem()这个函数就行。
对于相应的页面,我们的按钮也应该有相应的变化,如上图我们的按钮中的英文变成了√。这个只要在viewPaper的监听器中重载onPageSelected()这个函数就行,
每个页面被选中,都会调用这个函数。在这个函数里判断当前的页面是哪一个,然后再对按钮做出相应的改变即可。
onCreate的代码
//设置viewPaper
ViewPager pager = null;
ArrayList<View> viewContainter = new ArrayList<View>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add); //实例化ViewPaper
pager = (ViewPager) this.findViewById(R.id.viewpager3); //设置按钮跳转到相应的viewPaper页面 按钮1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { //跳到第一个页面
pager.setCurrentItem(0); }
}); 按钮2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { //第二个页面
pager.setCurrentItem(1); }
}); 按钮3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { //第三个页面
pager.setCurrentItem(2); }
}); //为viewPaper设置内容
//view是我们放进viewPaper里面的东西,要为它设置好布局,再放进去
View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null); //这是个ArrayList,加进去了3个view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3); //设置适配器 这里的代码复制即可
pager.setAdapter(new PagerAdapter() { //viewpager中的组件数量
@Override
public int getCount() {
return viewContainter.size();
} //滑动切换的时候销毁当前的组件 @Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
} //每次滑动的时候生成的组件
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
} }); //页面变化时的监听 改变按钮
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) { } @Override
public void onPageSelected(int i) { switch (i) { //如果是第一个页面
case 0:
按钮1.setText("√");
按钮2.setText("TAB2");
按钮3.setText("TAB3"); break; //如果是第二个页面
case 1:
按钮1.setText("TAB1");
按钮2.setText("√");
按钮3.setText("TAB3");
break; //如果是第三个页面
case 1:
按钮1.setText("TAB1");
按钮2.setText("TAB2");
按钮3.setText("√");
break; } } @Override
public void onPageScrollStateChanged(int i) { }
}); }
想用到每个view里面的控件的话,在主界面上是找不到这些控件的,都是空的。 必须在instantiateItem这个函数里面指定。
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position)); switch (position){ case 0: { //在第一个页面中 }
}
}
代码不是直接复制可用的,因为有些地方怕杂乱,改成了中文,布局文件中的注释也是不正确的。不过大家只要把代码过一遍,应该没什么问题。
简单的方法实现仿微信底部的Tab选项卡界面的更多相关文章
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- html css 仿微信底部自己定义菜单
近期几个月一直从事微信开发,从刚開始的懵懂渐渐成长了一点. 今天认为微信底部自己定义菜单,假设能在html的页面上也能显示就好了. 记得曾经看过某个网页有类似效果.查找了该网页的css. ok如今h ...
- 仿微信底部自定义菜单 移动web
最近在做微信开发,要实现微信公众号改版—-改成微官网形式,即移动web页面中实现公众号的主页面,包括了公众号的菜单在底部显示 本文针对仿公众号底部菜单这个功能实现进行总结.实现采用html和css.J ...
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...
- Android仿微信底部选项卡
第一步 添加依赖 dependencies { compile 'com.yinglan.alphatabs:library:1.0.5' } 第二步 布局使用 <?xml version=&q ...
- 仿网易漂亮的TAB选项卡(标签)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序 - tab选项卡(组件)
更新日期: 2019/3/5:首次发布,默认下标“curIndex”超出红色提示 2019/3/7:增加tabName,可自定义数据标题名称(详情看示例) 支持单个/多个tab(显示/隐藏) 参数: ...
- Android 高仿微信6.0主界面 带你玩转切换图标变色
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述 学习Android少不了模仿 ...
- Android 超高仿微信图片选择器 图片该这么加载
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39943731,本文出自:[张鸿洋的博客] 1.概述 关于手机图片加载器,在当今像 ...
随机推荐
- jvm最大线程数
摘自:http://sesame.iteye.com/blog/622670 工作中碰到过这个问题好几次了,觉得有必要总结一下,所以有了这篇文章,这篇文章分为三个部分:认识问题.分析问题.解决问题. ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错
Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错 今天在windows上打包其它平台的Electron应用的时候,由于是第一次,所以总是下载 xxx-e ...
- ng $http 和远程服务器通信的一个服务。
$http({url:'',method:''}).success().error() 简洁写法:$http.get()$http.post()... 注意事项:①要求返回的数据格式是json格式②在 ...
- android wifi 热点、socket通讯
WiFi管理工具类 package com.wyf.app.common; import java.lang.reflect.InvocationTargetException; import jav ...
- C++之内核对象进行线程同步
用户模式下的线程同步机制提供了非常好的性能,但他们也的确存在一些局限性,而且不适用于许多应用程序,例如,对Interlocked系列函数只能对一个值进行操作,它们从来不会把线程切换到等待状态.我们可以 ...
- Python基本特殊方法之__format__
__format__()方法 __format__()传参方法:someobject.__format__(specification) specification为指定格式,当应用程序中出现&quo ...
- 剑指offer-第五章优化时间和空间效率(数组中出现次数超过一半的数字)
题目:输入一个数组,找出一个数字,它在数组中出现的次数超过数组的一半. 题目规定如果可以改变数组中元素的位置. 思路1:如果数组是排序的,那么中间元素的位置不就是次数超过数组一半的元素吗?是的,因此我 ...
- matlab滤波器的设计
求出濾波器的階數以及 3dB 截止頻率後,可用相應的 Matlab 函數計算出實現傳遞函數的分子分母係數來.巴特沃斯型濾波器是通帶內最大平坦.帶外單調下降型的,其計算命令是:[b,a] = butte ...
- LOJ10050 The XOR Largest Pair
题意 在给定的 \(N\) 个整数 \(A_1,A_2,-,A_N\) 中选出两个进行异或运算,得到的结果最大是多少? 对于 \(100\%\) 的数据,\(1\le N\le 10^5, 0\le ...