Android实现轮播图片效果

本文实例为大家分享了Android实现轮播图片效果的具体代码,供大家参考,具体内容如下

一、原理

首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的图片和文本数据,同时加入一些动画效果,已达到轮播的特效。同时,我们也要实现手指滑动图片达到轮播的效果。

二、实现

1、程序启动界面MainActivity

public class MainActivity extends AppCompatActivity implements ImageBannerFramLayout.FramLayoutLisenner{

private ImageBannerFramLayout mGroup;

private int[] ids = new int[] {

R.drawable.i1,//图片资源1

R.drawable.i2,//图片资源2

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//计算当前手机宽度

DisplayMetrics displayMetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

int width = displayMetrics.widthPixels;

mGroup = (ImageBannerFramLayout) findViewById(R.id.image_group);

mGroup.setLisenner(this);

List<Bitmap> list = new ArrayList<>();

for (int i = 0; i < ids.length; i++) {

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),ids[i]);

list.add(bitmap);

}

mGroup.addBitmaps(list);

}

@Override

public void chickImageIndex(int pos) {

Toast.makeText(this,"索引值 = " + pos,Toast.LENGTH_SHORT).show();

}

}

2、新建包view下面新建两个类

1)新建ImageBarnnerViewGroup类继承自ViewGroup

public class ImageBarnnerViewGroup extends ViewGroup {

private int children;//我们View Group的子视图总个数

private int childwidth;//子视图的宽度

private int childheight;//子视图的高度

private int x;//此时的x的值代表的是第一次按下的位置的横坐标,每一次移动过的过程中 移动之前的位置横坐标

private int index = 0;//代表名为每张图片的索引

private Scroller scroller;

/**

* 利用一个单击变量开关进行判断,离开屏幕的一瞬间判断用户的操作是点击

*/

private boolean isClick;//true的时候点击事件,false的时候不是点击事件

private ImageBarnnerLister lister;

private ImageBarnnerViewGroupLisnner barnnerViewGroupLisnner;

public ImageBarnnerLister getLister() {

return lister;

}

public void setLister(ImageBarnnerLister lister) {

this.lister = lister;

}

public ImageBarnnerViewGroupLisnner getBarnnerViewGroupLisnner() {

return barnnerViewGroupLisnner;

}

public void setBarnnerViewGroupLisnner(ImageBarnnerViewGroupLisnner barnnerViewGroupLisnner) {

this.barnnerViewGroupLisnner = barnnerViewGroupLisnner;

}

public interface ImageBarnnerLister {

void chickImageIndex(int pos);//pos代表的是我们当前的图片的具体索引值

}

/**

* 实现轮播图底部圆点切换效果

* 自定义一个继承自FragmenLayou布局,利用FragmeLayout布局特性

*/

//自动轮播

private boolean isAuto = true;//默认情况下开启轮播

private Timer timer = new Timer();

private TimerTask timerTask;

@SuppressLint("HandlerLeak")

private android.os.Handler autohandler = new android.os.Handler() {

@Override

public void handleMessage(Message msg) {

switch (msg.what) {

case 0://我们需要图片的自动轮播

if (++index >= children) {//如果是最后一张图片,从第一张开始

index = 0;

}

scrollTo(childwidth * index,0);

barnnerViewGroupLisnner.selectImage(index);

break;

default:

}

}

};

private void startAuto() {

isAuto = true;

}

private void stopAuto() {

isAuto = false;

}

/**

* 采用Timer,TimerTask,Handler三者结合的方式来实现自动轮播

*/

public ImageBarnnerViewGroup(Context context) {

super(context);

initObj();

}

public ImageBarnnerViewGroup(Context context, AttributeSet attrs) {

super(context, attrs);

initObj();

}

public ImageBarnnerViewGroup(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

initObj();

}

private void initObj() {

scroller = new Scroller(getContext());

timerTask = new TimerTask() {

@Override

public void run() {

if (isAuto) {//开启轮播图

autohandler.sendEmptyMessage(0);

}

}

};

timer.schedule(timerTask,100,3000);

}

@Override

public void computeScroll() {

super.computeScroll();

if (scroller.computeScrollOffset()) {

scrollTo(scroller.getCurrX(),0);

invalidate();//重绘

}

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

//1.求出子视图的个数

children = getChildCount();//我们可以知道自试图的个数

if (0 == children)

{

setMeasuredDimension(0,0);

} else {

measureChildren(widthMeasureSpec, heightMeasureSpec);

//此时我们以第一个子视图=为基准,也就是说我们的View Group

View view = getChildAt(0);

childwidth = view.getMeasuredWidth();

childheight = view.getMeasuredHeight();

int width = view.getMeasuredWidth() * children;

setMeasuredDimension(width,childheight);

}

//2.测量子视图的宽度和高度

//3.根据子视图的狂赌和高度,求出该ViewGroup的宽度和高度

}

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

return super.onInterceptTouchEvent(ev);

}

/**

* 用两种方式来实现轮播图的手动轮播

* 1,利用scrollTo,scrollBy 完成轮播图的手动轮播

* 1,利用Scroller 对象完成轮播图的手动效果

* @param event

* @return

*/

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN://表示用户按下的一瞬间

stopAuto();//停止图片轮播

if (!scroller.isFinished()) {

scroller.abortAnimation();

}

isClick = true;

x=(int)event.getX();

break;

case MotionEvent.ACTION_MOVE://表示用户按下之后在屏幕上移动的过程

int moveX = (int) event.getX();

int distance = moveX - x;

scrollBy(-distance,0);

x = moveX;

isClick = false;

break;

case MotionEvent.ACTION_UP://标识的是用户抬起的一瞬间

int scrollX = getScrollX();

index = (scrollX + childwidth / 2) / childwidth;

if (index < 0) { //已经滑动到了最左边

index = 0;

} else if (index > children - 1) {//说明已经滑动到了最右边

index = children - 1;

}

if (isClick) { //点击事件

lister.chickImageIndex(index);

} else {

int dx = index * childwidth - scrollX;

scroller.startScroll(scrollX,0,dx,0);

postInvalidate();

barnnerViewGroupLisnner.selectImage(index);

}

startAuto();//开启图片轮播

break;

default:

}

return true;

//返回true的目的是告诉该View Group容器的父View 我们已经处理好了该事件

}

@Override

protected void onLayout(boolean b, int i, int i1, int i2, int i3) {

if (b) {

int lefrMargin = 0;

for (int j = 0; j < children; j++) {

View view = getChildAt(j);

view.layout(lefrMargin,0,lefrMargin + childwidth,childheight);

lefrMargin += childwidth;

}

}

}

public interface ImageBarnnerViewGroupLisnner{

void selectImage(int index);

}

}

2)新建ImageBannerFramLayout类继承自FrameLayout实现两个接口

public class ImageBannerFramLayout extends FrameLayout implements ImageBarnnerViewGroup.ImageBarnnerViewGroupLisnner,ImageBarnnerViewGroup.ImageBarnnerLister{

private ImageBarnnerViewGroup imageBarnnerViewGroup;

private LinearLayout linearLayout;

private FramLayoutLisenner lisenner;

public FramLayoutLisenner getLisenner() {

return lisenner;

}

public void setLisenner(FramLayoutLisenner lisenner) {

this.lisenner = lisenner;

}

public ImageBannerFramLayout(@NonNull Context context) {

super(context);

initImageBarnnerViewGroup();

initDotLinearlayout();

}

public ImageBannerFramLayout(@NonNull Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

initImageBarnnerViewGroup();

initDotLinearlayout();

}

public ImageBannerFramLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initImageBarnnerViewGroup();

initDotLinearlayout();

}

public void addBitmaps(List<Bitmap> list) {

for (int i = 0; i < list.size(); i++) {

Bitmap bitmap = list.get(i);

addBitmapToImageBarnnerViewGroup(bitmap);

addDotToLinearlayout();

}

}

private void addDotToLinearlayout() {

ImageView iv = new ImageView(getContext());

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams

(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.MATCH_PARENT);

layoutParams.setMargins(5,5,5,5);

iv.setLayoutParams(layoutParams);

iv.setImageResource(R.drawable.dot_normal);

linearLayout.addView(iv);

}

private void addBitmapToImageBarnnerViewGroup(Bitmap bitmap) {

ImageView imageView = new ImageView(getContext());

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));

imageView.setImageBitmap(bitmap);

imageBarnnerViewGroup.addView(imageView);

}

//初始化自定义图片轮播功能核心类

private void initImageBarnnerViewGroup() {

imageBarnnerViewGroup = new ImageBarnnerViewGroup(getContext());

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams

(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);

imageBarnnerViewGroup.setLayoutParams(layoutParams);

imageBarnnerViewGroup.setBarnnerViewGroupLisnner(this);//将linsnner传递给Framlayout

imageBarnnerViewGroup.setLister(this);

addView(imageBarnnerViewGroup);

}

//初始化底部圆点布局

private void initDotLinearlayout() {

linearLayout = new LinearLayout(getContext());

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams

(FrameLayout.LayoutParams.MATCH_PARENT, 40);

linearLayout.setLayoutParams(layoutParams);

linearLayout.setOrientation(LinearLayout.HORIZONTAL);

linearLayout.setGravity(Gravity.CENTER);

linearLayout.setBackgroundColor(Color.RED);

addView(linearLayout);

FrameLayout.LayoutParams layoutParams1 = (LayoutParams) linearLayout.getLayoutParams();

layoutParams.gravity = Gravity.BOTTOM;

linearLayout.setLayoutParams(layoutParams1);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

linearLayout.setAlpha(0.5f);

} else {

linearLayout.getBackground().setAlpha(100);

}

}

@Override

public void selectImage(int index) {

int count = linearLayout.getChildCount();

for (int i = 0;i < count; i++) {

ImageView iv = (ImageView) linearLayout.getChildAt(i);

if (i == index) {

iv.setImageResource(R.drawable.dot_select);

} else {

iv.setImageResource(R.drawable.dot_normal);

}

}

}

@Override

public void chickImageIndex(int pos) {

lisenner.chickImageIndex(pos);

}

public interface FramLayoutLisenner{

void chickImageIndex(int pos);

}

}

3、程序布局页面activity_main

<?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=".MainActivity">

<com.example.tony.imagegroup.view.ImageBannerFramLayout

android:id="@+id/image_group"

android:layout_width="match_parent"

android:layout_height="200dp">

</com.example.tony.imagegroup.view.ImageBannerFramLayout>

</RelativeLayout>

4、新建两个drawable资源文件dot_normal.xml和dot_select.xml,实现轮播图底部小圆点

不同的是前者颜色为白色后者为黑色

<?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"/>

<size android:height="10dp"

android:width="10dp"/>

</shape>

三、运行结果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Android实现轮播图片效果 的全部内容, 来源链接: utcz.com/p/243197.html

回到顶部