Android 微博头条头部滑动的效果

效果图如上

package com.example.pageindicator;


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


import android.content.Context;
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.Log;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MainActivity extends FragmentActivity {


private ViewPager mViewPager;


private MyFragment fragment1;
private TwoFragment fragment2;
private ThreeFragment fragment3;
private FourFragment fragment4;
private FiveFragment fragment5;
private SixFragment fragment6;


private List<Fragment> fragments = new ArrayList<Fragment>();


private TextView tvBg1, tvBg2, tvBg3, tvBg4, tvBg5, tvBg6;


private List<TextView> bgLists = new ArrayList<TextView>();

private float maxHeight = 0, minHeight = 0;

private PageIndicator mIndicator ;

private RelativeLayout layout1,layout2,layout3,layout4,layout5,layout6;


private List<RelativeLayout> layoutLists = new ArrayList<RelativeLayout>();


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);


mViewPager = (ViewPager) findViewById(R.id.viewpager);

mIndicator=(PageIndicator) findViewById(R.id.indicator);



tvBg1 = (TextView) findViewById(R.id.bg1);
tvBg2 = (TextView) findViewById(R.id.bg2);
tvBg3 = (TextView) findViewById(R.id.bg3);
tvBg4 = (TextView) findViewById(R.id.bg4);
tvBg5 = (TextView) findViewById(R.id.bg5);
tvBg6 = (TextView) findViewById(R.id.bg6);



layout1=(RelativeLayout) findViewById(R.id.layout1);
layout2=(RelativeLayout) findViewById(R.id.layout2);
layout3=(RelativeLayout) findViewById(R.id.layout3);
layout4=(RelativeLayout) findViewById(R.id.layout4);
layout5=(RelativeLayout) findViewById(R.id.layout5);
layout6=(RelativeLayout) findViewById(R.id.layout6);



layoutLists.add(layout1);
layoutLists.add(layout2);
layoutLists.add(layout3);
layoutLists.add(layout4);
layoutLists.add(layout5);
layoutLists.add(layout6);



maxHeight = dip2px(this, 70);


minHeight = dip2px(this, 10);


tvBg2.setTranslationY(maxHeight - minHeight);
tvBg3.setTranslationY(maxHeight - minHeight);
tvBg4.setTranslationY(maxHeight - minHeight);
tvBg5.setTranslationY(maxHeight - minHeight);
tvBg6.setTranslationY(maxHeight - minHeight);


bgLists.add(tvBg1);
bgLists.add(tvBg2);
bgLists.add(tvBg3);
bgLists.add(tvBg4);
bgLists.add(tvBg5);
bgLists.add(tvBg6);


fragment1 = new MyFragment();
fragment2 = new TwoFragment();
fragment3 = new ThreeFragment();
fragment4 = new FourFragment();
fragment5 = new FiveFragment();
fragment6 = new SixFragment();


fragments.add(fragment1);
fragments.add(fragment2);
fragments.add(fragment3);
fragments.add(fragment4);
fragments.add(fragment5);
fragments.add(fragment6);


mViewPager.setAdapter(new MyPageAdapter(getSupportFragmentManager()));


mViewPager.addOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageSelected(int position) {


RelativeLayout layout=layoutLists.get(position);


if (layout != null) {


int l = layout.getLeft();//这里就是滑动距离啊

//计算滑动距离到中间位置的偏差
int x = l - mIndicator.getWidth() / 2 +layout.getMeasuredWidth()/2;

mIndicator.smoothScrollTo(x, mIndicator.getScrollY());

}


}


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

if (positionOffset > 0) {


RelativeLayout layoutLeft = layoutLists.get(position);


RelativeLayout layoutRight = layoutLists.get(position + 1);

int offset=(int) (layoutLeft.getLeft()
+ layoutLeft.getWidth() / 2 - mIndicator.getWidth()
/ 2 + layoutRight.getWidth() * positionOffset);//注意这个地方的实现



mIndicator.scrollTo(offset, 0);


}


if (bgLists.size() > position + 1 && positionOffset > 0) {


TextView left = bgLists.get(position);

TextView right = bgLists.get(position + 1);

left.setTranslationY((maxHeight - minHeight)*positionOffset);//这个地方的思路就是先隐藏再位移显示

right.setTranslationY((maxHeight-minHeight)*(1-positionOffset));


}
}


@Override
public void onPageScrollStateChanged(int state) {



}
});


}


class MyPageAdapter extends FragmentPagerAdapter {


public MyPageAdapter(FragmentManager fm) {
super(fm);
}


@Override
public Fragment getItem(int arg0) {


return fragments.get(arg0);
}


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


}


public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}

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


    <com.example.pageindicator.PageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="70dip"
        android:scrollbars="none" >


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


            <RelativeLayout
                android:id="@+id/layout1"
                android:layout_width="80dip"
                android:layout_height="match_parent" >


                <TextView
                    android:id="@+id/bg1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_purple" />


                <TextView
                    android:id="@+id/tv1"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="111"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/layout2"
                android:layout_width="80dip"
                android:layout_height="70dip" >


                <TextView
                    android:id="@+id/bg2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_orange_dark" />


                <TextView
                    android:id="@+id/tv2"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="222"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/layout3"
                android:layout_width="80dip"
                android:layout_height="match_parent" >


                <TextView
                    android:id="@+id/bg3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_blue_bright" />


                <TextView
                    android:id="@+id/tv3"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="333"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/layout4"
                android:layout_width="80dip"
                android:layout_height="match_parent" >


                <TextView
                    android:id="@+id/bg4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_purple" />


                <TextView
                    android:id="@+id/tv4"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="444"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/layout5"
                android:layout_width="80dip"
                android:layout_height="match_parent" >


                <TextView
                    android:id="@+id/bg5"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_orange_dark" />


                <TextView
                    android:id="@+id/tv5"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="555"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/layout6"
                android:layout_width="80dip"
                android:layout_height="match_parent" >


                <TextView
                    android:id="@+id/bg6"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentBottom="true"
                    android:background="@android:color/holo_blue_light" />


                <TextView
                    android:id="@+id/tv6"
                    android:layout_width="80dip"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="666"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </RelativeLayout>
        </LinearLayout>
    </com.example.pageindicator.PageIndicator>


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


</LinearLayout>

public class PageIndicator extends HorizontalScrollView{




public PageIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
}






}

下载链接http://download.csdn.net/detail/luo446718254/9583688