百度上关于ViewPager 滑动条 的文章 有一大堆,但总有点不详细。直接把代码复制 还是有细微的问题导致效果不理想。。。
效果图:
淡蓝色横线 滑动动画
思路:1、滑动之前 需要对 Imager进行缩放处理(细微的问题 就是出现在这)。
2、使用 animation 达到 imager 滑动效果
先看 ViewPager所在的 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:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="@layout/top_title"/> // title
<ImageView // 滑动条
android:id="@+id/line"
android:layout_width="fill_parent"
android:scaleType="matrix"
android:layout_height="5dp" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
top_title.xml 文件其实就是 一个横向排列的LinearLayout ,linearLayout中有四个 TextView。每个TextView 的width 为 屏幕的四分之一。
MainActivity.class :
package com.yezq.myapplication;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity implements ViewPager.OnPageChangeListener{
TextView tv1,tv2,tv3,tv4; //title 中的四个textView
ViewPager vp;
ImageView line; // 滑动条
Animation animation;
int currentItem ;//ViewPager 当前显示页面的position
int offset; // imager的滑动偏移量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 下面三行 根据 屏幕width 计算出滑动偏移量
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
offset = dm.widthPixels / 4;
initLine();
initTopTitle();
initViewPager();
}
/**
* 初始化 ViewPager
*/
private void initViewPager() {
vp = (ViewPager) findViewById(R.id.viewpager);
//设置ViewPager 的item,
//R.layout.xxx 是 一个Root为 LinearLayout 的xml布局文件,只设置了颜色用于区分
List<View> list = new ArrayList<View>();
LayoutInflater lif = getLayoutInflater();
list.add(lif.inflate(R.layout.one, null));
list.add(lif.inflate(R.layout.two, null));
list.add(lif.inflate(R.layout.three, null));
list.add(lif.inflate(R.layout.four,null));
vp.setAdapter(new VPAdapter(list,this));
vp.setCurrentItem(0);//设置ViewPager 默认显示Item
currentItem = 0;//当前显示界面的 position
vp.setOnPageChangeListener(this);//设置 滑动事件监听
}
private void initLine() {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.line);
//把bitmap进行缩放(放大)处理 ,得到合适宽度的图片
// createScaledBitmap(Bitmap , int ,int,boolean);
// 两个int参数是设置 图片缩放(或放大)后的 width,height .
//boolean 参数为true可以进行滤波处理,有助于改善新图像质量;flase时,计算机不做过滤处理。
bitmap = Bitmap.createScaledBitmap(bitmap, offset, bitmap.getHeight(),true);
line = (ImageView) findViewById(R.id.line);
line.setImageBitmap(bitmap);
}
/**
* 滑动条 滑动方法。
* position 是 滑动后 显示界面的position
*/
public void lineSlide(int position){
//TranslateAnimation(滑动前X位置,滑动后X位置,滑动前Y位置,滑动后Y位置)
animation = new TranslateAnimation(currentItem * offset,position * offset,0,0);
currentItem = position;
animation.setFillAfter(true);//设置动画停止在 动画结束的位置
animation.setDuration(1000);
line.setAnimation(animation);//给滑动条设置动画
}
/**
* 初始化title 中textView,
*/
public void initTopTitle(){
tv1 = (TextView) findViewById(R.id.tv1);
tv2 = (TextView) findViewById(R.id.tv2);
tv3 = (TextView) findViewById(R.id.tv3);
tv4 = (TextView) findViewById(R.id.tv4);
}
@Override
public void onPageSelected(int position) {
lineSlide(position);//滑动结束后调用 lineSlide()
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
}
VPAdapter.class:
package com.yezq.myapplication;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
public class VPAdapter extends PagerAdapter {
List<View> list;
Context context;
public VPAdapter(List<View> list , Context context){
this.list = list;
this.context = context;
}
/**
* ViewPager 中item的个数
*/
@Override
public int getCount() {
return list.size();
}
/**
* 判断当前显示item 是否是 instantiateItem()返回的item
*/
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
/**
* 销毁 滑动前显示的View
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
/**
* 初始化当前(滑动后)显示的View,并返回
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
}
以上代码 只能让 滑动条在ViewPager滑动结束后 进行滑动。 滑动条跟随 ViewPager 一起滑动的效果 不知道咋搞。。。