Android ViewPager+View.setTranslationX实现可滑动的指示器效果
jopen
10年前
对于需求较为严格一些，应该让ViewPager滑动时，那个指示器也应该滑动才符合逻辑，因此如上代码改造为如下代码
public class AnimActivity extends BaseActivity { private View vline; /** * 指示器偏移宽度 */ private int offsetWidth = 0; private ViewPager mViewPager; /** * viewPager宽度 */ private int screenWith = 0; /** * viewPager高度 */ private int screeHeight = 0; private int[] drawableResIds = {R.drawable.mm_1,R.drawable.mm_2}; @Override protected void onCreate(Bundle saveInstance) { super.onCreate(saveInstance); setContentView(R.layout.anim_layout); vline = findViewById(R.id.line); mViewPager = (ViewPager) findViewById(R.id.anim_view_pager); screenWith = getWindow().getWindowManager().getDefaultDisplay().getWidth(); screeHeight = getWindow().getWindowManager().getDefaultDisplay().getHeight()-dip2px(this, 45); //这里之所以是45，请查看布局文件，其中ViewPager以上的节点的高度总和为45 LayoutParams lp = vline.getLayoutParams(); offsetWidth = lp.width = screenWith / 2; vline.setLayoutParams(lp); vline.setTag("0"); mViewPager.setOnPageChangeListener(pageChangedListener); mViewPager.setAdapter(new ViewPagerAdapter()); } private OnPageChangeListener pageChangedListener = new OnPageChangeListener() { private boolean isAnim = false; private int pos = 0; @Override public void onPageSelected(int position) { Log.e("ViewPager", "position===>"+position); vline.setTranslationX(position*offsetWidth); pos = position; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { Log.d("ViewPager", "arg0="+arg0+" arg1="+arg1+" arg2="+arg2); if(isAnim && arg1!=0) { vline.setTranslationX(offsetWidth*arg1); } } @Override public void onPageScrollStateChanged(int arg0) { Log.i("ViewPager", "=====>arg0="+arg0); if(arg0==1) //开始状态 { isAnim = true; } else if(arg0==2) //分界状态 { isAnim = false; vline.setTranslationX(pos*offsetWidth); } else if(arg0==0) //结束状态 { vline.setTranslationX(pos*offsetWidth); } } }; private class ViewPagerAdapter extends PagerAdapter { @Override public int getCount() { return drawableResIds.length; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = (ImageView) layoutInflater.inflate(R.layout.image_display, null); imageView.setImageBitmap(adjustBitmapSimpleSize(drawableResIds[position])); imageView.setTag(position); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ImageView image = (ImageView)((ViewPager) container).findViewWithTag(position); ((ViewPager) container).removeView(image); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1; } } /** * 调整压缩采样率 * @param resId * @return */ private Bitmap adjustBitmapSimpleSize(int resId) { BitmapFactory.Options opts = new BitmapFactory.Options(); opts.inJustDecodeBounds = true; Bitmap bitmap = BitmapFactory.decodeResource(getResources(),resId, opts); int visibleHeight = screeHeight; int visibleWidth = screenWith; if(opts.outWidth>visibleWidth ||opts.outHeight>visibleHeight) { float wRatio = opts.outWidth/visibleWidth; float hRatio = opts.outHeight/visibleHeight; opts.inSampleSize = (int) Math.max(wRatio, hRatio); } opts.inJustDecodeBounds = false; bitmap.recycle(); return BitmapFactory.decodeResource(getResources(),resId, opts); } public void doSwicth(View v) { switch (v.getId()) { case R.id.fade_anim_left: { mViewPager.setCurrentItem(0,true); } break; case R.id.fade_anim_right: mViewPager.setCurrentItem(1,true); break; default: break; } } /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } /** * 根据手机的分辨率从 px(像素) 的单位 转成为 dp */ public static int px2dip(Context context, float pxValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (pxValue / scale + 0.5f); } } 布局文件:anim_layout.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="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/fade_anim_left" android:layout_width="match_parent" android:layout_height="40dip" android:layout_weight="1" android:text="Left" android:onClick="doSwicth" android:background="@drawable/fade_anim" /> <View android:layout_width="1dip" android:layout_height="30dip" android:background="@color/red" /> <Button android:id="@+id/fade_anim_right" android:layout_width="match_parent" android:layout_height="40dip" android:text="Right" android:layout_weight="1" android:onClick="doSwicth" android:background="@drawable/fade_anim" /> </LinearLayout> <View android:id="@+id/line" android:layout_width="160dip" android:layout_height="5dip" android:background="@color/red" /> <android.support.v4.view.ViewPager android:id="@+id/anim_view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:keepScreenOn="true" > <!-- <android.support.v4.view.PagerTabStrip android:id="@+id/anim_view_pager_tabsctrip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top"/> --> </android.support.v4.view.ViewPager> </LinearLayout>
image_display.xml
<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:scaleType="centerCrop" android:layout_height="match_parent" > </ImageView>
Tab按钮渐变背景
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="0" android:exitFadeDuration="300" android:visible="true" > <item android:state_pressed="false" android:state_focused="false" android:drawable="@color/white" /> <item android:state_pressed="true" android:drawable="@color/red"/> <item android:state_focused="true" android:drawable="@color/red"/> </selector>
运行如下：
