学习引导
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();
}
});
}
}
效果图: