ViewPager指示器

最新推荐文章于 2022-03-10 16:48:24 发布
最新推荐文章于 2022-03-10 16:48:24 发布
阅读量284 收藏
点赞数
分类专栏： android 文章标签： viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellcw/article/details/52695510
版权

用到的知识:
1.Fragment与FragmentPagerAdapter结合使用
2.ViewPager滑动事件
2.drawable资源的使用
3.屏幕宽度的获取
4.Matrix的使用
5.位移动画的使用

package com.xspacing.viewpagerindicator;

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

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
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.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 
 * @ClassName MainActivity.java
 * @Description TODO 指示器
 * @author Smile
 * @version v1.0
 * @date 2016年9月27日 下午4:16:30
 */
public class MainActivity extends FragmentActivity implements OnPageChangeListener {

    private static final String TAG = "MainActivity";
    private TextView mTvMusic;
    private TextView mTvMovie;
    private TextView mTvGame;
    private ViewPager mViewPager;
    private ImageView mIvIndicator;
    private int offset;// 指示器初始偏移量
    private int indicatorWidth;// 指示器的宽度
    private int screenWidth; // 屏幕的宽度
    private List<Fragment> mList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
    }

    private void initViews() {
        mTvMusic = (TextView) findViewById(R.id.main_tv_title_music);
        mTvMovie = (TextView) findViewById(R.id.main_tv_title_movie);
        mTvGame = (TextView) findViewById(R.id.main_tv_title_game);
        mIvIndicator = (ImageView) findViewById(R.id.main_iv_indicator);
        mViewPager = (ViewPager) findViewById(R.id.main_vp_show);
        mTvMusic.setOnClickListener(new MyOnClickListener(0));
        mTvMovie.setOnClickListener(new MyOnClickListener(1));
        mTvGame.setOnClickListener(new MyOnClickListener(2));
        mList = new ArrayList<Fragment>();
        mList.add(new FragmentMusic());
        mList.add(new FragmentMovie());
        mList.add(new FragmentGame());
        mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), mList));
        mViewPager.setCurrentItem(0);
        mViewPager.addOnPageChangeListener(this);
    }

    private void initDatas() {
        // 获取指示器图片的宽度
        indicatorWidth = BitmapFactory.decodeResource(getResources(), R.drawable.indicator).getWidth();
        DisplayMetrics dm = new DisplayMetrics(); // 获取屏幕参数对象
        getWindowManager().getDefaultDisplay().getMetrics(dm); // 获取当前手机屏幕宽度
        // 屏幕宽度
        screenWidth = dm.widthPixels;
        // 指示器初始偏移量的计算
        offset = (screenWidth / mList.size() - indicatorWidth) / 2;
        Matrix ma = new Matrix();
        ma.postTranslate(offset, 0);
        //设置指示器偏移
        mIvIndicator.setImageMatrix(ma);
    }

    private class MyOnClickListener implements OnClickListener {

        private int index;

        public MyOnClickListener(int index) {
            this.index = index;
        }

        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(index);
        }

    }

    @Override
    public void onPageScrollStateChanged(int position) {
    }

    @Override
    public void onPageScrolled(int position, float off, int arg2) {
        // 创建平移动画
        int one = screenWidth / mList.size();
        //设置动画随着偏移改变而改变
        TranslateAnimation anim = new TranslateAnimation(one * off + one * position, position * one+one * off, 0, 0);
        anim.setDuration(300);
        anim.setFillAfter(true);// 停留在动画结束的位置
        mIvIndicator.startAnimation(anim);
    }

    @Override
    public void onPageSelected(int position) {
    }
}

package com.xspacing.viewpagerindicator;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.view.View;

public class FragmentAdapter extends FragmentPagerAdapter {


    List<Fragment> mList;
    public FragmentAdapter(FragmentManager fm) {
        super(fm);
    }

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

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

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

}

package com.xspacing.viewpagerindicator;

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

public class FragmentGame extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_game, container, false);
    }

}

package com.xspacing.viewpagerindicator;

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

public class FragmentMovie extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_movie, container, false);
    }

}

package com.xspacing.viewpagerindicator;

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

public class FragmentMusic extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_music, container, false);
    }

}

activity_main.xml

<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"
    tools:context="com.xspacing.viewpagerindicator.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#44ff0000" >

        <TextView
            android:id="@+id/main_tv_title_music"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="音乐"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/main_tv_title_movie"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="电影"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/main_tv_title_game"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="游戏"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#44ff0000" >

        <ImageView
            android:id="@+id/main_iv_indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="matrix"
            android:src="@drawable/indicator" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#aaa" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

fragment_game.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"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Game" />

</RelativeLayout>

其他两个fragment布局与以上相同

hellcw
关注
专栏目录
Android ViewPager指示器
2301_82242326的博客
04-28 933
邮箱：1085220040@qq.com日期：2020/1/6 10:41*///指示器样式一 选中未选中都是圆点//指示器样式二 选中未选中都是方形//指示器样式三 选中方形，未选中圆点//横向排列//纵向排列//指示器之间的间距//指示器排列方向//选中与为选中的颜色//指示器样式，默认都是圆点//样式一 圆点半径大小//样式二 方形大小及圆角//样式三 选中的方形大小及圆角//样式三 未选中的圆点半径//画笔//指示器item的区域。
viewpager页面指示器
11-03
该项目工程实现了自定义的viewpager页面指示器，在有美工和没有美工切图的情况下，都可以轻松实现，其中用到了给view自定义属性attrs。
ViewPager 指示器
lxfeng1098751554的专栏
11-28 1120
项目需要一个ViewPager的指示器，发现Android联系人中有该控件，于是抽取出来分享给大家：ViewPagerTabs .java:public class ViewPagerTabs extends HorizontalScrollView implements ViewPager.OnPageChangeListener { ViewPager mPager; privat
Viewpager指示器Indicator
wangyaqian1212的博客
07-20 642
效果：ViewPager跟随Tab动，底端绘制三角形 布局文件中：           android:layout_width="match_parent"         android:layout_height="45dp"         android:orientation="horizontal"         android:id="@+id/viewpag
Viewpager指示器
TheWindRisesla的博客
03-10 737
效果 public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener { /** * 需要创建的指示器个数 */ private int childViewCount = 0; /** * 设置圆点间margin */ private int mInterval; /** * 当前选中的位置
viewpager指示器
renyuan1991的博客
11-08 115
[/color] 1. 2. 3. [color=darkblue][size=medium]实现代码[/size][/color]
Android自定义ViewPager指示器
09-01
【Android自定义ViewPager指示器详解】 在Android应用开发中，ViewPager是一种常见的滑动视图组件，用于展示多个页面，常用于实现类似轮播图或标签页的效果。然而，原生的ViewPager并不自带指示器，而指示器对于...
android ViewPager指示器
03-27
而ViewPager指示器则是与ViewPager配合使用，用以显示当前所选页面的状态，通常是通过小圆点或其他图形来直观地表示。在本教程中，我们将深入探讨如何在Android应用中实现一个简单的ViewPager指示器，并通过一行代码...
TabLayout实现ViewPager指示器的方法
08-27
在Android开发中，`TabLayout` 是一个非常实用的组件，它主要用于与 `ViewPager` 配合，提供页面切换时的标签指示器效果。在 `TabLayout` 出现之前，开发者通常需要借助第三方库，如 `TabPageIndicator` 来实现类似...
ViewPager和Fragment结合,利用(HorizontalScrollView)实现指示器与ViewPager同时滑动的动态效果
04-01
ViewPager和Fragment结合,利用(HorizontalScrollView)实现指示器与ViewPager同时滑动的动态效果
ViewPager滑动跟随的指示器
08-24
ViewPager滑动跟随的指示器
【笔记】自定义控件——ViewPager指示器
林zero的专栏
03-19 501
ViewPager的用途很广，像滚动广告、引导页等就常用这个控件实现，而在这些控件里常常会需要一个指示器来表示当前所显示的是第几张广告或第几页。 不堪回首的过去 以前在滚动广告时常常在布局文件中放一个LinearLayout，然后在代码中动态创建ImageView，添加到容器中， dotList = new ArrayList(); for (int i=0;i<list.size();i+
Android简单的ViewPager指示器
冷不冷的博客
06-16 8169
平常写项目在写介绍页,或者一些简单的轮播图的时候,总会需要搭配指示器来标明当前在什么位置.写法也比较多,刚好自己需要用到,以前用的一些方法,用起来需要配置好多东西,有些大材小用,所以来简单的实现一个.效果图如下:一、简单分析与代码实现因为比较简单,所以就简单的分析一下: 1)每一个指示器项有两种状态,普通状态和选中状态,所以需要准备两种状态的图片. 2)指示器的个数和ViewPager的页数要保
viewpager特效指示器-
未来很长，但我会努力的走下去。
02-14 334
IndicatorView 项目地址：steelkiwi/IndicatorView  简介：Configurable view for ViewPager 更多：作者   提 Bug   官网    标签： viewpager特效指示器- IndicatorView to highlight current viewpager position View ...
BasePageIndicator-ViewPager指示器
孤独正患者的专栏
01-17 685
BasePageIndicator-ViewPager指示器参考JakeWharton/ViewPagerIndicator和astuetz/PagerSlidingTabStrip的源码，感谢。 初衷是想自定义个指示器，看了上述的源码，干脆自己写出来了一个通用的BasePageIndicator，自定义指示器只需重写以下方法：getTabItemView() drawItemUnder() dr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值