利用简单的Textview 和Viewpager实现滑动、点击换页的效果,效果图如下:

   

先上布局文件代码:

<?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="match_parent"
android:background="@color/white"
android:orientation="vertical" > <LinearLayout
android:background="@color/red_base"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"> </LinearLayout>
<!-- 选项卡 --> <LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/white"
android:orientation="horizontal"
android:weightSum="5" > <FrameLayout
android:id="@+id/rim_tab1_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" > <TextView
android:id="@+id/rim_tab1_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="全部"
android:textColor="@color/red_base"
android:textSize="16sp" />
</FrameLayout> <View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" /> <FrameLayout
android:id="@+id/rim_tab2_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" > <TextView
android:id="@+id/rim_tab2_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="周边"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout> <View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" /> <FrameLayout
android:id="@+id/rim_tab3_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" > <TextView
android:id="@+id/rim_tab3_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="应援"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout> <View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" /> <FrameLayout
android:id="@+id/rim_tab4_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" > <TextView
android:id="@+id/rim_tab4_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="话题"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout> <View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@color/divider_gray_line" /> <FrameLayout
android:id="@+id/rim_tab5_fl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center" > <TextView
android:id="@+id/rim_tab5_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="明星"
android:textColor="@color/text_gray_4"
android:textSize="16sp" />
</FrameLayout>
</LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@color/white" > <ImageView
android:id="@+id/rim_cursor"
android:layout_width="80dp"
android:layout_height="3dp"
android:layout_marginTop="0dip"
android:background="@color/title_bar_blue" />
</LinearLayout> <View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/btn_bg_gray" />
<!-- 选项卡内容显示区域 --> <View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="@color/bg_light_gray" /> <android.support.v4.view.ViewPager
android:id="@+id/rim_third_vp"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </LinearLayout>

上面红色指示器的view的初始化

private int screenWidth;//指示器
private ImageView cursorImg;
private LinearLayout.LayoutParams lp; private void initViews(){ WindowManager wm = (WindowManager)
getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth();
screenWidth=width/5;
cursorImg = (ImageView) findViewById(R.id.rim_cursor);
lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams();
lp.width = screenWidth;
cursorImg.setLayoutParams(lp);
leftMargin = lp.leftMargin;
}

初始化indicater

private void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.rim_third_vp);
fragmentsList = new ArrayList<Fragment>();
fragment1 = new RimFragment();
fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
fragmentsList.add(fragment4);
fragmentsList.add(fragment5); viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),
fragmentsList));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(this);
}

设置上面选项卡的点击事件

 @Override
public void onClick(View v) {
switch (v.getId()){
case R.id.rim_tab1_fl:
viewPager.setCurrentItem(0);
num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
fragment1.setMsgName("1","周边");//周边的官方和会员的接口参数,官方
break;

设置viewpager 滑动事件

 @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { offset = (screenWidth - cursorImg.getLayoutParams().width) / 5; hidePoint(position, positionOffsetPixels);//设置红色指示器的位置
cursorImg.setLayoutParams(lp);
currentIndex = position;
} @Override
public void onPageSelected(int position) { switch (position){//设置点击事件
case 0:
fragment1.setMsgName("1","周边");
num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
break; } if (position==0)
{ }else { } } @Override
public void onPageScrollStateChanged(int state) { } //设置指示器的位置
private void hidePoint(int position, int positionOffsetPixels) {
if (position == 0) {// 0<->1
lp.leftMargin = (int) (positionOffsetPixels / 5) + offset; } else if (position == 1) {// 1<->2
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth
+ offset; }else if(position==2){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*2
+ offset;
}
else if(position==3){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*3
+ offset;
}
else if(position==4){
lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*4
+ offset;
}
}

代码并不难,希望通过我这个例子,一是巩固自己的学习和理解,二是希望更多的人更好的学习,我会再接再厉,写更多的博文。

源码下载

Viewpager实现今日头条顶部导航的功能的更多相关文章

  1. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  2. 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)

    TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...

  3. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  4. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  5. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  6. swift - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  7. Android 代码实现viewPager+fragment 模仿今日头条的顶部导航

    模仿今日头条的顶部导航:    下载地址: http://download.csdn.net/detail/u014608640/9917700 效果图:

  8. 仿今日头条最强顶部导航指示器,支持6种模式-b

    项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...

  9. Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载

    一.本文所涉及到的知识点 源码下载 二.目标 通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果,如图: 三.知识点讲解 1.View ...

随机推荐

  1. 吴恩达《Machine Learning Yearning》总结(11-20章)

    11.何时修改开发集.测试集和度量指标 开展一个新项目,尽快选好开发集和测试集:例子,根据度量指标A分类器排在B分类器前面,但是团队认为B分类器在实际产品上优于A分类器,这时就需要考虑修改开发集和测试 ...

  2. git本地创建新分支并推送到远程仓库

    1,在当前项目目录,从已有的分支创建新的分支(如从master分支),创建一个dev分支 git checkout -b dev 2,创建完可以查看一下,分支已经切换到dev git branch * ...

  3. js获取客户端用户IP

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type=& ...

  4. OC与JS交互之WebViewJavascriptBridge

    上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...

  5. git取消本地commit

    如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...

  6. Android 自定义View实现SegmentControlView(自定义多样式tablayout)

    偷懒一下,不做过多阐述 参考资源: Android 自定义View实现SegmentControlView : https://blog.csdn.net/a512337862/article/det ...

  7. 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果

    PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...

  8. solidity语言4

    引用类型(Reference Types) memory 不支持持久保存 storage 保留为变量 复杂类型如arrays和structs,有附加信息,'data location',提示存储在'm ...

  9. SQL Server ->> 重命名数据库

    ALTER DATABASE [oldDB] SET SINGLE_USER WITH ROLLBACK IMMEDIATE GO ALTER DATABASE [oldDB] MODIFY NAME ...

  10. python字符串反转 高阶函数 @property与sorted(八)

    (1)字符串反转 1倒序输出 s = 'abcde' print(s[::-1]) #输出: 'edcba' 2 列表reverse()操作 s = 'abcde' lt = list(s) lt.r ...