viewpager与导航条的滑动效果设置基于5.0以前版本

最新推荐文章于 2022-08-18 18:12:56 发布
最新推荐文章于 2022-08-18 18:12:56 发布
阅读量427 收藏
点赞数
文章标签： viewpager 导航条滑动

三.代码实现：

1.xml布局文件

1>主布局activity_main.xml

<span style="font-family:Microsoft YaHei;font-size:18px;"><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/activity_main_top_tab" />

  <android.support.v4.view.ViewPager
    android:id="@+id/id_page_vp"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >
  </android.support.v4.view.ViewPager>

</LinearLayout></span>

注意：布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况系统会自动引入)

2>顶部导航activity_main_top_tab.xml

<span style="font-family:Microsoft YaHei;font-size:18px;"><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="wrap_content"
  android:orientation="vertical" >

  <LinearLayout
    android:id="@+id/id_switch_tab_ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:baselineAligned="false"
    >

    <LinearLayout
      android:id="@+id/id_tab_chat_ll"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:background="@drawable/guide_round_selector"
      android:gravity="center"
      android:orientation="horizontal"
      android:padding="10dip" >

      <TextView
        android:id="@+id/id_chat_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="聊天"
        android:textColor="#0000FF"
        android:textSize="15dip" />
    </LinearLayout>

    <LinearLayout
      android:id="@+id/id_tab_friend_ll"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:background="@drawable/guide_round_selector"
      android:clickable="true"
      android:gravity="center"
      android:orientation="horizontal"
      android:padding="10dip"
      android:saveEnabled="false" >

      <TextView
        android:id="@+id/id_friend_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="好友"
        android:textColor="#000000"
        android:textSize="15dip" />
    </LinearLayout>

    <LinearLayout
      android:id="@+id/id_tab_contacts_ll"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:background="@drawable/guide_round_selector"
      android:focusable="false"
      android:gravity="center"
      android:orientation="horizontal"
      android:padding="10dip" >

      <TextView
        android:id="@+id/id_contacts_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="通讯录"
        android:textColor="#000000"
        android:textSize="15dip" />
    </LinearLayout>
  </LinearLayout>

  <ImageView
    android:id="@+id/id_tab_line_iv"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:contentDescription="tab"
    android:background="@drawable/tab_selected_pressed_holo" >
  </ImageView>

  <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

</LinearLayout></span>

3>Fragment显示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只给出一个，其他类似)

<span style="font-family:Microsoft YaHei;font-size:18px;"><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" >

  <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="聊天界面"
    android:textColor="#FF0000"
    android:textSize="20sp"
    android:gravity="center"
    ></TextView>

</LinearLayout></span>

4>主函数MainActivity.java

<span style="font-family:Microsoft YaHei;font-size:18px;">package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

  private List<Fragment> mFragmentList = new ArrayList<Fragment>();
  private FragmentAdapter mFragmentAdapter;

  private ViewPager mPageVp;
  /**
   * Tab显示内容TextView
   */
  private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;
  /**
   * Tab的那个引导线
   */
  private ImageView mTabLineIv;
  /**
   * Fragment
   */
  private ChatFragment mChatFg;
  private FriendFragment mFriendFg;
  private ContactsFragment mContactsFg;
  /**
   * ViewPager的当前选中页
   */
  private int currentIndex;
  /**
   * 屏幕的宽度
   */
  private int screenWidth;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findById();
    init();
    initTabLineWidth();

  }

  private void findById() {
    mTabContactsTv = (TextView) this.findViewById(R.id.id_contacts_tv);
    mTabChatTv = (TextView) this.findViewById(R.id.id_chat_tv);
    mTabFriendTv = (TextView) this.findViewById(R.id.id_friend_tv);

    mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);

    mPageVp = (ViewPager) this.findViewById(R.id.id_page_vp);
  }

  private void init() {
    mFriendFg = new FriendFragment();
    mContactsFg = new ContactsFragment();
    mChatFg = new ChatFragment();
    mFragmentList.add(mChatFg);
    mFragmentList.add(mFriendFg);
    mFragmentList.add(mContactsFg);

    mFragmentAdapter = new FragmentAdapter(
        this.getSupportFragmentManager(), mFragmentList);
    mPageVp.setAdapter(mFragmentAdapter);
    mPageVp.setCurrentItem(0);

    mPageVp.setOnPageChangeListener(new OnPageChangeListener() {

      /**
       * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
       */
      @Override
      public void onPageScrollStateChanged(int state) {

      }

      /**
       * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
       * offsetPixels:当前页面偏移的像素位置
       */
      @Override
      public void onPageScrolled(int position, float offset,
          int offsetPixels) {
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
            .getLayoutParams();

        Log.e("offset:", offset + "");
        /**
         * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来
         * 设置mTabLineIv的左边距 滑动场景：
         * 记3个页面,
         * 从左到右分别为0,1,2 
         * 0->1; 1->2; 2->1; 1->0
         */

        if (currentIndex == 0 && position == 0)// 0->1
        {
          lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
              * (screenWidth / 3));

        } else if (currentIndex == 1 && position == 0) // 1->0
        {
          lp.leftMargin = (int) (-(1 - offset)
              * (screenWidth * 1.0 / 3) + currentIndex
              * (screenWidth / 3));

        } else if (currentIndex == 1 && position == 1) // 1->2
        {
          lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
              * (screenWidth / 3));
        } else if (currentIndex == 2 && position == 1) // 2->1
        {
          lp.leftMargin = (int) (-(1 - offset)
              * (screenWidth * 1.0 / 3) + currentIndex
              * (screenWidth / 3));
        }
        mTabLineIv.setLayoutParams(lp);
      }

      @Override
      public void onPageSelected(int position) {
        resetTextView();
        switch (position) {
        case 0:
          mTabChatTv.setTextColor(Color.BLUE);
          break;
        case 1:
          mTabFriendTv.setTextColor(Color.BLUE);
          break;
        case 2:
          mTabContactsTv.setTextColor(Color.BLUE);
          break;
        }
        currentIndex = position;
      }
    });

  }

  /**
   * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
   */
  private void initTabLineWidth() {
    DisplayMetrics dpMetrics = new DisplayMetrics();
    getWindow().getWindowManager().getDefaultDisplay()
        .getMetrics(dpMetrics);
    screenWidth = dpMetrics.widthPixels;
    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
        .getLayoutParams();
    lp.width = screenWidth / 3;
    mTabLineIv.setLayoutParams(lp);
  }

  /**
   * 重置颜色
   */
  private void resetTextView() {
    mTabChatTv.setTextColor(Color.BLACK);
    mTabFriendTv.setTextColor(Color.BLACK);
    mTabContactsTv.setTextColor(Color.BLACK);
  }

}
</span>

注意：

1.MainActivity继承于FragmentActivity;

2.初始化导航条的宽度：initTabLineWidth()，由于本例给出的是3个界面切换，固长度为整个屏幕宽度的1/3;

3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;

其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左)，给出导航条距离左边的边距，显示导航条滑动的效果。
5>Fragment适配器FragmentAdapter，继承于FragmentPagerAdapter

<span style="font-family:Microsoft YaHei;font-size:18px;">package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmentAdapter extends FragmentPagerAdapter {

  List<Fragment> fragmentList = new ArrayList<Fragment>();
  public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
    super(fm);
    this.fragmentList = fragmentList;
  }

  @Override
  public Fragment getItem(int position) {
    return fragmentList.get(position);
  }

  @Override
  public int getCount() {
    return fragmentList.size();
  }

}
</span>

6>Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个，其他类似)

<span style="font-family:Microsoft YaHei;font-size:18px;">package com.example.viewpagerdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ChatFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
    super.onCreateView(inflater, container, savedInstanceState);
    View chatView = inflater.inflate(R.layout.activity_tab_chat, container,false);
    return chatView;    
  }
  @Override
  public void onActivityCreated(Bundle savedInstanceState){
    super.onActivityCreated(savedInstanceState);
  }
}
</span>

转自http://www.tuicool.com/articles/E7n6vu

Random07
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 导航条效果实现（六） TabLayout+ViewPager+Fragment
NoOneCode的博客
09-20 3万+
TabLayout一、继承结构public class TabLayout extends HorizontalScrollView 二、TabLayout的使用 1、TabLayout简单使用 TabLayout来自design兼容包，使用需要添加依赖。android studio 添加依赖如下：
Android开发之复杂布局嵌套(ScrollView+TabLayout+ViewPager+RecyclerView)导致冲突的解决办法
黄庆庆的世界
03-28 1万+
前言 最近在做一些项目和毕业设计，所以自从上次梳理完数据结构之后，一直想写些什么，但是又没有比较好的内容，所以博客从过完年之后就停更了很长很长很长一段时间，不过这次在做项目的时候，正好遇到一个我本以为很简单，结果折腾了好久的一个问题，其实这个问题对于做Android开发的同学来说，并不陌生，那就是滑动布局的互相嵌套。 当然并不仅限于标题中写的这种嵌套，只要是可滑动的布局，例如GridView，各种...
基于5.0以后版本的viewpager与导航滑动条
Random07的博客
12-31 361
先来看看效果图 首先这是Material Design里的Tab空间实现的 参考资料 官方英文文档： http://www.google.com/design/spec/material-design/ 中文版网站： http://wiki.jikexueyuan.com/project/material-design/ 一个大神写的文档 http://www.jcodecrae
ViewPager2水滴与吸附式切换效果
Rtas_All的博客
08-18 841
本小白为了完成ViewPager2底部圆点导航切换的效果，结合网上资料，目前完成了以下两种效果，很多部分还需要完善。
android防谷歌滑动效果,Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)...
weixin_34142735的博客
05-25 344
使用ViewPager，PagerSlidingTabStrip，SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏。先简单介绍一下所用的两个个开源库。PagerSlidingTabStrip用法：1.向app Module中的build.gradle中添加依赖dependencies {compile 'com.astuetz:pagerslidingtabstrip:1....
处女男学Android（十一）---Gallery、ViewPager和ViewPager+Fragment实现的Tab导航
小灯光环
12-24 4984
关于Gallery和ViewPager的使用方法以及Fragment+ViewPager+RadioButton实现的Tab切换。
Android 5.0新控件 Tablayout | 导航栏 介绍及使用详情
郭勇的博客
05-02 2227
Android Material Design 风格之 Tablayout | 导航栏 介绍及使用详情extends HorizontalScrollView TabLayout provides a horizontal layout to display tabs. Google官方对这个控件的大概意思是一个横向的布局标签 我们在应用viewpager的时候，经常会使用TabPag
欢迎进入Hensen_的博客目录（全站式导航）
点击置顶文章查看博客目录（全站式导航）
09-23 2万+
Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制 语法基础 语法基础——C语法基础 语法基础——C++语法基础 语法基础——Objective-C语法基础 语法基础——PHP语法基础 面试复习 面试复习——Android工程师之Java基础 面试复习——Android工程师之Java面试题 面试复习——Android工程............
Android进阶之路 - BottomNavigationView的使用与问题处理方案
热门推荐
Android、前端、小程序、后端
02-02 3万+
底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好相对高于25.1，因为有一些问题没有处理好。 闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！
Android下的沉浸式状态栏+折叠TitleBar（CoordinatorLayout+CollapsingToolbarLayout）+ViewPager切换实现
M075097的博客
11-12 1万+
Android下的沉浸式状态栏+折叠TitleBar（CoordinatorLayout+CollapsingToolbarLayout）+ViewPager切换实现 最终效果以及过程中出现的问题如下:（简单解决在ViewPager+Fragment的组合中实现该效果时出现有页面视图偏移一个状态栏高度问题）                               
搜集整理的一些博客导航
刺青的博客
10-26 4980
简介:第一次在CSDN上发表博客,将自己关注或者看过的一些博客整理了一下,其中包含了鸿神和郭神的全部博客,包括两位大神微信公众号推荐的博客,另外还有一些安卓开发社区的博客,后续每天都会更新这个导航,希望这个博客导航能够给小伙伴们带来一些帮助… Android重要机制 快速了解Android重要机制 ActionBar Android ActionBar完全解析，使用官方推荐的最佳导
时序预测-基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量
08-30
时序预测|基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL 时序预测|基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL
基于微信小程序的考研资料分享系统的设计与实现.docx
08-30
基于微信小程序的考研资料分享系统的设计与实现.docx
豆瓣读书书评爬虫软件，使用方便快捷
08-30
豆瓣读书书评爬虫软件将辅助你爬取你感兴趣的书目短评，交互简单，你可以轻松的获取目标书目的指定页数的内容，你可以非常方便地使用该资源即可爬取对应书目的短评内容，可以爬取指定页数的信息，也可以将内容保存到数据库sqlite中，当然也会保存为文本文件，每条评论独占一行，如果后续你要做评论的文本情感分析也会特别方便，如若不会使用，详细使用方式可以看我写的一篇文章，链接在此处，点击可跳转:https://blog.csdn.net/weixin_45938063/article/details/141500999spm=1001.2014.3001.5501 ,该资源收取1积分即可下载，欢迎支持下载，您的支持是我创作的动力
XX市XX区市场局数据治理方案文档
08-30
基于企业监管、食品安全、药品安全、知识产权、特种设备监管等多维数据，通过协同各类数据资源，进行数据汇集、治理，构建支撑XX市XX区市场监管数字化平台的标准化数据库，促进XX市XX区市场监管体系的放管服改革工作，逐步实现XX市XX区全方位、全覆盖、全领域、全过程的一体化数智监管体系。
基于springboot的网上购物商城系统设计与实现.docx
最新发布
08-30
基于springboot的网上购物商城系统设计与实现.docx
ssm+mysql的宝康药房销售管理系统.zip
08-30
根据需求，确定系统采用JSP技术，SSM框架，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了频道维护、新闻维护、药品维护、订单维护、系统管理等功能。
C语言考试习题以及答案1.docx
08-30
《C语言考试习题集》是一本针对C语言基础知识和编程技巧的综合习题书。书中涵盖了从基础语法、数据类型到复杂的指针、结构体及文件操作等多方面的习题，帮助读者通过大量练习巩固理论知识并提升编程能力。每道习题配有详细解析和答案，适合用于自学、复习考试或作为编程课程的辅助材料。
viewpager顶部导航的滑动效果
09-12
ViewPager顶部导航的滑动效果是指在一个ViewPager中，可以通过顶部的导航栏来切换不同的页面，同时导航栏也会随着页面的滑动而产生相应的效果。 一种常见的实现方式是通过使用TabLayout与ViewPager结合，TabLayout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值