English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Content

Implementation of Real-time Sliding ViewPager in Android2This method

Let's take a look at the effect diagram:

activity_main.xml　

<RelativeLayout 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" 
 tools:context="com.example.welcome.MainActivity" > 
 <android.support.v4.view.ViewPager 
 android:id="@"+id/mViewPager" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" /> 
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_alignParentTop="true" 
 android:layout_centerHorizontal="true" 
 android:layout_marginTop="30dp" > 
 <com.example.welcome.PagerCursor 
  android:id="@"+id/pagerCursor" 
  android:layout_width="fill_parent" 
  android:layout_height="5dp" /> 
 </FrameLayout> 
 <FrameLayout 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentBottom="true" 
 android:layout_centerHorizontal="true" 
 android:layout_marginBottom="30dp" > 
 <com.example.welcome.CustomeDotGroup 
  android:id="@"+id/ll_point_group" 
  android:layout_width="fill_parent" 
  android:layout_height="10dp" 
  android:orientation="horizontal" > 
 </com.example.welcome.CustomeDotGroup> 
 <View 
  android:id="@"+id/red_point" 
  android:layout_width="10dp" 
  android:layout_height="10dp" 
  android:background="@drawable/point_red" /> 
 </FrameLayout> 
</RelativeLayout>

MainActivity

package com.example.welcome; 
import java.util.ArrayList; 
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.View; 
import android.view.ViewGroup; 
import android.view.animation.TranslateAnimation; 
import android.widget.ImageView; 
public class MainActivity extends Activity { 
 private ViewPager mViewPager; 
 MyAdapter mAdapter; 
 private ArrayList<ImageView> imageViewList; 
 View red_point; 
 private int lastDis; 
 PagerCursor pagerCursor; 
 @SuppressWarnings("deprecation") 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_main); 
 pagerCursor = (PagerCursor) findViewById(R.id.pagerCursor); 
 red_point = findViewById(R.id.red_point); 
 imageViewList = new ArrayList<ImageView>(); 
 int[] imagesInt = {R.drawable.p1,R.drawable.p2,R.drawable.p3}); 
 for (int i = 0; i < imagesInt.length; i++) { 
  ImageView imageView = new ImageView(MainActivity.this); 
  imageView.setBackgroundResource(imagesInt[i]); 
  imageViewList.add(imageView); 
 } 
 mViewPager = (ViewPager) findViewById(R.id.mViewPager); 
 mAdapter = new MyAdapter(); 
 mViewPager.setAdapter(mAdapter); 
 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 
  private boolean isDragging; 
  @Override 
  public void onPageSelected(int arg0) { 
  } 
  @Override 
  public void onPageScrolled(int position, float screenOffSet, int arg2) { 
  TranslateAnimation animation = null; 
  if (isDragging) { 
   int dp2px = PhoneUtils.dp2px(MainActivity.this, 20f); 
   int offSet = (int) (position*dp2px + dp2px*screenOffSet); 
   animation = new TranslateAnimation(lastDis, offSet, 0f, 0f); 
   animation.setDuration(200); 
   animation.setFillAfter(true); 
   red_point.startAnimation(animation); 
   lastDis = offSet; 
  } 
  float[] screenSize = MeasureUtil.getScreenSize(MainActivity.this); 
  float itemWidth = screenSize[0]/3; 
  pagerCursor.SetOffSet(position,screenOffSet,itemWidth); 
  } 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
  switch (arg0) { 
  case ViewPager.SCROLL_STATE_DRAGGING://Sliding 
   isDragging = true; 
   break; 
  case ViewPager.SCROLL_STATE_IDLE://Idle 
   isDragging = false; 
   break; 
  default: 
   break; 
  } 
  } 
 }); 
 } 
 class MyAdapter extends PagerAdapter{ 
 @Override 
 public int getCount() { 
  return imageViewList.size(); 
 } 
 @Override 
 public boolean isViewFromObject(View arg0, Object arg1) { 
  return arg0 == arg1; 
 } 
 @Override 
 public void destroyItem(ViewGroup container, int position, Object object) { 
  container.removeView(imageViewList.get(position)); 
 } 
 @Override 
 public Object instantiateItem(ViewGroup container, int position) { 
  container.addView(imageViewList.get(position)); 
  return imageViewList.get(position); 
 } 
 } 
}

CustomeDotGroup

package com.example.welcome; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.View; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
public class CustomeDotGroup extends LinearLayout { 
 private Context context; 
 public CustomeDotGroup(Context context, AttributeSet attrs, int defStyle) { 
 super(context, attrs, defStyle); 
 this.context = context; 
 initRes(); 
 } 
 public CustomeDotGroup(Context context, AttributeSet attrs) { 
 this(context, attrs, 0); 
 } 
 public CustomeDotGroup(Context context) { 
 this(context, null); 
 } 
 private void initRes() { 
 int dotWidthOrHeight = PhoneUtils.dp2px(context, 10); 
 for (int i = 0; i < 3; i++) { 
  ImageView dotImageView = new ImageView(context); 
  dotImageView.setBackgroundResource(R.drawable.point_normal); 
  LayoutParams dotImageViewParams = new LayoutParams(dotWidthOrHeight, dotWidthOrHeight); 
  if (i != 0) { 
  dotImageViewParams.leftMargin = dotWidthOrHeight; 
  } 
  dotImageView.setLayoutParams(dotImageViewParams); 
  this.addView(dotImageView); 
 } 
 } 
}

　PagerCursor

package com.example.welcome; 
import android.app.Activity; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.view.View; 
public class PagerCursor extends View { 
 Context context; 
 private Paint mPaint; 
 private int screenWidth; 
 private int desRight; 
 private float itemWidth; 
 public PagerCursor(Context context, AttributeSet attrs, int defStyle) { 
 super(context, attrs, defStyle); 
 // TODO Auto-generated constructor stub 
 } 
 public PagerCursor(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 this.context = context; 
 initRes(); 
 // TODO Auto-generated constructor stub 
 } 
 public PagerCursor(Context context) { 
 super(context); 
 // TODO Auto-generated constructor stub 
 } 
 private void initRes() { 
 float[] screenSize = MeasureUtil.getScreenSize((Activity) context); 
 screenWidth = (int) screenSize[0]; 
 Log.d("TAG", ",screenWidth"} + screenWidth); 
 mPaint = new Paint(); 
 mPaint.setColor(getResources().getColor(R.color.contentPressColor)); 
 mPaint.setStyle(Paint.Style.FILL); 
 mPaint.setAntiAlias(true); 
 } 
 public void SetOffSet(int position, float screenOffSet, float itemWidth) { 
 int offSet = (int) (position * itemWidth + itemWidth * screenOffSet); 
 this.itemWidth = itemWidth; 
 desRight = offSet; 
 Log.d("TAG", "screenOffSet:" + screenOffSet + ",position" + position 
  + ",desRight-->t" + desRight + ",itemWidth" + itemWidth); 
 invalidate(); 
 } 
 @Override 
 protected void onDraw(Canvas canvas) { 
 super.onDraw(canvas); 
 Log.d("TAG", "onDraw,desRight"-->t" + desRight + ",itemWidth" + itemWidth); 
 canvas.drawRect(desRight, 0f, desRight + itemWidth, 
  PhoneUtils.dp2px(context, 5), mPaint); 
 } 
}

MeasureUtil

package com.example.welcome; 
import android.app.Activity; 
import android.util.DisplayMetrics; 
/** 
 * Measurement tool�? 
 */ 
public final class MeasureUtil { 
 /** 
 * Get screen size 
 * 
 * @param activity 
 *  Activity 
 * @return Screen size in pixels, index�?of�?for width, index is1of�?for height 
 */ 
 public static float[] getScreenSize(Activity activity) { 
 DisplayMetrics metrics = new DisplayMetrics(); 
 activity.getWindowManager().getDefaultDisplay().getMetrics(metrics); 
 return new float[] { metrics.widthPixels, metrics.heightPixels }; 
 } 
}

PhoneUtils

package com.example.welcome; 
import android.content.Context; 
public class PhoneUtils { 
 public static int dp2px(Context context,float dpValue){ 
 float scale = context.getResources().getDisplayMetrics().density; 
 return (int)(dpValue * scale +0.5f); 
 } 
}

Source Code Download:http://download.jb51.net/201610/source code/androidviewpaper(jb51.net).rar

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yanaola Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace # with @ when sending an email to report abuse. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.

Basic Tutorial
You May Also Like