超簡單的viewpage指示器

原理通過計算滑動距離，通過動畫進行滑動。

直接上代碼。

佈局文件

通過RadioButton 加 viewpage

但是在RadioButton 的下面我們新增了一個Imageview 來表示我們的指示器。

<?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:orientation="vertical" >

    <!-- <include layout="@layout/shenyou_title_shaixuan" /> -->

    <RelativeLayout
        android:id="@+id/my"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="2dp"
        android:paddingBottom="5dp"
        android:background="#0FFF" >
        <RadioGroup
            android:id="@+id/ch_home_radio"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center_vertical"
            android:orientation="horizontal"
             >

            <RadioButton
                android:id="@+id/remen"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:drawablePadding="2dp"
                android:background="#00000000"
                android:button="@null"
                android:ellipsize="marquee"
                android:gravity="center"
                android:checked="true"
                android:text="熱門"
                android:textColor="#000000"
                android:textSize="@dimen/text_size4" />

            <RadioButton
                android:id="@+id/tuijian"
                android:layout_width="0dp"
                android:layout_weight="1"
                 android:layout_height="wrap_content"
                android:drawablePadding="2dp"
                 android:background="#00000000"
                android:button="@null"
                android:ellipsize="marquee"
                android:gravity="center"
                android:text="推薦"
                android:textColor="#000000"
                android:textSize="@dimen/text_size4" />

            <RadioButton
                android:id="@+id/xinren"
                android:layout_width="0dp"
                android:layout_weight="1"
                 android:layout_height="wrap_content"
                android:drawablePadding="2dp"
                 android:background="#00000000"
                android:button="@null"
                android:ellipsize="marquee"
                android:gravity="center"
                android:text="新人"
                android:textColor="#000000"
                android:textSize="@dimen/text_size4" />
        </RadioGroup>
    </RelativeLayout>

    <LinearLayout
        android:gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:background="#FFF"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="wrap_content"
            android:layout_height="2dip"
            android:scaleType="centerCrop"
            android:src="@drawable/cursor" />

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/line_size"
            android:background="@color/line_color" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="2" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

Fragment文件

首先 InitViewPager()；初始化我們的view和將子fragment放入

	private void InitViewPager() {
		remen = (Button) findViewById(R.id.remen);
		tuijian = (Button)findViewById(R.id.tuijian);
		xinren = (Button) findViewById(R.id.xinren);
		remen.setOnClickListener(this);
		tuijian.setOnClickListener(this);
		xinren.setOnClickListener(this);
		viewPager = (ViewPager)findViewById(R.id.vpager);
		mReMenFragment = new YouShenReMenFragment();
		mTuiJianFragment = new YouShenTuiJianFragment();
		mXinRenFragment = new YouShenXinRenFragment();
		mFragmentList.add(mReMenFragment);// 熱門
		mFragmentList.add(mTuiJianFragment);// 推薦
		mFragmentList.add(mXinRenFragment);// 新人
		mFragmentAdapter = new GameFragmentAdapter(getChildFragmentManager(),
				mFragmentList);
		viewPager.setAdapter(mFragmentAdapter);
		viewPager.setOffscreenPageLimit(1);
		viewPager.setCurrentItem(0);
		remen.setTextColor(0xffffa800);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

滑動時改變文字顏色方法setbutt（）

private void setbutt(){
	   remen.setTextColor(page==0?0xffffa800:0xff000000);
	   tuijian.setTextColor(page==1?0xffffa800:0xff000000);
	   xinren.setTextColor(page==2?0xffffa800:0xff000000); 
   }

設置onclick事件點擊滑動到相應的界面

@Override
	public void onClick(View v) {
		XHLog.e("=====", "currIndex="+currIndex);
		onResume();
		switch (v.getId()) {
		case R.id.remen:
			page=0;
			break;
		case R.id.xinren:
			page=2;
			break;
		case R.id.tuijian:
			page=1;
			break;
		default:
			break;
		}
		viewPager.setCurrentItem(page);

	}

初始化動畫和計算初始化

	private int offset = 0;// 動繪圖片偏移量
	private int currIndex = 0;// 當前頁卡編號
	private int bmpW;// 動繪圖片寬度

	/**
	 * 2 * 初始化動畫，這個就是頁卡滑動時，以下的橫線也滑動的效果，在這裏須要計算一些數據 
	 */
	private void InitImageView() {
		imageView = (ImageView)findViewById(R.id.cursor);
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 獲取分辨率寬度

		LayoutParams para = imageView.getLayoutParams();

		para.width = screenW / 3;//設置分成幾份
		imageView.setLayoutParams(para);
		bmpW = imageView.getWidth();

		offset = (screenW / 3 - bmpW) / 2;// 計算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 設置動畫初始位置

	}

v iewpage滑動監聽

public class MyOnPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public void onPageSelected(int arg0) {
			int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 偏移量
			int two = one * 2;// 頁卡1 -> 頁卡3 偏移量
			Animation animation = new TranslateAnimation(one * currIndex, one
					* arg0, 0, 0);// 顯然這個比較簡潔，僅僅有一行代碼。
			currIndex = arg0;
			animation.setFillAfter(true);// True:圖片停在動畫結束位置
			animation.setDuration(300);
			imageView.startAnimation(animation);
			page=arg0;
			setbutt();

這裏的滑動模塊是3個，如果超過3個怎麼優化

@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		anima(arg0);
		page = arg0;
		setbutt();

	}

anima（）方法

private void anima(int arg0) {
		// TODO Auto-generated method stub
		Animation animation = new TranslateAnimation(page * bmpw, arg0 * bmpw,
				0, 0);
		animation.setFillAfter(true);// True:圖片停在動畫結束位置
		animation.setDuration(300);
		game_fragment_select_line.startAnimation(animation);
	}

重寫onResume()

@Override
	public void onResume() {
		super.onResume();
		//頁卡切換回來時讓橫線停留在切換時的位置
		if(currIndex==0&&mReMenFragment!=null)
			mReMenFragment.onResume();
		else if(currIndex==1&&mTuiJianFragment!=null)
			mTuiJianFragment.onResume();
		else if(mXinRenFragment!=null)
			mXinRenFragment.onResume();
		if(imageView==null)
			return;
		Animation animation = new TranslateAnimation((offset * 2 + bmpW)*currIndex, (offset * 2 + bmpW)*currIndex, 0, 0);// 顯然這個比較簡潔，僅僅有一行代碼。
		animation.setFillAfter(true);// True:圖片停在動畫結束位置
		animation.setDuration(0);
		imageView.startAnimation(animation);
	}

重寫onPause（）

@Override
public void onPause() {
	// TODO Auto-generated method stub
	super.onPause();
	if(mFragmentList!=null&&mFragmentList.size()>page)
		mFragmentList.get(page).onPause();
}

ok。

上完整代碼

package com.qpp.V4Fragment;

import java.util.ArrayList;




import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

/*
 * 神遊頁面
 *
 */
public class SwimGodFragment extends Fragmentparent implements OnClickListener {
	private int offset = 0;// 動繪圖片偏移量
	private int currIndex = 0;// 當前頁卡編號
	private int bmpW;// 動繪圖片寬度
	private ImageView imageView;// 動繪圖片
	Button tuijian, remen, xinren;
	private ViewPager viewPager;
	private int page;
	private List<Fragment> mFragmentList = new ArrayList<Fragment>();
	private GameFragmentAdapter mFragmentAdapter;

	private YouShenReMenFragment mReMenFragment;
	private YouShenTuiJianFragment mTuiJianFragment;
	private YouShenXinRenFragment mXinRenFragment;

	private void InitViewPager() {
		viewPager = (ViewPager)findViewById(R.id.vpager);
		mReMenFragment = new YouShenReMenFragment();
		mTuiJianFragment = new YouShenTuiJianFragment();
		mXinRenFragment = new YouShenXinRenFragment();
		mFragmentList.add(mReMenFragment);// 熱門
		mFragmentList.add(mTuiJianFragment);// 推薦
		mFragmentList.add(mXinRenFragment);// 新人
		mFragmentAdapter = new GameFragmentAdapter(getChildFragmentManager(),
				mFragmentList);
		viewPager.setAdapter(mFragmentAdapter);
		viewPager.setOffscreenPageLimit(1);
		viewPager.setCurrentItem(0);
		remen.setTextColor(0xffffa800);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

	private void initPage() {
		remen = (Button) findViewById(R.id.remen);
		tuijian = (Button)findViewById(R.id.tuijian);
		xinren = (Button) findViewById(R.id.xinren);
		remen.setOnClickListener(this);
		tuijian.setOnClickListener(this);
		xinren.setOnClickListener(this);

	}

   private void setbutt(){
	   remen.setTextColor(page==0?0xffffa800:0xff000000);
	   tuijian.setTextColor(page==1?0xffffa800:0xff000000);
	   xinren.setTextColor(page==2?0xffffa800:0xff000000); 
   }
	@Override
	public void onClick(View v) {
		XHLog.e("=====", "currIndex="+currIndex);
		onResume();
		switch (v.getId()) {
		case R.id.remen:
			page=0;
			break;
		case R.id.xinren:
			page=2;
			break;
		case R.id.tuijian:
			page=1;
			break;
		default:
			break;
		}
		viewPager.setCurrentItem(page);
//		setbutt();
	}
	/**
	 * 2 * 初始化動畫，這個就是頁卡滑動時，以下的橫線也滑動的效果，在這裏須要計算一些數據 3
	 */
	private void InitImageView() {
		imageView = (ImageView)findViewById(R.id.cursor);
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 獲取分辨率寬度

		LayoutParams para = imageView.getLayoutParams();

		para.width = screenW / 3;//設置分成幾份
		imageView.setLayoutParams(para);
		bmpW = imageView.getWidth();

		offset = (screenW / 3 - bmpW) / 2;// 計算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 設置動畫初始位置

	}

	public class MyOnPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public void onPageSelected(int arg0) {
			int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 偏移量
			int two = one * 2;// 頁卡1 -> 頁卡3 偏移量
			Animation animation = new TranslateAnimation(one * currIndex, one
					* arg0, 0, 0);// 顯然這個比較簡潔，僅僅有一行代碼。
			currIndex = arg0;
			animation.setFillAfter(true);// True:圖片停在動畫結束位置
			animation.setDuration(300);
			imageView.startAnimation(animation);
			page=arg0;
			setbutt();


		}
	}
	
	@Override
	public void onResume() {
		super.onResume();
		//頁卡切換回來時讓橫線停留在切換時的位置
		if(currIndex==0&&mReMenFragment!=null)
			mReMenFragment.onResume();
		else if(currIndex==1&&mTuiJianFragment!=null)
			mTuiJianFragment.onResume();
		else if(mXinRenFragment!=null)
			mXinRenFragment.onResume();
		if(imageView==null)
			return;
		Animation animation = new TranslateAnimation((offset * 2 + bmpW)*currIndex, (offset * 2 + bmpW)*currIndex, 0, 0);// 顯然這個比較簡潔，僅僅有一行代碼。
		animation.setFillAfter(true);// True:圖片停在動畫結束位置
		animation.setDuration(0);
		imageView.startAnimation(animation);
	}

	@Override
	public View getView(LayoutInflater inflater) {
		// TODO Auto-generated method stub
		view = inflater.inflate(R.layout.shenyou_layout, null);
		initPage();
		InitViewPager();
		InitImageView();
		return view;
	}
@Override
public void onPause() {
	// TODO Auto-generated method stub
	super.onPause();
	if(mFragmentList!=null&&mFragmentList.size()>page)
		mFragmentList.get(page).onPause();
}
	@Override
	protected void lazyLoad() {
		super.lazyLoad();
		// TODO Auto-generated method stub
		
	}

}

truesA

發佈了38 篇原創文章 · 獲贊 13 · 訪問量 11萬+

私信關注

超簡單的viewpage指示器

andriod 無網絡邏輯設置和判斷

andriod 拿手機設備信息手機IMEI 設備ID等並http請求

簡單的Socket 編程服務端和客戶端（封裝）

複製粘貼工具類

簡單的 websocket

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結