Viewpager实现今日头条顶部导航的功能
利用简单的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实现今日头条顶部导航的功能的更多相关文章
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- iOS仿今日头条滑动导航
之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...
- [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果
APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...
- swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- swift - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- Android 代码实现viewPager+fragment 模仿今日头条的顶部导航
模仿今日头条的顶部导航: 下载地址: http://download.csdn.net/detail/u014608640/9917700 效果图:
- 仿今日头条最强顶部导航指示器，支持6种模式－b
项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...
- Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载
一.本文所涉及到的知识点 源码下载 二.目标 通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果,如图: 三.知识点讲解 1.View ...
随机推荐
- jQuery 菜单小练习(实现点击和移动鼠标效果)
这个代码的练习是点击事件后 如何用jQuery联动的方式找到相关标签 实现的结果是点击菜单一或者菜单二等 会出现相关菜品,并隐藏其他菜品.鼠标移动才菜品上会在右侧框内出现相关菜品的价格.实现特殊的效果 ...
- 图片的URL上传至阿里云OSS操作（微信小程序二维码返回的二进制上传到OSS）
当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作 把url中的图片文件下载到本地(或者上传到私有云中) public String uploadUrlToOss ...
- CSS Hack兼容
CSS中有很多标签在不同浏览器中有不同的兼容性问题,问了让网页的功能更好的不同浏览器中显示正常, 需要通过hack的方式来解决浏览器兼容问题. CSS hack问题由来已久,目前我的了解甚少,以下是转 ...
- 菜鸟学习Spring——SpringMVC注解版将URL中的参数转成实体
一.概述 将URL中参数转成实体在我们项目中用的很多比如界面提交表单请求后台的Contorller的时候通过URL传递了一串参数到后台,后台通过Spring让界面的字段与实体的字段映射来实现给后台的实 ...
- Java入门到精通——调错篇之Eclipse Java compiler level dose not match the version of the installed Java project
一.错误现象. java项目显示红色,并且类中引用包中会报红色错误,在Eclipse下面显示下面错误提示如图: 二.错误原因. 通过字面意思一看就很明白java的版本不对. 三.解决办法. 3.1右键 ...
- learn OpenStack by picture
- ViewPager+handler实现轮播
先说下功能吧,随便设置一个网络图片链接的集合,作为图片的资源.我用ImageLoader来加载图片,在图片未加载完成时会ProgressBar加载状态 在Handler发送一个空消息来实现页面的轮播 ...
- 如何获得ImageView中的图像
我们知道在Android中ImageView是一个用于显示图像的控件,比如在很多联系人方面的应用中,需要为联系人拍摄头像,并将得到的头像放在一个 ImageView对象中显示.通常,在没有为联系人拍摄 ...
- 使用weinre调试Web应用及PhoneGap应用
Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试.但是,当我们期望为移动Web站点或应用进行调 ...
- day01-struts框架
一.框架概述 1.框架的意义与作用: 所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的经历放到业务需求的分析和理解上面. 特点:封装了很多细节,程序员在使用的时候会非常简单. 2 ...