1) ViewPager提供了左右滑动切换页面的方法,但是它所提供的标题只是无语,估计没有真正的项目会照搬拿过来;并且它只能一页一页滑,我想直接查看最后一页要滑半天;

2) 看了腾讯新闻客户端感觉体验很好,所以就仿着写了,因为只是做个demo供大家交流也是给自己做个笔记,所以功能实现就行demo比较简单;

3) 有兴趣的可以在demo的基础拓展,如果哪里写得不好还望大家多多赐教、一起交流

4) 直接上主要代码,所以注释都写在代码里,最后会给工程包。(PS是在AS环境下生成的)

先放个效果图:

MainActivity.java

  1. package qi.demo;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Color;
  5. import android.os.Bundle;
  6. import android.support.v4.app.Fragment;
  7. import android.support.v4.app.FragmentActivity;
  8. import android.support.v4.view.ViewPager;
  9. import android.view.View;
  10. import android.widget.HorizontalScrollView;
  11. import android.widget.LinearLayout;
  12. import android.widget.TextView;
  13.  
  14. import java.util.ArrayList;
  15.  
  16. import qi.demo.adapter.MyViewPagerAdapter;
  17.  
  18. public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener{
  19.  
  20. private MainActivity mActivity;
  21. private ViewPager viewPager;
  22. private HorizontalScrollView scrollView;
  23. private LinearLayout titleLayout;
  24. private ArrayList<Integer> moveToList; //viewPager滑动时标题栏跟随滑动距离
  25. private int mTitleMargin; //每个标题间的间隔
  26.  
  27. private ArrayList<Fragment> fragmentsList; //viewPager加载类
  28. private ArrayList<TextView> textViewList; //标题控件集合
  29. private ArrayList<String> titleList; //标题文字集合
  30. private TestFragment fragment;
  31. private MyViewPagerAdapter mAdapter;
  32.  
  33. private int currentPos; //现在显示的是第几页
  34. private String[] strList = new String[]{"物业服务", "教育", "医疗卫生", "劳动保障", "交通出行", "投资服务", "关于左邻右里"};
  35. private int[] idList = new int[]{, , , , , , };
  36.  
  37. @Override
  38. protected void onCreate(Bundle savedInstanceState) {
  39. super.onCreate(savedInstanceState);
  40. setContentView(R.layout.activity_main);
  41. mActivity = this;
  42. mTitleMargin = dip2px(this, );
  43. initView();
  44. initData();
  45. }
  46.  
  47. private void initView(){
  48. viewPager = (ViewPager) findViewById(R.id.viewPager);
  49. viewPager.setOnPageChangeListener(mActivity);
  50. scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
  51. titleLayout = (LinearLayout) findViewById(R.id.titleLayout);
  52. }
  53.  
  54. /**
  55. * 1)初始化viewPager
  56. * 2)设置默认的Fragment
  57. */
  58. private void initData(){
  59. fragmentsList = new ArrayList<>();
  60. titleList = new ArrayList<>();
  61. textViewList = new ArrayList<>();
  62. moveToList = new ArrayList<>();
  63. mAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
  64. for(int i=; i<strList.length; i++){
  65. titleList.add(strList[i]);
  66. fragment = new TestFragment(mActivity, idList[i]);
  67. fragmentsList.add(fragment);
  68. addTitleLayout(titleList.get(i), idList[i]);
  69. }
  70. mAdapter.setData(fragmentsList);
  71. viewPager.setAdapter(mAdapter);
  72. viewPager.setOffscreenPageLimit();
  73. textViewList.get().setTextColor(Color.rgb(, , ));
  74. currentPos = ;
  75. }
  76.  
  77. /**
  78. * 添加标题栏
  79. * @param title 标题名称
  80. * @param position 标题索引
  81. */
  82. private void addTitleLayout(String title, int position){
  83. final TextView textView = (TextView) getLayoutInflater().inflate(R.layout.title, null);
  84. textView.setText(title);
  85. textView.setTag(position);
  86. textView.setOnClickListener(new posOnClickListener());
  87. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
  88. params.leftMargin = dip2px(mActivity, mTitleMargin);
  89. params.rightMargin = dip2px(mActivity, mTitleMargin);
  90. titleLayout.addView(textView, params);
  91. textViewList.add(textView);
  92. int width;
  93. //如果是第一个标题则不设滑动距离
  94. if(position==){
  95. width = ;
  96. moveToList.add(width);
  97. }
  98. //第N个标题的滑动距离是上一个标题的宽度加上标题之间的间隔,这样的话滑动viewPager的时候保证当前标题栏在最左侧
  99. else{
  100. int w = View.MeasureSpec.makeMeasureSpec(, View.MeasureSpec.UNSPECIFIED);
  101. int h = View.MeasureSpec.makeMeasureSpec(, View.MeasureSpec.UNSPECIFIED);
  102. textViewList.get(position-).measure(w, h);
  103. width = textViewList.get(position-).getMeasuredWidth() + mTitleMargin*;
  104. moveToList.add(width+moveToList.get(moveToList.size()-));
  105. }
  106. }
  107.  
  108. @Override
  109. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  110.  
  111. }
  112.  
  113. /**
  114. * 滑动viewPager
  115. */
  116. @Override
  117. public void onPageSelected(int position) {
  118. textViewList.get(currentPos).setTextColor(Color.rgb(, , )); //将之前的标题栏颜色变回来
  119. textViewList.get(position).setTextColor(Color.rgb(, , )); //将当前标题栏变色
  120. currentPos = position; //设置当前索引
  121. scrollView.scrollTo((int) moveToList.get(position), ); //标题栏跟随viewPager滑动
  122. }
  123.  
  124. @Override
  125. public void onPageScrollStateChanged(int state) {
  126.  
  127. }
  128.  
  129. /**
  130. * 点击标题栏
  131. */
  132. class posOnClickListener implements View.OnClickListener{
  133. @Override
  134. public void onClick(View view) {
  135. //点击的是当前标题什么都不做
  136. if((int)view.getTag()==currentPos){
  137. return;
  138. }
  139. //标题栏变色且设置viewPager
  140. textViewList.get(currentPos).setTextColor(Color.rgb(, , ));
  141. currentPos = (int) view.getTag();
  142. textViewList.get(currentPos).setTextColor(Color.rgb(, , ));
  143. viewPager.setCurrentItem(currentPos);
  144. }
  145. }
  146.  
  147. /**
  148. * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
  149. */
  150. public static int dip2px(Context context, float dpValue) {
  151. final float scale = context.getResources().getDisplayMetrics().density;
  152. return (int) (dpValue * scale + 0.5f);
  153. }
  154.  
  155. }

MyViewPagerAdapter.java

  1. public class MyViewPagerAdapter extends FragmentPagerAdapter {
  2.  
  3. private ArrayList<Fragment> fragmentList;
  4.  
  5. public MyViewPagerAdapter(FragmentManager fm) {
  6. super(fm);
  7. }
  8.  
  9. public void setData(ArrayList<Fragment> fragmentList){
  10. this.fragmentList = fragmentList;
  11. }
  12.  
  13. @Override
  14. public Fragment getItem(int arg0) {
  15. return fragmentList.get(arg0);
  16. }
  17.  
  18. @Override
  19. public int getCount() {
  20. return fragmentList.size();
  21. }
  22.  
  23. }

activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6.  
  7. <HorizontalScrollView
  8. android:id="@+id/scrollView"
  9. android:layout_width="match_parent"
  10. android:layout_height="60dp"
  11. android:scrollbars="none"
  12. android:background="#FFFFFF">
  13. <LinearLayout
  14. android:id="@+id/titleLayout"
  15. android:layout_width="wrap_content"
  16. android:layout_height="match_parent"
  17. android:gravity="center_vertical"
  18. android:orientation="horizontal"/>
  19. </HorizontalScrollView>
  20.  
  21. <android.support.v4.view.ViewPager
  22. android:id="@+id/viewPager"
  23. android:layout_width="match_parent"
  24. android:layout_height="match_parent">
  25. <android.support.v4.view.PagerTabStrip
  26. android:id="@+id/pagerTabStrip"
  27. android:layout_width="0dp"
  28. android:layout_height="0dp"/>
  29. </android.support.v4.view.ViewPager>
  30.  
  31. </LinearLayout>

demo下载地址:http://download.csdn.net/detail/qy7941237/9344763

Android ViewPager+HorizontalScrollView实现标题栏滑动(腾讯新闻)的更多相关文章

  1. android Viewpager HorizontalScrollView 实现分页栏拖拽

    源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果:  前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...

  2. android记帐本、涂鸦、仿腾讯新闻、仿bilibili、Markdwon便签、资讯APP等源码

    Android精选源码 kotlin版仿哔哩哔哩动画Android客户端源码 android实现图片涂鸦效果源码 Android 开源记账本项目源码 android高仿腾讯新闻app源码 androi ...

  3. Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPa ...

  4. Android 用HorizontalScrollView实现ListView的Item滑动删除 ,滑动错乱 冲突

    用HorizontalScrollView实现类似微信的滑动删除 测试于:Android2.2+ 对于Android来说按键操作已经在减少,越来越多的手势操作层出不穷,今天介绍一款LIstView的I ...

  5. Android ViewPager再探:增加滑动指示条

    上一篇:<Android ViewPager初探:让页面滑动起来> ViewPager只是左右滑动有些丑,也不知道当前位于第几页面. 可以在上方加入滑动指示条,来确定当前位置. 只需要修改 ...

  6. Android ViewPager初探:让页面滑动起来

    下一篇:<Android ViewPager再探:增加滑动指示条> ViewPager需要用到适配器PagerAAdapter,以下四个函数需要重写: instantiateItem(Vi ...

  7. android笔记:ViewPager实现界面的滑动

    最近在学习ViewPager实现界面的滑动,拜读了郭神的博客文章,并抽取归纳了自己对ViewPager的理解. ViewPager实现界面滑动的步骤如下: 1.在xml布局内加入控件android.s ...

  8. Android 使用ViewPager实现左右循环滑动图片

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1.    首先看一 ...

  9. Android viewpager 嵌套 viewpager滑动 点击事件冲突解决方案

    为了解决这个问题.可以自定义viewpager,然后在里面监听首饰,自定义点击事件 package com.hpuvoice.view; import android.content.Context; ...

随机推荐

  1. Map根据value排序ASC DESC

    原文:http://blog.csdn.net/k21325/article/details/53259180 需求有点刁钻,写关键词组合匹配标题的时候,遇到关键词像这样 XXX XXX 1222 X ...

  2. GNS3配置SecureCRT

    C:\SecureCRT\SecureCRT.exe /script D:\GNS3\DyRouter.vbs /T /telnet 127.0.0.1 %p "D:\Program Fil ...

  3. 集成环信时遇到的问题file not found: libEaseMobClientSDK.a

    集成环信时遇到的问题 build setting环信SDK集成libEaseMobClientSDKL  file not found: libEaseMobClientSDK.a clang: er ...

  4. 安装eclipse中html/jsp/xml editor插件以及改动html页面的字体

    近期在做android项目,用到了jquery mobile 框架以及phonegap,所以就会涉及一些html文件,可是html文件打开的方式是Text Editor ,而且打开之后一些html代码 ...

  5. cocos2dx塔防游戏逻辑

    cocos2dx 塔防游戏逻辑 1.欢迎界面 2.tield制作游戏地图,空块设置cantouch属性为1 3.设置地图锚点,把锚点增加一个锚点容器,给怪物的行走函数传入 该锚点容器參数,让怪物依照锚 ...

  6. 浅谈MySQL load data local infile细节 -- 从源码层面

    相信大伙对mysql的load data local infile并不陌生,今天来巩固一下这里面隐藏的一些细节,对于想自己动手开发一个mysql客户端有哪些点需要注意的呢? 首先,了解一下流程: 3个 ...

  7. MongoDb 学习教程

    MongoDB教程首页 MongoDB 介绍 MongoDB 优点 MongoDB 安装(Window/Linux) MongoDB 数据模型 MongoDB 创建数据库 MongoDB 删除数据库 ...

  8. 李洪强iOS开发之动态获取UILabel的bounds

    李洪强iOS开发之动态获取UILabel的bounds 在使用UILabel存放字符串时,经常需要获取label的长宽数据,本文列出了部分常用的计算方法. 1.获取宽度,获取字符串不折行单行显示时所需 ...

  9. WWDC笔记:2013 Session 201 Building User Interfaces for iOS 7

    Text Dynamic Type Specifies fonts semantically Supports user text sizing Optimized for legibility Su ...

  10. Dijkstra算法——最短路径(转)

    转自:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/31/2615833.html Dijkstra算法 1.定义概览 Dijkstra(迪杰斯 ...