ViewPager+Fragment（二）

在上一篇博客中，虽然我们***了一个简单的Demo，但是在实际过程中，我们的标题栏都是固定不动的，因此我们需要使标题栏固定。

同时我们也希望有一条下划线跟随移动。

紧接着上一篇中的demo，我们继续更改。

activity_main:

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

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

        <TextView
            android:id="@+id/tv_title1"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题一" />

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

        <TextView
            android:id="@+id/tv_title2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题二" />

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

        <TextView
            android:id="@+id/tv_title3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题三" />

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

        <TextView
            android:id="@+id/tv_title4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题四" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#848484" />

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

注意！！下划线imgView要设置属性

<span style="color:#FF0000;"><strong> android:scaleType="fitXY"</strong></span>

这样下划线的图片即可改变大小

MainActivity.xml

package com.xiaoqi.viewpagerdemo;

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

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.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnClickListener {
	private ViewPager viewPager;
	private List<Fragment> list = new ArrayList<Fragment>();
	private TextView tv_title1, tv_title2, tv_title3, tv_title4;
	private ImageView img;
	private int currIndex;// 当前页卡编号
	private int bmpW;// 横线图片宽度
	private int offset;// 图片移动的偏移量

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		initParams();
		initData();
		InitImage();
		MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), list);
		viewPager.setAdapter(adapter);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

	private void initParams() {
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		tv_title1 = (TextView) findViewById(R.id.tv_title1);
		tv_title2 = (TextView) findViewById(R.id.tv_title2);
		tv_title3 = (TextView) findViewById(R.id.tv_title3);
		tv_title4 = (TextView) findViewById(R.id.tv_title4);
		img = (ImageView) findViewById(R.id.img);
		tv_title1.setOnClickListener(this);
		tv_title2.setOnClickListener(this);
		tv_title3.setOnClickListener(this);
		tv_title4.setOnClickListener(this);
	}

	private void initData() {
		AFragment aFragment = new AFragment();
		BFragment bFragment = new BFragment();
		CFragment cFragment = new CFragment();
		DFragment dFragment = new DFragment();
		// 添加Fragment
		list.add(aFragment);
		list.add(bFragment);
		list.add(cFragment);
		list.add(dFragment);
	}

	/*
	 * 初始化图片的位移像素
	 */
	public void InitImage() {
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.line)
				.getWidth();
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;
		offset = (screenW / 4 - bmpW) / 2;
		// imgageview设置平移，使下划线平移到初始位置（平移一个offset）
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		img.setImageMatrix(matrix);
		// 设置图片的宽度和高度
		img.setLayoutParams(new LayoutParams(screenW / 4, 3));
	}

	class MyAdapter extends FragmentPagerAdapter {
		List<Fragment> list;

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

		@Override
		public Fragment getItem(int arg0) {
			return list.get(arg0);
		}

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

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.tv_title1:
			currIndex = 0;
			viewPager.setCurrentItem(0);
			break;
		case R.id.tv_title2:
			currIndex = 1;
			viewPager.setCurrentItem(1);
			break;
		case R.id.tv_title3:
			currIndex = 2;
			viewPager.setCurrentItem(2);
			break;
		case R.id.tv_title4:
			currIndex = 3;
			viewPager.setCurrentItem(3);
			break;
		}
	}

	class MyOnPageChangeListener implements OnPageChangeListener {
		private int one = offset * 2 + bmpW;// 两个相邻页面的偏移量，即屏幕的四分之一

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

		}

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

		}

		@Override
		public void onPageSelected(int arg0) {
			// TODO Auto-generated method stub
			Animation animation = new TranslateAnimation(currIndex * one, arg0
					* one, 0, 0);// 平移动画
			currIndex = arg0;
			animation.setFillAfter(true);// 动画终止时停留在最后一帧，不然会回到没有执行前的状态
			animation.setDuration(200);// 动画持续时间0.2秒
			img.startAnimation(animation);// 是用ImageView来显示动画的
		}
	}
}

效果如下图：