viewpager带圆点的过渡页

最新推荐文章于 2021-05-27 03:31:20 发布

小白的成长之路

最新推荐文章于 2021-05-27 03:31:20 发布

阅读量2.4k

点赞数

分类专栏： android 文章标签： viewpager 过渡页

本文链接：https://blog.csdn.net/bobo8945510/article/details/52786360

版权

android 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

学习引导

http://blog.csdn.net/bobo8945510/article/details/52742758 第一节 viewpager初识

http://blog.csdn.net/bobo8945510/article/details/52743570 第二节 viewpager实现滑动条功能

http://blog.csdn.net/bobo8945510/article/details/52779629 第三节 viewpager实现滑动条及导航功能

Viewpager实现带下面带圆点的过渡页，先来效果图

这里写图片描述

点圆点过渡页DEMO地址：http://download.csdn.net/detail/bobo8945510/9650441：

实现这个功能需要几个步骤，如下

1、布局用的是FrameLayout，需要了解的可以在网上百度。简单来说就是，他会前面的界面会遮挡住后面的界面

2、创建三个点布局，引用两个写好的样式，样式的效果就如上面图，点的黑色和白色效果

3、在改变页面的时候关联页卡，并记录上次点位置，设置为不选中状态。

一、布局效果

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.enz.viewpagertext.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewp_01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#f33432">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dip"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dip"
            android:orientation="horizontal" >


            <View
                android:id="@+id/dot_1"
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal" />

            <View
                android:id="@+id/dot_2"
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal" />

            <View
                android:id="@+id/dot_3"
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="2dip"
                android:layout_marginRight="2dip"
                android:background="@drawable/dot_normal" />
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

效果图

二、代码中引用

1、首先创建一个点的集合，为了统一管理，

    //定义一个点集合
    private List<View> dots;

    private int oldPosition = 0;// 记录上一次点的位置

    private int currentItem; // 当前页面

2、引用布局中的空间，并且添加到list集合中，并且把第一个设置成选择状态

 dots = new ArrayList<View>();
        dots.add(findViewById(R.id.dot_1));
        dots.add(findViewById(R.id.dot_2));
        dots.add(findViewById(R.id.dot_3));

        //并且，默认第一个是选中状态
        dots.get(0).setBackgroundResource(R.drawable.dot_focused);

3、viewgaper有一个监听页面滑动的方法setOnPageChangeListener（）；再此API的onPageSelected（）方法来关联页卡和点。并且记录当前位置position。因为再滑动一下，当前的位置就成为过时的点了。

 vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {

                //下面就是获取上一个位置，并且把点的状体设置成默认状体
                dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
                //获取到选中页面对应的点，设置为选中状态
                dots.get(position).setBackgroundResource(R.drawable.dot_focused);
                //下面是记录本次的位置，因为在滑动，他就会变成过时的点了
                oldPosition = position;
                //关联页卡
                currentItem = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

4、其实就用到了上面这一点代码，很简单把。自己慢点研究下就明白了，另外布局中有两个样式，如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <corners android:radius="5dip" /><!-- 背景的填充颜色 -->  
    <solid android:color="#aaFFFFFF" /><!-- 边角圆弧的半径 -->  
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <corners android:radius="5dip" />
    <solid android:color="#55000000" />
</shape>

Mainactivity全部代码

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
    private ViewPager vp;

    //把定义好的三个布局进行初始化对象
    private View  item_view01,item_view02,item_view03;
    //创建一个list集合 参数为view

    private List<View> Mview = new ArrayList<>();

    //用于引用布局好的三个itemView布局
    private LayoutInflater inflater;


    private ViewPagerAdapter adapter;

    //定义一个点集合
    private List<View> dots;

    private int oldPosition = 0;// 记录上一次点的位置

    private int currentItem; // 当前页面

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       /*
       * LayoutInflater讲解
       * 对于一个没有被载入或者想要动态载入的界面，都需要使用LayoutInflater.inflate()来载入；
       * 对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。
       * 想了解更多：http://www.cnblogs.com/maliqian/p/3473800.html
       * */
        inflater = getLayoutInflater();
        setView();
    }

    private void setView() {
        //初始化viewPager
        vp = (ViewPager)findViewById(R.id.viewp_01);

        //把这三个点的ID找到并添加到list集合中，统一管理；下面是简写。你也可以创建三个对象，添加到集合中
        dots = new ArrayList<View>();
        dots.add(findViewById(R.id.dot_1));
        dots.add(findViewById(R.id.dot_2));
        dots.add(findViewById(R.id.dot_3));

        //并且，默认第一个是选中状态
        dots.get(0).setBackgroundResource(R.drawable.dot_focused);

        item_view01 = inflater.inflate(R.layout.item01,null);
        item_view02 = inflater.inflate(R.layout.item02,null);
        item_view03 = inflater.inflate(R.layout.item03,null);
        //把三个View布局对象加载到list中，这些就是item的数据
        Mview.add(item_view01);
        Mview.add(item_view02);
        Mview.add(item_view03);

        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {

                //下面就是获取上一个位置，并且把点的状体设置成默认状体
                dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
                //获取到选中页面对应的点，设置为选中状态
                dots.get(position).setBackgroundResource(R.drawable.dot_focused);
                //下面是记录本次的位置，因为在滑动，他就会变成过时的点了
                oldPosition = position;
                //关联页卡
                currentItem = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //把数据传递给适配器中，进行数据处理。
        adapter = new ViewPagerAdapter(this,Mview);
        vp.setAdapter(adapter);
    }
}

下面是viewpager适配类，一共就这两个类

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by ENZ on 2016/9/29.
 */
public class ViewPagerAdapter extends PagerAdapter {
    private Context context;
    private List<View> viewdata;

    public ViewPagerAdapter(MainActivity mainActivity, List<View> mview) {
        context = mainActivity;
        viewdata = mview;
    }
    //这个方法是获取一共有多少个item
    @Override
    public int getCount() {
        return viewdata.size();
    }
    //这个就这样写就OK ，无需管
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    //这个方法用来实例化页卡
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewdata.get(position),0);
        return viewdata.get(position);
    }
    //删除实例化页卡
    @Override
    public void destroyItem(ViewGroup container, int position,
                            Object object) {
        // TODO Auto-generated method stub
        container.removeView(viewdata.get(position));
    }
}

上面效果的DEMO地址：http://download.csdn.net/detail/bobo8945510/9650441

延伸学习，点的实现，也可以自定义View，实现流程

1、写一个CircleView类，集成view
2、定义两个画笔，paintA：绘制没有获取焦点的点，paintB：绘制获取焦点的圆点，每一次paintA绘制都会绘制三个没有获取焦点的圆点。
3、设置一个int对象j，记录获取焦点的位置，然后进行绘制

首先看下布局，切记，下面的自定义View，一定要和自己的包路径相一致

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--要和自己的包路径保持一致-->
    <com.example.com.circleview.CircleView
        android:id="@+id/circleView1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentTop="true" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/circleView1"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/circleView1"
        android:layout_marginTop="88dp"
        android:text="Button" 
        android:onClick="onClick"/>

</RelativeLayout>

代码如下：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

/**所有的view都是画出来的*/
public class CircleView extends View{
    /**画笔*/
    private Paint paintA=new Paint();
    private Paint paintB=new Paint();

    private int width,height,j=0;
    /*用于初始化view一些属性*/
    public CircleView(Context context,AttributeSet attrs) {
        super(context, attrs);
        paintA.setStyle(Style.STROKE);
    }

    /**此方法用于实现绘图操作
     * 1)画笔(paint)
     * 2)画布(canvas)
     * */

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        width=getWidth()/2-60;height=getHeight()/2;
        //设置画笔颜色
        paintA.setColor(Color.BLACK);
        //画一个圆形
        for(int i=0;i<3;i++){
            canvas.drawCircle(width+i*60, height,20, paintA);
        }
        //根据你点击了第几次，绘制
        canvas.drawCircle(width+j*60, height,20, paintB);
        j++;
        //可以循环的点击，过渡页时可以删除
        if(j==3)j=0;
    }
}

怎么引用呢?,其实很简单，如下

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    private CircleView circleView;
    private Button button1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.circle_main);
        circleView=(CircleView)findViewById(R.id.circleView1);

        button1 = (Button)findViewById(R.id.button1);

        //其实你点击一次，就相当于页面滑动一次
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //会重新调用view的onDraw方法
                circleView.invalidate();
            }
        });
    }
}

效果图:
这里写图片描述

自定义view的demo地址：http://download.csdn.net/detail/bobo8945510/9650490

点圆点过渡页DEMO地址：http://download.csdn.net/detail/bobo8945510/9650441：

小白的成长之路

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
viewpager带圆点的过渡页

Viewpager实现带下面带圆点的过渡页，先来效果图实现这个功能需要几个步骤，如下 1、布局用的是FrameLayout，需要了解的可以在网上百度。简单来说就是，他会前面的界面会遮挡住后面的界面 2、创建三个点布局，引用两个写好的样式，样式的效果就如上面图，点的黑色和白色效果 3、在改变页面的时候关联页卡，并记录上次点位置，设置为不选中状态。一、布局效果<?xml ver
复制链接

扫一扫

专栏目录