这个项目实现了以下的功能:有三个标签聊天、发现和通讯录,左右滑动下面的ViewPager可以切换不同的标签,且标签下面的蓝色条可以随着手指的滑动来实时滑动。另外,如果第二次滑动到“聊天”界面,可以在“聊天”旁边添加一个“七条信息”的BadgeView。具体的运行效果如下。

 

下面上代码。顺便说一下,使用BadgeView的话,我们需要导入它的JAR包,点击这里下载。

 <?xml version="1.0" encoding="utf-8"?>
<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="40.0dip"
android:background="@drawable/topbar_bg" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="10.0dip" > <ImageView
android:layout_width="30.0dip"
android:layout_height="wrap_content"
android:layout_marginRight="5.0dip"
android:contentDescription="@string/app_name"
android:src="@drawable/topbar_icon" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#d3d3d3"
android:textSize="18.0sp" />
</LinearLayout> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" > <ImageView
android:layout_width="30.0dip"
android:layout_height="wrap_content"
android:layout_marginRight="5.0dip"
android:contentDescription="@string/app_name"
android:src="@drawable/topbar_search" /> <ImageView
android:layout_width="30.0dip"
android:layout_height="wrap_content"
android:layout_marginRight="5.0dip"
android:contentDescription="@string/app_name"
android:src="@drawable/topbar_add" /> <ImageView
android:layout_width="30.0dip"
android:layout_height="wrap_content"
android:layout_marginRight="5.0dip"
android:contentDescription="@string/app_name"
android:src="@drawable/topbar_more" />
</LinearLayout> </RelativeLayout>

追上面一条的布局代码

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="30.0dip"
android:background="#eee"
android:orientation="vertical" > <LinearLayout
android:layout_width="fill_parent"
android:layout_height="27.0dip"
android:orientation="horizontal" > <LinearLayout
android:id="@+id/tabbar_chat_layout"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" > <TextView
android:id="@+id/tabbar_tchat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="聊天"
android:textColor="#008000"
android:textSize="15.0sp" />
</LinearLayout> <LinearLayout
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" > <TextView
android:id="@+id/tabbar_tdiscover"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"
android:textColor="#ff000000"
android:textSize="15.0sp" />
</LinearLayout> <LinearLayout
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" > <TextView
android:id="@+id/tabbar_tconn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="#ff000000"
android:textSize="15.0sp" />
</LinearLayout>
</LinearLayout> <ImageView
android:id="@+id/tabbar_tabline"
android:layout_width="100.0dip"
android:layout_height="3.0dip"
android:background="@drawable/tabline"
android:contentDescription="@string/app_name" /> </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:orientation="vertical" > <include layout="@layout/sideworks_topbar" /> <include layout="@layout/sideworks_tabbar" /> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_weight="1" >
</android.support.v4.view.ViewPager> </LinearLayout>

MainActivity界面布局代码

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffffff" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="This is CHAT fragment page."
android:textColor="#ff000000"
android:textSize="22.0sp" /> </RelativeLayout>

第一个标签页的布局代码(三个标签页布局一样,这里只列出第一个)

 public class MainActivity extends FragmentActivity {
private ViewPager viewPager;
private FragmentPagerAdapter adapter;
private List<Fragment> data;
private TextView tChat, tDiscover, tConn;
private LinearLayout chatLayout;
private BadgeView badgeView;
private ImageView tabLine;
private int widthTabLine;
private int currentPageIndex; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initView();
} // 设置TabLine长度占屏幕的三分之一
private void initTabLine() {
// 获取屏幕宽度1/3的长度
DisplayMetrics metrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay().getMetrics(metrics);
widthTabLine = metrics.widthPixels / 3;
// 设置宽度占1/3
LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
layoutParams.width = widthTabLine;
tabLine.setLayoutParams(layoutParams);
} private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
tChat = (TextView) findViewById(R.id.tabbar_tchat);
tDiscover = (TextView) findViewById(R.id.tabbar_tdiscover);
tConn = (TextView) findViewById(R.id.tabbar_tconn);
chatLayout = (LinearLayout) findViewById(R.id.tabbar_chat_layout);
tabLine = (ImageView) findViewById(R.id.tabbar_tabline); initTabLine(); data = new ArrayList<Fragment>(); // ViewPager的三个页面
ChatTabPage chatTabPage = new ChatTabPage();
DiscoverTabPage discoverTabPage = new DiscoverTabPage();
ConnTabPage connTabPage = new ConnTabPage();
data.add(chatTabPage);
data.add(discoverTabPage);
data.add(connTabPage); adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return data.size();
} @Override
public Fragment getItem(int position) {
return data.get(position);
}
}; viewPager.setAdapter(adapter); // ViewPager滑动结束后,改变Tabbar中的字体颜色
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
resetTextView();
switch (position) {
case 0:
// 当滑动回第一个页面时,在“聊天”旁边增加一个“七条信息”的提示
if (badgeView != null) {
chatLayout.removeView(badgeView);
}
badgeView = new BadgeView(MainActivity.this);
tChat.setTextColor(Color.parseColor("#008000"));
badgeView.setBadgeCount(7);
chatLayout.addView(badgeView);
break;
case 1:
tDiscover.setTextColor(Color.parseColor("#008000"));
break;
case 2:
tConn.setTextColor(Color.parseColor("#008000"));
break;
}
currentPageIndex = position;
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {
// TabLine随着手指滑动而变化位置
LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
if (currentPageIndex == position) {
layoutParams.leftMargin = (int) ((positionOffset + currentPageIndex) * widthTabLine);
} else {
layoutParams.leftMargin = (int) ((positionOffset - 1 + currentPageIndex) * widthTabLine);
}
tabLine.setLayoutParams(layoutParams);
} @Override
public void onPageScrollStateChanged(int arg0) { }
});
} // 重置三个TextView的字体颜色
protected void resetTextView() {
tChat.setTextColor(Color.BLACK);
tDiscover.setTextColor(Color.BLACK);
tConn.setTextColor(Color.BLACK);
}
}

MainActivity中的JAVA代码

Android之仿微信Tab滑动的更多相关文章

  1. [转]Android 超高仿微信图片选择器 图片该这么加载

    快速加载本地图片缩略图的方法: 原文地址:Android 超高仿微信图片选择器 图片该这么加载 其示例代码下载: 仿微信图片选择器 ImageLoader

  2. Android ActionBar仿微信界面

    ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的Ac ...

  3. Android 高仿微信实时聊天 基于百度云推送

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天终于有幸利用百 ...

  4. Android 高仿微信即时聊天 百度云为基础的推

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天最终有幸利用百 ...

  5. Android 高仿微信6.0主界面 带你玩转切换图标变色

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述 学习Android少不了模仿 ...

  6. Android高仿微信(一)——如何消除启动时的白屏

    默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...

  7. Android:仿微信开场切换界面

    这实例很多人仿做,好实例还是不容错过!最重要是素材容易拿~ 效果: 默认3页面的切换,最后一个页面带按钮,点击进入另外一个页面 思路: 1.准备5个布局页面,1个为主函数布局页面,3个为切换的页面(其 ...

  8. Android 高仿微信头像截取 打造不一样的自定义控件

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/39761281,本文出自:[张鸿洋的博客] 1.概述 前面已经写了关于检测手势识别 ...

  9. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

随机推荐

  1. Hadoop学习笔记—3.Hadoop RPC机制的使用

    一.RPC基础概念 1.1 RPC的基础概念 RPC,即Remote Procdure Call,中文名:远程过程调用: (1)它允许一台计算机程序远程调用另外一台计算机的子程序,而不用去关心底层的网 ...

  2. linux应用程序开发-进程程序设计

    学习之前必须了解基本的概念: 进程,线程,进程3种状态,进程调度以及4种算法,进程同步,死锁,记不清的找度娘. 获取ID #include<sys/types.h> #include< ...

  3. poj 3734 矩阵快速幂+YY

    题目原意:N个方块排成一列,每个方块可涂成红.蓝.绿.黄.问红方块和绿方块都是偶数的方案的个数. sol:找规律列递推式+矩阵快速幂 设已经染完了i个方块将要染第i+1个方块. a[i]=1-i方块中 ...

  4. [UVA11464]Even Parity(状压,枚举)

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. markdownpad2使用说明

    ## 欢迎使用 MarkdownPad 2 ## **MarkdownPad** 是 Windows 平台上一个功能完善的 Markdown 编辑器. ### 专为 Markdown 打造 ### 提 ...

  6. ARM学习笔记13——LED驱动程序设计

    首先我们要根据开发板原理图得到控制LED灯的引脚是哪个,我们现在以LED1为例,我们已经知道LED1由S5PV210的GPC1_3控制,因此我们按如下步骤进行: 第一步是配制S5PV210的GPC1_ ...

  7. 在cocos2d-x jsb/html5中设置触摸代理的方法

    和官方的说明不同,js binding的很多api和ch5版是不一样的.遇到不一样的就需要我们努力去看源码寻找了. 主要是以下几个文件 cocos2d_specifics.cpp cocos2d_sp ...

  8. Spring Component注解处理过程

    接下来: org.springframework.context.annotation.ComponentScanBeanDefinitionParser#parse方法展开加载过程:

  9. I/O模式总结

    进程读取数据时要经过两个阶段: 1.等待内核准备数据: 2.将内核缓冲区中的数据复制到进程缓冲区中. 一.阻塞IO 进程会阻塞在等待内核准备数据和数据从内核空间复制到用户空间这两个阶段. 二.非阻塞I ...

  10. jQuery实现瀑布流布局详解(PC和移动端)

    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...