android ViewPager切换带切换效果

最新推荐文章于 2023-03-23 17:55:46 发布
最新推荐文章于 2023-03-23 17:55:46 发布
阅读量801 收藏 1
点赞数 1
文章标签： viewpager fragment切换 Tab 滑动 滑动线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu_er_/article/details/51086870
版权

今天主要实现viewPager切换  即可以点击并且可以滑动，下面有一条线也是可以一起滑动的。

效果图：


activity_main.xml中：

<?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:orientation="vertical"
    android:focusableInTouchMode="true"
    android:focusable="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fff"
            android:orientation="horizontal" >

            <TextView
                android:onClick="onClick"
                android:id="@+id/bt_drug_one1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="全部"
                android:textSize="15dp"
                android:textColor="#CC0000" />
            <TextView
                android:onClick="onClick"
                android:id="@+id/bt_drug_two2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="Tab1"
                android:textSize="15dp"
                android:textColor="#474747" />
            <TextView
                android:onClick="onClick"
                android:id="@+id/bt_drug_three3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="Tab2"
                android:textSize="15dp"
                android:textColor="#474747" />
            <TextView
                android:onClick="onClick"
                android:id="@+id/bt_drug_four4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="Tab3"
                android:textSize="15dp"
                android:textColor="#474747" />
        </LinearLayout>

        <LinearLayout
            android:background="#CCCCCC"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <View
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/show_one"
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1"
                android:background="#CC0000" />
            <View
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/show_two"
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1"
                android:background="#CCCCCC" />
            <View
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/show_three"
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1"
                android:background="#CCCCCC" />
            <View
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/show_four"
                android:layout_width="0dp"
                android:layout_height="2dp"
                android:layout_weight="1"
                android:background="#CCCCCC" />
        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/drugVp"
            >
        </android.support.v4.view.ViewPager>
    </LinearLayout>
</RelativeLayout>
下面的线是通过view实现的，长度是根据weight控制的。

MAinActivity中代码：

package com.example.dingbutab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    oneFragment allDrugFragment;
    twoFragment qiXieFragment;
    threeFragment baoJianFragment;
    fourFragment wuTangFragment;
    List<Fragment> fragmentList;
    ViewPager viewPager;
    MyfragmentAdpter myfragmentAdpter;
    private View showOne,showTwo,showThree,showFour;
    private TextView bt_drug_one1,bt_drug_two2,bt_drug_three3,bt_drug_four4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.drugVp);

        fragmentList= new ArrayList<>();
        allDrugFragment=new oneFragment();
        qiXieFragment=new twoFragment();
        baoJianFragment=new threeFragment();
        wuTangFragment=new fourFragment();

        fragmentList.add(allDrugFragment);
        fragmentList.add(qiXieFragment);
        fragmentList.add(baoJianFragment);
        fragmentList.add(wuTangFragment);

        myfragmentAdpter=new MyfragmentAdpter(getSupportFragmentManager(),fragmentList);

        viewPager.setAdapter(myfragmentAdpter);
        viewPager.setOffscreenPageLimit(3);
        viewPager.addOnPageChangeListener(this);
        myfragmentAdpter.notifyDataSetChanged();

    }

    public void onClick(View view){
        switch (view.getId())
        {
            case  R.id.bt_drug_one1:
                changview(0);
                break;
            case  R.id.bt_drug_two2:
                changview(1);
                break;
            case  R.id.bt_drug_three3:
                changview(2);
                break;
            case  R.id.bt_drug_four4:
                changview(3);
                break;
            default:
                break;
        }
    }

    private void changview(int page){
        viewPager.setCurrentItem(page, true);

    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        showOne=findViewById(R.id.show_one);
        showTwo=findViewById(R.id.show_two);
        showThree=findViewById(R.id.show_three);
        showFour=findViewById(R.id.show_four);

        bt_drug_four4=(TextView)findViewById(R.id.bt_drug_four4);
        bt_drug_three3=(TextView)findViewById(R.id.bt_drug_three3);
        bt_drug_two2=(TextView)findViewById(R.id.bt_drug_two2);
        bt_drug_one1=(TextView)findViewById(R.id.bt_drug_one1);

        switch (position){
            case 0:
                showOne.setBackgroundColor(getResources().getColor(R.color.tv_Red));
                showTwo.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showThree.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showFour.setBackgroundColor(getResources().getColor(R.color.bg_Gray));

                bt_drug_one1.setTextColor(getResources().getColor(R.color.tv_Red));
                bt_drug_two2.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_three3.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_four4.setTextColor(getResources().getColor(R.color.shopping_druglist));

                break;
            case 1:
                showOne.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showTwo.setBackgroundColor(getResources().getColor(R.color.tv_Red));
                showThree.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showFour.setBackgroundColor(getResources().getColor(R.color.bg_Gray));

                bt_drug_two2.setTextColor(getResources().getColor(R.color.tv_Red));
                bt_drug_one1.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_three3.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_four4.setTextColor(getResources().getColor(R.color.shopping_druglist));
                break;
            case 2:
                showOne.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showTwo.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showThree.setBackgroundColor(getResources().getColor(R.color.tv_Red));
                showFour.setBackgroundColor(getResources().getColor(R.color.bg_Gray));

                bt_drug_three3.setTextColor(getResources().getColor(R.color.tv_Red));
                bt_drug_one1.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_two2.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_four4.setTextColor(getResources().getColor(R.color.shopping_druglist));
                break;
            case 3:
                showOne.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showTwo.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showThree.setBackgroundColor(getResources().getColor(R.color.bg_Gray));
                showFour.setBackgroundColor(getResources().getColor(R.color.tv_Red));

                bt_drug_four4.setTextColor(getResources().getColor(R.color.tv_Red));
                bt_drug_one1.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_two2.setTextColor(getResources().getColor(R.color.shopping_druglist));
                bt_drug_three3.setTextColor(getResources().getColor(R.color.shopping_druglist));
                break;
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}
oneFragment代码如下，其他几个fragment就不全部列出： 

package com.example.dingbutab;

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

/**
 * 全部菜单列表
 * Created by Administrator on 2016/2/24 0024.
 */
public class oneFragment extends Fragment {
    View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view=inflater.inflate(R.layout.one_fragment, container, false);
        return  view;
    }
}
one_fragment.xml: 

<?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">
    <TextView
        android:layout_margin="10dp"
        android:textSize="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        android:background="@color/colorPrimary"/>
</LinearLayout>
fragment的适配器MyFragmentAdapter: 

package com.example.dingbutab;

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

import java.util.List;

public  class MyfragmentAdpter extends FragmentStatePagerAdapter {
    private List<Fragment> fragmentList;
    public MyfragmentAdpter(FragmentManager fragmentManager, List<Fragment> fragmentList1){
        super(fragmentManager);
        this.fragmentList=fragmentList1;
    }
    public Fragment getItem(int position){
        return  fragmentList.get(position);
    }
    public int  getCount(){
        return  fragmentList.size();
    }}
其中颜色值和字体根据自己需要自行设置。

功能实现就是这样，有问题欢迎留言，大家一起进步。


睡不醒的胖子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 自定义 ViewPager 打造千变万化的图片切换效果
2401_84123005的博客
04-22 825
本文讲解了我对Android开发现状的一些看法，也许有些人会觉得我的观点不对，但我认为没有绝对的对与错，一切交给时间去证明吧！愿与各位坚守的同胞们互相学习，共同进步！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！[外链图片转存中…(img-QDVx7yFt-1713764789370)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！
android viewpager 切换fragment,Android App中使用ViewPager+Fragment实现滑动切换效果
weixin_36057373的博客
05-27 709
在android应用中，多屏滑动是一种很常见的风格，没有采用viewpager的代码实现会很长，如果采用ViewPager，代码就会短很多，但是使用ViewPager也有弊端：需要导入android-support-v4.jar、细节无法控制。不过现在情况已经不一样了，android-support-v4中提供了很多实用的功能，以至于现在新建一个android工程默认都会导入这个jar包。那我们就...
Android ViewPager切换的七种动画
01-05
Android ViewPager切换的七种动画，分别是：深入浅出，立方体，旋转，左右折叠，右上角进入，右下角进入和淡入淡出。
ViewPager+Fragment使用动态修改每个fragment的状态栏颜色以及Fragment的懒加载
parade岁月的博客
09-17 847
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Android 如何更改状态栏颜色
m0_70082867的博客
05-04 3513
然后在我们的Activity的onCreate方法中使用以上代码就可以了。 问题及解决方法 但是在使用之后，我们会发现，我们Activity的布局内容顶到了状态栏上去了，被状态栏及ActionBar所覆盖。解决方法很简单，只需要在我们的布局文件的根元素中设置以下属性： android:fitsSystemWindows="true" 1 它的意思是使这个layout内嵌，也就是会为状态栏等留出空间，于是我们的布局就恢复正常了。 但是问题来了，假如你有几十个Activity，每一个都要修改它的布局文件，是
Android 中 完成ViewPager切换页面，使相对应的Button或TextView变色
cichanshuang8394的博客
04-28 382
ViewPager背景颜色的改变 当点击一个viewpage页面，相对应的按钮或者文字变色，当转到其他页面时会恢复之前的颜色 代码如下： 为 viewpager 添加一个监听 viewPager.setOnPageChangeListener(new OnPageChange...
android的view如何切换,Android ViewPager实现选项卡切换
weixin_42638178的博客
05-27 502
本文实例介绍了ViewPager实现选项卡切换，效果图如下：步骤一：这里使用兼容低版本的v4包进行布局，这里eclipse没有输入提示，所以要手动输入，文件名称“activity_main.xml”xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_heigh...
Android用ViewPager实现滑动切换页面
weixin_42824294的博客
03-04 5728
ViewPager实现滑动切换页面 实现环境 Eclipse Android SDK 21 jdk1.7 ViewPager是Google的support.v4包中的支持控件，可以实现View之间的切换 所需材料 6张图片（底部导航按钮，每个按钮两种状态的照片）： 结构图 滑动过程描述 1.框架顶部不改变。 2.点击框架底部按钮，页面随着按钮点击而切换。 eg:当前按钮1为点击状态，中间部分显示...
android 自定义酷炫ViewPager切换效果带页面弹性指示器动画
09-02
在本教程中，我们将深入探讨如何创建一个自定义的ViewPager，使其具有酷炫的页面切换动画以及带有弹性效果的页面指示器。 首先，我们需要理解ViewPager的基本工作原理。ViewPager是Android Support Library的一部分...
Android ViewPager实现动画切换效果
08-31
总结来说，Android中的ViewPager结合`setPageTransformer`接口，为开发者提供了丰富的动画定制能力，能够创造出各种独特的页面切换效果，从而提升应用的用户体验和视觉吸引力。通过理解并熟练运用这些技术，开发者...
Android实现千变万化的ViewPager切换动画
09-02
在本文中，我们将深入探讨如何在Android中实现千变万化的ViewPager切换动画，利用`setPageTransformer`方法来自定义PageTransformer，从而创建个性化的页面过渡效果。 首先，让我们了解`setPageTransformer`的基本...
android viewpager各种滑动动画
12-10
一款android viewpager 自定义滑动动画效果，很多种效果有你想要的，还可以理解之后自己写出自己想要的效果，很简单，调用就一段代码，不影响性能
Android动画全篇系列（十二）——ViewPager滑动动画
01-03
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而ViewPager运用于轮播图，或者其他类似的滑动展示的效果时，我们不拘泥于普通的滑动效果，非得实现一些卓尔不群的效果。 二、实现 1、参数的介绍 我们只需简单的调用viewPager.setPage
Android ViewPager实现选项卡切换
09-02
在实际应用中，通常会结合ActionBar或Toolbar的TabLayout来实现更美观的选项卡切换效果。TabLayout提供了与ViewPager集成的便捷方式，可以自动管理选项卡的显示和切换。然而，本示例中使用的是较旧的PagerTabStrip，...
ViewPager的切换动画
weixin_42643321的博客
03-23 733
ViewPager切换动画
Android——ViewPager多页面滑动切换以及动画效果
weixin_30561425的博客
05-28 128
一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。 二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是andr...
光纤振动传感器的研究.doc
最新发布
07-16
传感器

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值