欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android 自定义控件之ViewPager Indicator实现方式

程序员文章站 2022-06-08 17:07:08
...

介绍

ViewPager 的Indicator实现两种效果 如下图所示:

效果一

Android 自定义控件之ViewPager Indicator实现方式

效果二

Android 自定义控件之ViewPager Indicator实现方式

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="mgzxc.viewpagertab.MainActivity">
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ff0098ff"
            android:padding="10dp"
            android:text="我的好友"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffabcd"
            android:padding="10dp"
            android:text="我的群组"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#9988deab"
            android:padding="10dp"
            android:text="我的设置"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:id="@+id/tab"
        android:layout_below="@id/ll"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="#ff0000" />

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

</RelativeLayout>

Activity代码:

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private int[] imgs = {R.drawable.a, R.drawable.b, R.drawable.c};
    private ArrayList<ImageView> ivs;
    private int winWidth;
    private View tab;
    private int prePosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDatas();
        viewPager = ((ViewPager) findViewById(R.id.vp));
        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.addOnPageChangeListener(this);
        initTabs();
    }

    private void initTabs() {
        DisplayMetrics outMetrics=new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        winWidth = outMetrics.widthPixels;
        tab = findViewById(R.id.tab);
        RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) tab.getLayoutParams();
        params.width=winWidth/3;
        tab.setLayoutParams(params);
    }

    private void initDatas() {
        ivs = new ArrayList<>();
        for (int i = 0; i <imgs.length ; i++) {
            ImageView iv=new ImageView(this);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setImageResource(imgs[i]);
            ivs.add(iv);
        }
    }

    //效果一
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//        RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) tab.getLayoutParams();
//      params.leftMargin=(int) (positionOffsetPixels*1.0f/3+position*1.0f*winWidth/3);
//      tab.setLayoutParams(params);
    }

     //效果二
    @Override
    public void onPageSelected(int position) {
        TranslateAnimation ta=new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, prePosition, TranslateAnimation.RELATIVE_TO_SELF, position, TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0);
        ta.setDuration(200);
        ta.setFillAfter(true);
        tab.startAnimation(ta);
        prePosition=position;
    }

    //state描述viewpager状态变化:
    // 1 开始滑动
    // 2 手抬起
    // 0 变为静止状态
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public class MyPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return ivs.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(ivs.get(position));
            return ivs.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((ImageView)object);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        viewPager.removeOnPageChangeListener(this);
    }
}

代码