android 标签标题固定页卡滑动效果

标题固定页卡滑动效果的实现，先看一下效果图。

当滑动下面内容页卡的时候，上面的标题固定。下面具体讲一下怎么实现这种效果。
在项目中使用了v4包的viewpager组件。我们需要三个布局文件。首先是主界面的布局；其次是每个viewpager的布局，我这里每个viewpager布局都是用的一个，所以只需要一个viewpager布局就行；最后需要一个listview的item布局。
下面将代码贴出来看看
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/nav_bar"
        android:orientation="vertical"
        android:padding="0dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:gravity="center" >

                <TextView
                    android:id="@+id/text1"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="@string/pvrCompleted"
                    android:textColor="#969696"
                    android:textSize="17dp" />

                <TextView
                    android:id="@+id/text2"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:textColor="#969696"
                    android:text="@string/pvrUnfinished"
                    android:textSize="17dp" />

                <TextView
                    android:id="@+id/text3"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="@string/pvrFailure"
                    android:textColor="#969696"
                    android:textSize="17dp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/cursor"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:background="@drawable/nav_bar_focus"
                android:contentDescription="@string/app_name"
                android:gravity="left"
                android:src="@drawable/nav_bar_focus" />
        </LinearLayout>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pvr_user_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

lay1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ListView
        android:id="@+id/mylistview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>
</LinearLayout>

listview.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="50dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:minHeight="50dp"
    android:orientation="horizontal"
    android:padding="0dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="18dp"
        android:gravity="center_horizontal|center"
        android:minHeight="50dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/title"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical|left"
            android:layout_weight="1"
            android:gravity="center_vertical|left"
            android:singleLine="true"
            android:textColor="#323232"
            android:textSize="18dp" />

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="15dp"
            android:contentDescription="@string/app_name" />
    </LinearLayout>

</LinearLayout>

现在布局文件有了，只需要一个MainActivity.java来将我们的功能实现。

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

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Matrix;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
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.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

    ViewPager mViewPager;//页卡使用viewpager实现
    private LinearLayout linearLayout1;
    private TextView textView1, textView2, textView3;//三个标题
    private int currIndex = 0;// 当前页卡编号
    private ImageView imageView;// 页卡标题动画图片
    private int textViewW = 0;// 页卡标题的宽度
    private List<View> listViews;//初始化viewpager时使用的view集合
    private Resources resources;
    private View view1, view2, view3;//viewpager中存放的三个view
    private LinearLayout layout1, layout2, layout3;//三个view对应的布局
    private ListView listview1, listview2, listview3;//三个listview
    private SimpleAdapter list1, list2, list3;//listview的适配器
    /* mList是用来存放要显示的数据 */
    private List<HashMap<String, Object>> mList = new ArrayList<HashMap<String, Object>>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        resources = this.getResources();
        //加载组件
        initControl();
        //加载viewpager
        initViewPager();
        //初始化页卡标题 
        InitTextView();
        //初始化动画 
        InitImageView();
    }

    private void initControl() {
        imageView = (ImageView) findViewById(R.id.cursor);
        linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
        mViewPager = (ViewPager) findViewById(R.id.pvr_user_pager);
        mViewPager.setOffscreenPageLimit(2);/* 预加载页面 */
    }

    /* 初始化ViewPager */
    private void initViewPager() {
        listViews = new ArrayList<View>();
        LayoutInflater mInflater = getLayoutInflater();
        view1 = mInflater.inflate(R.layout.lay1, null);
        view2 = mInflater.inflate(R.layout.lay1, null);
        view3 = mInflater.inflate(R.layout.lay1, null);
        listViews.add(view1);
        listViews.add(view2);
        listViews.add(view3);
        //加载viewpager
        mViewPager.setAdapter(new MyPagerAdapter(listViews));
        mViewPager.setCurrentItem(0);
        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
        initList();
    }

    /* 初始化各个页卡列表 */
    private void initList() {
        layout1 = (LinearLayout) view1.findViewById(R.id.layout1);
        layout2 = (LinearLayout) view2.findViewById(R.id.layout1);
        layout3 = (LinearLayout) view3.findViewById(R.id.layout1);

        /* 给各个页卡不同的背景以示区别 */
        layout1.setBackgroundColor(0xffFCDAD5);
        layout2.setBackgroundColor(0xffFFFAB3);
        layout3.setBackgroundColor(0xffC8E2B1);

        listview1 = (ListView) view1.findViewById(R.id.mylistview);
        listview2 = (ListView) view2.findViewById(R.id.mylistview);
        listview3 = (ListView) view3.findViewById(R.id.mylistview);

        /* 页卡数据 */
        mList = getData();
        list1 = new SimpleAdapter(this, mList, R.layout.listview, new String[] {
                "title", "logo" }, new int[] { R.id.title, R.id.logo });
        list2 = new SimpleAdapter(this, mList, R.layout.listview, new String[] {
                "title", "logo" }, new int[] { R.id.title, R.id.logo });
        list3 = new SimpleAdapter(this, mList, R.layout.listview, new String[] {
                "title", "logo" }, new int[] { R.id.title, R.id.logo });

        listview1.setAdapter(list1);
        listview2.setAdapter(list2);
        listview3.setAdapter(list3);
    }

    /* 返回列表数据 */
    private List<HashMap<String, Object>> getData() {
        HashMap<String, Object> hashMap;
        for (int i = 0; i < 15; i++) {
            hashMap = new HashMap<String, Object>();
            hashMap.put("logo", R.drawable.ic_launcher);
            hashMap.put("title", resources.getString(R.string.app_name));
            mList.add(hashMap);
        }
        return mList;
    }

    /* 初始化页卡标题 */
    private void InitTextView() {
        textView1 = (TextView) findViewById(R.id.text1);
        textView2 = (TextView) findViewById(R.id.text2);
        textView3 = (TextView) findViewById(R.id.text3);
        //为标题添加点击事件
        textView1.setOnClickListener(new MyOnClickListener(0));
        textView2.setOnClickListener(new MyOnClickListener(1));
        textView3.setOnClickListener(new MyOnClickListener(2));
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub

    }

    /**
     * ViewPager适配器
     */
    public class MyPagerAdapter extends PagerAdapter {
        public List<View> mListViews;

        public MyPagerAdapter(List<View> mListViews) {
            this.mListViews = mListViews;
        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView(mListViews.get(arg1));
        }

        @Override
        public void finishUpdate(View arg0) {
        }

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

        @Override
        public Object instantiateItem(View arg0, int arg1) {
            ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
            return mListViews.get(arg1);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == (arg1);
        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
        }

        @Override
        public Parcelable saveState() {
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
        }
    }

    /* 页卡切换监听 */
    public class MyOnPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {
            if (textViewW == 0) {
                textViewW = textView1.getWidth();
            }
            Animation animation = new TranslateAnimation(textViewW * currIndex,
                    textViewW * arg0, 0, 0);
            currIndex = arg0;
            animation.setFillAfter(true);/* True:图片停在动画结束位置 */
            animation.setDuration(300);
            imageView.startAnimation(animation);
            setTextTitleSelectedColor(arg0);
            setImageViewWidth(textViewW);

        }

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

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }

    /* 设置标题文本的颜色 */
    private void setTextTitleSelectedColor(int arg0) {
        int count = mViewPager.getChildCount();
        for (int i = 0; i < count; i++) {
            TextView mTextView = (TextView) linearLayout1.getChildAt(i);
            if (arg0 == i) {
                mTextView.setTextColor(0xffc80000);
            } else {
                mTextView.setTextColor(0xff969696);
            }
        }
    }

    /* 设置图片宽度 */
    private void setImageViewWidth(int width) {
        if (width != imageView.getWidth()) {
            LayoutParams laParams = (LayoutParams) imageView.getLayoutParams();
            laParams.width = width;
            imageView.setLayoutParams(laParams);
        }
    }

    /* 标题点击监听 */
    private class MyOnClickListener implements OnClickListener {
        private int index = 0;

        public MyOnClickListener(int i) {
            index = i;
        }

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

    /* 初始化动画 */
    private void InitImageView() {
        Matrix matrix = new Matrix();
        matrix.postTranslate(0, 0);
        imageView.setImageMatrix(matrix);// 设置动画初始位置
    }

}

这样我们就是先了需要的功能，其实也不难。。。