自定义控件之圆形viewpager导航circleindicat

本文主要是做一个和viewpager联动的圆形指示器，圆的半径颜色都可以在布局文件中指定。但是本文没做。

Paste_Image.png

public class CircleIndicator2 extends View {
    //默认圆半径
    private int radius=15;
    //当前指示圆半径
    private float selectedRadius;
    private int width;
    private int count;
    private Paint paint;
    private Paint selectedPaint;
    private int height;
    private float current;
    public CircleIndicator2(Context context) {
        this(context,null);
    }
    public CircleIndicator2(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public CircleIndicator2(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //默认圆画笔
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.GRAY);
        //当前指示圆画笔
        selectedPaint = new Paint();
        selectedPaint.setAntiAlias(true);
        selectedPaint.setColor(Color.RED);
    }
    @Override 
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        height = getMeasuredHeight();
        width = getMeasuredWidth();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这个距离如下图所示
        int distance=width/(count+1);
        //灰色圆
        for(int i=0;i<count;i++){
            canvas.drawCircle(distance*(i+1),height/2,radius,paint);
        }          
        //红色圆
        canvas.drawCircle(current,height/2,selectedRadius,selectedPain);
}
//和viewpager联动
    public void setUpWithViewPager(ViewPager viewPager){
        if(viewPager==null){
            return;
        }
        //确定要画几个圆
        count=viewPager.getAdapter().getCount();
        viewPager.addOnPageChangeListener(new
        ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                setCircleSize(position,positionOffset,positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {}
            @Override
            public void onPageScrollStateChanged(int state) {            }        });
    }
    //设置红色圆移动的距离
    private void setCircleSize(int position, float positionOffset, int positionOffsetPixels) {        Log.d("xxxxx",position+"/"+positionOffset+"/"+positionOffsetPixels);
        int distance=width/(count+1);
        current = (position+1)*distance+distance*positionOffset;
        //设置红色圆的大小，
        selectedRadius=radius+3*(1+0);
        invalidate();
    }
}

补充说明

Paste_Image.png

布局文件

<?xml version="1.0" encoding="utf-8"?>
<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="vcredit.com.pathdatademo.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <com.pathdatademo.CircleIndicator2
        android:id="@+id/circleview"
        android:layout_width="200dp"
        android:layout_height="20dp"
       android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:layout_centerHorizontal="true"
        />
</RelativeLayout>

代码中使用

public class MainActivity extends AppCompatActivity {
    private ArrayList<Fragment> tabs;
    @Override    protected void onCreate(Bundle
 savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager= (ViewPager)findViewById(R.id.viewpager);
        CircleIndicator2 circleIndicator= (CircleIndicator2)findViewById(R.id.circleview);
        SimpleFragment one=SimpleFragment.instance("one");
        SimpleFragment two=SimpleFragment.instance("two");
        SimpleFragment three=SimpleFragment.instance("three");
        SimpleFragment four=SimpleFragment.instance("four");
        SimpleFragment five=SimpleFragment.instance("five");
        SimpleFragment six=SimpleFragment.instance("six");
        tabs = new ArrayList<>();
        tabs.add(one);
        tabs.add(two);
        tabs.add(three);
        tabs.add(four);
        tabs.add(five);
        tabs.add(six);
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return tabs.get(position);
            }
            @Override
            public int getCount() {
                return tabs.size();     
          } 
       });
        circleIndicator.setUpWithViewPager(viewPager);
    }
}

viewpager中用到的fragment

public class SimpleFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout,container,false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        String content=getArguments().getString("content");
        TextView tv= (TextView) view.findViewById(R.id.tv);
        tv.setText(content);
    }
    public static SimpleFragment instance(String content){
        SimpleFragment simpleFragment=new SimpleFragment();
        Bundle bundle=new Bundle();
        bundle.putString("content",content);
        simpleFragment.setArguments(bundle);
        return simpleFragment;
    }
}