自定义轮播图效果
ViewPager的常用属性
ViewPager.setOffscreenPageLinit(2);设置左右两边缓存页面个数。默认缓存是1
写布局文件
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#30000000"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textColor="@android:color/white"/>
<LinearLayout
android:id="@+id/dot_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp">
<!-- <View
android:layout_width="5dp"
android:layout_height="5dp"
android:background="@drawable/dot_selected"/> -->
</LinearLayout>
</LinearLayout>
</RelativeLayout>
然后是找到ViewPaper,
创建PagerAdapter 对象
有两个方法必须要自己手动写出来，不会自动出来！！！！
代码处理如下，记得要在销毁的方法冲viewPager 中移除标记的对象，在判断是否ViewPager 中孩子被对象标记返回如下代码中，然后是在自己手动重写方法中添加ImageView 这样，切记在添加完了要返回标记，并在返回之前addView ( )不然不会显示出来
private PagerAdapter mPagerAdapter = new PagerAdapter() {
/**
* 这个方法不会自己出来要单独重写
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int i = position % Data.length;
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(Data[i]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
container.addView(imageView); //必须要添加进去
return imageView;
}
/**
* 这个方法不会自己出来要单独重写
* @param container
* @param position
* @return
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
// return Data.length;
return Integer.MAX_VALUE;
}
/**
*
* @param view ViewPager里的孩子
* @param object 孩子是否被标记
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
动态初始化小点
获取布局参数，然后设置间距，自己判断那些需要间距的，然后也要记得addView 到我们刚才写的小点的布局中，当然这个背景一般都是自己写的shape
//动态初始化点的个数
for (int i = 0; i < Data.length; i++) {
View dot = new View(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
dot.setLayoutParams(layoutParams);
//最后一个点不要间距
if (i != Data.length - 1) {
//配置点的间距
layoutParams.rightMargin = 8;
}
//默认第一个点被选中
if (i == 0) {
dot.setBackgroundResource(R.drawable.dot_selected);
} else {
dot.setBackgroundResource(R.drawable.dot_normal);
}
//将点添加点的容器
mDots.addView(dot);
}
shape如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/white"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ff0000"/>
</shape>
给View pager设置监听
在当前选择的时候去改变小点的颜色，这里特别说明下 ，去改变之前的颜色，我最初的做法是遍历数组。然后取当前的的position ，这样的做法 效率很低，直接做一个全局的标记，然后每次在这个被选中了去刷新这个标记。这样的思想是很高效的
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 当前位置
* @param positionOffset 偏移像素 除以屏幕密度（320dp）
* @param positionOffsetPixels 偏移像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTitle.setText(mTitles[position%Data.length]);
View childAt = mDots.getChildAt(position%Data.length);
childAt.setBackgroundResource(R.drawable.dot_selected);
//同时要把之前的点设置恢复
View childAt1 = mDots.getChildAt(beforeDot);
childAt1.setBackgroundResource(R.drawable.dot_normal);
beforeDot = position%Data.length;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
这样我们的轮播效果就出来了，但是我们去改变了一个条目数量，这样的做法后续一定要完善的！
自定义控件的抽取
就贴下代码吧，因为我们的项目中一般的项目中都要这个控件，所以我们抽取出来使用比较方便，也好扩展
package com.example.z.viewpagerdemo;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* Created by z on 2017/11/25.
*/
public class SelfViewpager extends RelativeLayout {
private ViewPager mViewPager;
private int beforeDot;//上次点的位置
private int Data[] = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_3, R.drawable.icon_4, R.drawable.icon_5};
//标题数组
private String[] mTitles = {"为梦想坚持", "我相信我", "xasdasd", "sdaas", "asdasdsad+"};
private TextView mTitle;
private LinearLayout mDots;
public SelfViewpager(Context context) {
this(context,null);
}
public SelfViewpager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
View view = View.inflate(getContext(),R.layout.activity_self_viewpager,this);
mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
mTitle = (TextView) view.findViewById(R.id.title);
mDots = (LinearLayout) view.findViewById(R.id.dot);
initDot();
mViewPager.setAdapter(mPagerAdapter);
//调整初始位置
int initPosition = Integer.MAX_VALUE / 2;
//将位置调整到0
initPosition = initPosition - initPosition % Data.length;
mViewPager.setCurrentItem(initPosition);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 当前位置
* @param positionOffset 偏移像素 除以屏幕密度（320dp）
* @param positionOffsetPixels 偏移像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTitle.setText(mTitles[position%Data.length]);
View childAt = mDots.getChildAt(position%Data.length);
childAt.setBackgroundResource(R.drawable.dot_selected);
//同时要把之前的点设置恢复
View childAt1 = mDots.getChildAt(beforeDot);
childAt1.setBackgroundResource(R.drawable.dot_normal);
beforeDot = position%Data.length;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initDot() {
/*for (int i = 0; i < Data.length; i++) {
View view = new View(this);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(25, 25);
view.setPadding(10,30,10,10);
view.setLayoutParams(layoutParams);
if (i == 0) {
view.setBackgroundColor(getResources().getColor(R.color.colorAss));
}else {
view.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
}
mDots.addView(view);
}*/
//动态初始化点的个数
for (int i = 0; i < Data.length; i++) {
View dot = new View(getContext());
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
dot.setLayoutParams(layoutParams);
//最后一个点不要间距
if (i != Data.length - 1) {
//配置点的间距
layoutParams.rightMargin = 8;
}
//默认第一个点被选中
if (i == 0) {
dot.setBackgroundResource(R.drawable.dot_selected);
} else {
dot.setBackgroundResource(R.drawable.dot_normal);
}
//将点添加点的容器
mDots.addView(dot);
}
}
private PagerAdapter mPagerAdapter = new PagerAdapter() {
/**
* 这个方法不会自己出来要单独重写
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int i = position % Data.length;
ImageView imageView = new ImageView(getContext());
imageView.setImageResource(Data[i]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
container.addView(imageView); //必须要添加进去
return imageView;
}
/**
* 这个方法不会自己出来要单独重写
* @param container
* @param position
* @return
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
// return Data.length;
return Integer.MAX_VALUE;
}
/**
*
* @param view ViewPager里的孩子
* @param object 孩子是否被标记
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
}
像素适配 dimen
看下我们刚刚才动态添加的点点点，传的参数是像素，在不同手机上效果区别很大
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
在我们的资源文件中的values文件下创建dimens.xml文件在里面添加dimen
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="dotSize">30dp</dimen>
</resources>
然后在我们代码初始化时候调用已下方法：
int dotSize = getResources().getDimensionPixelSize(R.dimen.dotSize);
这样就会根据不同的手机转换成不同像素大小。比如在标准手机上1dp 对应1像素
具体屏幕适配的知识可以在我的简书上搜下屏幕适配的文章。非常详细！！！！
添加自定义属性
我们项目开源供别人使用，这个点可能不同的项目。需要的大小不一样，所以我们抽一个自定义属性：
1.创建一个attrs文件：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SelfViewPagerAttrs">
<attr name="PointSizeIsMeHaHa" format="dimension"></attr>
</declare-styleable>
</resources>
获取这个属性，更改代码点大小的size
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SelfViewPagerAttrs);
float dimension = typedArray.getDimension(R.styleable.SelfViewPagerAttrs_PointSizeIsMeHaHa, 25);
mDotSize = (int) dimension;
这样就可以了。当然你还可以尝试抽取其他属性！
添加事件冲突处理 和自动轮播
/**
* 吧这个ViewPager设置为ListView的头部时候，需要处理滑动事件
*
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mRawX = event.getRawX();
mRawY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
float rawX = event.getRawX();
float rawY = event.getRawY();
if(Math.abs(rawX -mRawX) >Math.abs(rawY -mRawY)){
requestDisallowInterceptTouchEvent(true); //请求父容器不要拦截我的事件
}
break;
}
return super.onTouchEvent(event);
}
/**
* 自动轮播
*
*
*/
public void startLoop(){
postDelayed(mLoop,2000);
}
private Runnable mLoop = new Runnable() {
@Override
public void run() {
int currentItem = mViewPager.getCurrentItem(); //获取当前item
mViewPager.setCurrentItem(++currentItem);
startLoop();
}
};
移除这个循环
/**
* 自动轮播
*
*
*/
public void startLoop(){
postDelayed(mLoop,2000);
}
public void removeLoop(){
removeCallbacks(mLoop);
}
private Runnable mLoop = new Runnable() {
@Override
public void run() {
int currentItem = mViewPager.getCurrentItem(); //获取当前item
mViewPager.setCurrentItem(++currentItem);
startLoop();
}
};
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
startLoop();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
removeLoop();
}
网友评论