Android利用ViewPager仿微信主界面-android学习之旅(78)
首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组
效果图如下
部分代码如下,实现如下的方法
mPagerAdapter = new PagerAdapter(){
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
};
View数组就是几个LinearLayout,代码如下
private List<View> mViews = new ArrayList<View>();
View tab01 = inflater.inflate(R.layout.tab01,null);
View tab02 = inflater.inflate(R.layout.tab02,null);
View tab03 = inflater.inflate(R.layout.tab03,null);
View tab04 = inflater.inflate(R.layout.tab04,null);
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
ViewPager的滑动点击事件
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i2) {
}
@Override
public void onPageSelected(int i) {
int currentItem = viewPager.getCurrentItem();
resetImg();
switch(currentItem){
case 0:
btnWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
btnFriend.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
btnAddress.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
btnSetting.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
仿微信主页面,实现的效果是滑动ViewPager的各个页面之后,下面的图标也是随着相应的界面变亮,然后点击底部,相应的页面也会跳转
点击底部跳转的逻辑在于代码,ViewPager对各个页面是从0开始编号的
viewPager.setCurrentItem(1);
布局主要代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="45dp"
android:gravity="center"
android:background="@drawable/title_bar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_gravity="center"
android:textStyle="bold"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="55dp"
android:gravity="center"
android:background="@drawable/bottom_bar"
>
<LinearLayout
android:id="@+id/tab_weixin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/tab_weixin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_weixin_pressed"
android:background="#00000000"
android:clickable="false"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_friend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/tab_friend_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_find_frd_normal"
android:background="#00000000"
android:clickable="false"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#ffffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/tab_address_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_address_normal"
android:background="#00000000"
android:clickable="false"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="#ffffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_setting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_settings_normal"
android:background="#00000000"
android:clickable="false"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#ffffffff"/>
</LinearLayout>
</LinearLayout>
<LinearLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:orientation="vertical"
>
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
项目源码代码地址是
https://github.com/fengsehng/WeixinTest
Android利用ViewPager仿微信主界面-android学习之旅(78)的更多相关文章
- Android 之高仿微信主界面
源码下载: http://files.cnblogs.com/aibuli/WeChatSample.zip 主界面主要使用ActionBar来完成. 要实现这个效果,第一步当然是编辑menu目录 ...
- Android ActionBar应用实战,高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
- [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊
Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
- ViewPager学习之仿微信主界面
由于素材的原因,这里都是从网上找的图片,所以所谓的仿微信实际上最后成了下图这货.. .,点击变色也是自己用的windows自带绘图的颜料桶填充的空白. .. watermark/2/text/aHR0 ...
- android布局实践——模仿微信主界面
这是目前微信6.0版本的主界面 先来分析一波: 1.(top.xml)界面头部有一个微信(6)消息提醒 一个搜索图标 一个更多的的图标+,中间还有一段空白,我们可以弄两个textView(其 ...
- [deviceone开发]-仿微信主界面示例
一.简介 模仿微信主界面的4个页面,作为一个很常规应用的框架模板,值得参考.另外包括简单的菜单,其中搜索还支持语音录入,不过你需要增加飞讯的语音组件重新打包,才能看到效果 二.效果图 三.相关下载 h ...
- Vue3.0网页版聊天|Vue3.x+ElementPlus仿微信/QQ界面|vue3聊天实例
一.项目简介 基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现 ...
- uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...
- Android控件-ViewPager(仿微信引导界面)
什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v ...
随机推荐
- Async分析
1:android在新版本中不允许UI线程访问网络,但是如果需要访问网络又改怎么办呐?这里有很多解决方案,比如新开一个线程,在新线程中进行访问,然后访问数据,返回后可能会更新界面也可能不更新界面,这 ...
- aways on 配置部署(二)——配置域
前一篇中我们基本了解了配置aways on的三个步骤,本篇就具体讲解如何配置域. DNS的配置 上篇可以看到三台服务器的ip地址,网关,DNS等配置,其中sqlDNS服务器的dns为自己的ip地址,s ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- webpack4.1.1的使用详细教程
安装全局webpack cnpm install -g webpack 安装全局webpack-cli npm install -g webpack-cli 初始化:生成package.json文件 ...
- IntelliJ IDEA下Git的配置与使用(命令行下)
1. 安装Git并配置好Git 安装与配置参见Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(1)中的2.在本机安装Git与3.1 配置git. 2. 创建远程仓库 在gitee. ...
- 根据class显示或隐藏多个div
引用一下jquery,然后function放head中 function test(){ $(".1").css("display","none&qu ...
- hive表的存储格式; ORC格式的使用
hive表的源文件存储格式有几类: 1.TEXTFILE 默认格式,建表时不指定默认为这个格式,导入数据时会直接把数据文件拷贝到hdfs上不进行处理.源文件可以直接通过hadoop fs -cat 查 ...
- Dynamics CRM 部署NLB后使用群集名称访问弹验证框验证不过的解决方法
自上次部署NLB到现在已有段时间了,今天部署完后遇到了个问题,上次也遇到过但忘记了,本篇作为对该问题的一个记录,部署文档:https://blogs.msdn.microsoft.com/niran_ ...
- springMVC源码分析--SimpleServletHandlerAdapter(二)
上一篇博客springMVC源码分析--HandlerAdapter(一)中我们主要介绍了一下HandlerAdapter接口相关的内容,实现类及其在DispatcherServlet中执行的顺序,接 ...
- Centos6.5 mysql安装
cenos中安装软件使用yum进行安装,小米加步枪不如ak47. 第1步.yum安装mysql yum -y install mysql-server 第2步.设置开机启动 chkconfig ...