仿米UI的ViewPagerIndicator ViewPager指示器

最新推荐文章于 2021-05-27 08:59:31 发布

ly2072925694

最新推荐文章于 2021-05-27 08:59:31 发布

阅读量402

点赞数

分类专栏： Android

Android 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个自定义 ViewPager 指示器的实现方案，包括如何跟随滑动更新位置，绘制三角形指示标记等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是ViewPagerIndicatorDemo的工程目录：

MainActivity代码：

package com.example.viewpagerindicator;

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

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Window;

import com.example.view.ViewPagerIndicator;

public class MainActivity extends FragmentActivity {

	private ViewPager mViewPager = null;
	private ViewPagerIndicator mIndicator;

	private List<String> mTitles = Arrays.asList("短信", "收藏", "推荐");

	private List<VpSimpleFragment> mContents = new ArrayList<VpSimpleFragment>();

	private FragmentPagerAdapter mAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		initView();
		initDatas();

		mViewPager.setAdapter(mAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {

			}

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

				mIndicator.scroll(position, positionOffset);

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});

	}

	private void initDatas() {

		for (String title : mTitles) {
			VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
			mContents.add(fragment);
		}

		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return mContents.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				// TODO Auto-generated method stub
				return mContents.get(arg0);
			}
		};

	}

	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mIndicator = (ViewPagerIndicator) findViewById(R.id.id_indicator);

	}

}

ViewPagerIndicator代码：

package com.example.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import android.widget.Toast;

public class ViewPagerIndicator extends LinearLayout {

	private Paint mPaint = null;//用于绘制三角形的画笔
	private Path mPath = null;//用路径来表示出三角形
	private int mTriangleWidth;//三角形的宽度
	private int mTriangleHeight;//三角形的高度

	private static final int titleCount = 3;//标签的数量
	private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;//三角形宽度和tabWidth的比例
	private int mInitTranslationX = 0;//初始时的偏移量
	private int mTranslationX = 0;//随后的偏移量，三角形正真的偏移量为初始偏移量+随后的偏移量

	public ViewPagerIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);

		//初始化画笔
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.parseColor("#404040"));
		mPaint.setStyle(Style.FILL);
		mPaint.setPathEffect(new CornerPathEffect(3));

	}

	public ViewPagerIndicator(Context context) {
		this(context, null);
	}

	@Override
	protected void dispatchDraw(Canvas canvas) {

		// Toast.makeText(getContext(), "dispatchDraw",
		// Toast.LENGTH_SHORT).show();

		canvas.save();

		//先确定需要在画布的那个点开始画。
		canvas.translate(mInitTranslationX + mTranslationX, getHeight());
		//然后根据路径画出了一个三角形。
		canvas.drawPath(mPath, mPaint);

		canvas.restore();

		// 此处调试发现高度为0，导致没有绘制成功。
		// String space = "    720    70    100    0    40    0";
		// System.out.println(getWidth() + space + getHeight() + space +
		// mInitTranslationX + space +
		// mTranslationX + space + mTriangleWidth + space + mTriangleHeight);

		super.dispatchDraw(canvas);

	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);

		// Toast.makeText(getContext(), "onSizeChanged",
		// Toast.LENGTH_SHORT).show();

		mTriangleWidth = (int) (w / titleCount * RADIO_TRIANGLE_WIDTH);
		mInitTranslationX = w / titleCount / 2 - mTriangleWidth / 2;

		initTriangle();

	}

	/**
	 * 初始化三角形
	 */
	private void initTriangle() {

		mTriangleHeight = mTriangleWidth / 2;

		mPath = new Path();
		mPath.moveTo(0, 0);
		mPath.lineTo(mTriangleWidth, 0);
		mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);

		mPath.close();

	}

	/**
	 * 指示器跟随手指移动
	 * 此方法公开用于在VIewPager对象中调用。
	 * @param position
	 * @param offset
	 */
	public void scroll(int position, float offset) {
		int tabWidth = getWidth() / titleCount;

		mTranslationX = (int) (tabWidth * offset + tabWidth * position);

		invalidate();
	}

}

/*
* (non-Javadoc)
* @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int)
*
* 使用ViewPager控件的时候，需要实现OnPageChangeListener接口，而OnPageChangeListener这
* 个接口时必须实现三个方法：onPageScrollStateChanged，onPageScrolled ，onPageSelected方法。
onPageScrollStateChanged(int arg0) ，此方法是在状态改变的时候调用，其中arg0这个参数有三
种状态（0，1，2）。arg0 ==1表示正在滑动，arg0==2表示滑动完毕了，arg0==0表示什么都没做。当
页面开始滑动的时候，三种状态的变化顺序为（1，2，0）。
onPageScrolled(int arg0,float arg1,int arg2) ，当页面在滑动的时候会调用此方法，在滑动被
停止之前，此方法回一直得到调用。其中三个参数的含义分别为：arg0 :当前页面，及你点击滑动的页面。
arg1:当前页面偏移的百分比。arg2:当前页面偏移的像素位置。
（参见官网：http://docs.eoeandroid.com/reference/android/support/v4/view/ViewPager.OnPageChangeListener.html
#onPageScrolled(int, float, int)）
onPageSelected(int arg0) ，此方法是页面跳转完后得到调用，arg0是你当前选中的页面的position。
*/

VpSimpleFragment代码：

package com.example.viewpagerindicator;

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

public class VpSimpleFragment extends Fragment {

	private String mTitle;
	public static final String BUNDLE_TITLE = "title";

	public static VpSimpleFragment newInstance(String title) {
		Bundle bundle = new Bundle();
		bundle.putString(BUNDLE_TITLE, title);

		VpSimpleFragment fragment = new VpSimpleFragment();
		fragment.setArguments(bundle);
		return fragment;

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		Bundle bundle = getArguments();

		if (bundle != null) {
			mTitle = bundle.getString(BUNDLE_TITLE);
		}

		TextView tv = new TextView(getActivity());
		tv.setText(mTitle);
		tv.setGravity(Gravity.CENTER);

		return tv;

	}

}

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=".MainActivity" >

    <com.example.view.ViewPagerIndicator 
        android:id="@+id/id_indicator"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#D1EEEE"
        android:orientation="horizontal"
        >
        <TextView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="短信"
            android:layout_weight="1"
            android:textSize="16sp"
            android:textColor="#404040"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="收藏"
            android:layout_weight="1"
            android:textSize="16sp"
            android:textColor="#404040"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            />
        <TextView 
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="推荐"
            android:layout_weight="1"
            android:textSize="16sp"
            android:textColor="#404040"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            />
        
    </com.example.view.ViewPagerIndicator>
    
    <android.support.v4.view.ViewPager
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:id="@+id/id_viewpager"
        >
    </android.support.v4.view.ViewPager>

</LinearLayout>

源码地址：http://pan.baidu.com/s/1dF5FcAl