实现效果:
实现步骤:
具体核心思路是计算那点的距离,然后设置标志点距离普通点的距离。
主activity的代码:
package com.example.aaviewpager;
import android.app.Activity;
import android.os.Bundle;
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.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
public class MainActivity extends Activity {
private ViewPager mViewPager;
private View[] mView;
private LayoutInflater inlater;
private ImageView viewBluePoint;
private LinearLayout mLinearLayout;
private int mPointWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
// TODO Auto-generated method stub
mLinearLayout=(LinearLayout) findViewById(R.id.ll_point_group);
viewBluePoint=(ImageView) findViewById(R.id.view_blue_point);
inlater = LayoutInflater.from(this);
mView = new View[] { inlater.inflate(R.layout.item1, null), inlater.inflate(R.layout.item2, null) };
mViewPager = (ViewPager) findViewById(R.id.vp_guide);
mViewPager.setAdapter(new MyAdapter());
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
int len = (int) (mPointWidth * arg1)+arg0 * mPointWidth ;
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewBluePoint.getLayoutParams();// 获取当前蓝点的布局参数
params.leftMargin = len;// 设置左边距
viewBluePoint.setLayoutParams(params);// 重新给蓝点设置布局参数
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
//获得两个点之间的距离
mLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// TODO Auto-generated method stub
mLinearLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
mPointWidth = mLinearLayout.getChildAt(2).getLeft()-mLinearLayout.getChildAt(0).getLeft();
}
});
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
// TODO Auto-generated method stub
return mView.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
view.removeView(mView[position]);
}
// 当要显示的图片可以进行缓存的时候,会调用这个方法进行显示图片的初始化,我们将要显示的ImageView加入到ViewGroup中,然后作为返回值返回即可
@Override
public Object instantiateItem(ViewGroup view, int position) {
view.addView(mView[position]);
return mView[position];
}
}
}
主布局代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp" >
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/imgaeview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/agree_normal"
/>
<View
android:layout_width="50dp"
android:layout_height="1dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/agree_normal"
/>
</LinearLayout>
<ImageView
android:id="@+id/view_blue_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/agree_press" />
</RelativeLayout>
</RelativeLayout>