ViewPager轮播图，App启动图时倒计时进入主页

来源：互联网发布：linux 创建新用户编辑：程序博客网时间：2024/05/02 11:19

做项目的过程中，会对小的问题忽略，导致出现bug修改半天。前几天有以前同事问相关ViewPager实现轮播的问题，自动切换图时出现各种问题，今天有时间就整理这一块的具体实现方法，让我们共同学习这一块，好了闲聊的事就不说了，我们直接走入正题吧。

一、app启动页倒计时的实现

布局文件activity_welcome.xml:

<?xml version="1.0" encoding="utf-8"?>

</RelativeLayout>

shape_tv_time.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="#f00"/>
<padding
android:bottom="1dp"
android:left="2dp"
android:right="2dp"
android:top="1dp"/>
<solid
android:color="#f00"/>
<stroke
android:width="1dp"
android:color="@android:color/white"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>

WelcomeActivity.java 文件的代码

package com.hl.image.viewpagerdemo;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class WelcomeActivity extends AppCompatActivity implements View.OnClickListener, Runnable {

private TextView welcome_tv;
private ImageView welcome_im;
private boolean flag = true;
private int mTime = 4;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
mTime--;
if (mTime > 0) {
welcome_tv.setText(mTime + "秒跳转");
} else if (mTime == 0) {
flag = false;
Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
startActivity(intent);
finish();
} else {
flag = false;
}
}
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_welcome);
welcome_tv = (TextView) findViewById(R.id.welcome_tv);
welcome_im = (ImageView) findViewById(R.id.welcome_im);
welcome_im.setOnClickListener(this);
new Thread(this).start();
}

@Override
public void onClick(View view) {
if (view == welcome_im) {
Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
startActivity(intent);
}
}

@Override
public void run() {
try {
while (flag) {
handler.sendEmptyMessage(0);
Thread.sleep(1000);
}
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}

二、ViewPager轮播图的实现

由于她要求把轮播图的实现在Fragment里面实现，因此，在这里我是在fragment里面实现的，有的同学需要在Activity里面实现的话，逻辑一样，只是简单的修改一下代码就OK了，这里就不做解释了。

布局文件 fragment_index.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="200dp"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/viewpager"
android:background="#33000000"
android:orientation="vertical">

<TextView
android:id="@+id/image_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/white"
android:textSize="18sp"/>

<LinearLayout
android:id="@+id/point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"
>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

fragment里面相关的代码如下：

package com.hl.image.viewpagerdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

/**
* Created by ＊＊on 16/10/31.
*
* @param:
* @param:
*/

public class IndexFragment extends Fragment {
private ViewPager viewPager;
private IndexAdapter adapter;
private LinearLayout point_group;
private TextView image_desc;
private View view;
// 图片资源id
private final int[] images = {R.drawable.a, R.drawable.b, R.drawable.c,
R.drawable.d, R.drawable.e};
// 图片标题集合
private final String[] imageDescriptions = {"第一张图片",
"第二张图片", "第三张图片", "第四张图片", "第五张图片"};

private ArrayList<ImageView> imageList;
// 上一个页面的位置
protected int lastPosition = 0;

// 判断是否自动滚动viewPager
private boolean isRunning = true;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
// 执行滑动到下一个页面
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
if (isRunning) {
// 在发一个handler延时
handler.sendEmptyMessageDelayed(0, 5000);
}
}
};

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) {
view = inflater.inflate(R.layout.fragment_index, null);
getData();
return view;
}

private void getData() {
viewPager = ((ViewPager) view.findViewById(R.id.viewpager));
point_group = (LinearLayout) view.findViewById(R.id.point_group);
image_desc = (TextView) view.findViewById(R.id.image_desc);
image_desc.setText(imageDescriptions[0]);

// 初始化图片资源
imageList = new ArrayList<ImageView>();
for (int i : images) {
// 初始化图片资源
ImageView imageView = new ImageView(getActivity());
imageView.setBackgroundResource(i);
imageList.add(imageView);

// 添加指示小点
ImageView point = new ImageView(getActivity());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100,
15);
params.rightMargin = 20;
params.bottomMargin = 10;
point.setLayoutParams(params);
point.setBackgroundResource(R.drawable.white);
if (i == R.drawable.a) {
//默认聚焦在第一张
point.setBackgroundResource(R.drawable.back);
point.setEnabled(true);
} else {
point.setEnabled(false);
}

point_group.addView(point);
}

viewPager.setAdapter(new IndexAdapter(getActivity(),imageList));
// 设置当前viewPager的位置
viewPager.setCurrentItem(Integer.MAX_VALUE / 2
- (Integer.MAX_VALUE / 2 % imageList.size()));
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
// 页面切换后调用， position是新的页面位置

// 实现无限制循环播放
position %= imageList.size();

image_desc.setText(imageDescriptions[position]);

// 把当前点设置为true,将上一个点设为false；并设置point_group图标
point_group.getChildAt(position).setEnabled(true);
point_group.getChildAt(position).setBackgroundResource(R.drawable.back);//设置聚焦时的图标样式
point_group.getChildAt(lastPosition).setEnabled(false);
point_group.getChildAt(lastPosition).setBackgroundResource(R.drawable.white);
//上一张恢复原有图标
lastPosition = position;

}

@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

handler.sendEmptyMessageDelayed(0, 3000);
}

@Override
public void onDestroy() {
// 停止滚动
isRunning = false;
super.onDestroy();

}
}
而在adapter里面关键的代码如下：

@Override
public int getCount() {
// 获得页面的总数
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View view, Object object) {
// 判断view和Object对应是否有关联关系
if (view == object) {
return true;
} else {
return false;
}
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// 获得相应位置上的view； container view的容器，其实就是viewpage自身,
// position: viewpager上的位置
// 给container添加内容
container.addView(imageList.get(position % imageList.size()));

return imageList.get(position % imageList.size());
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// 销毁对应位置上的Object
// super.destroyItem(container, position, object);
container.removeView((View) object);
object = null;
}

下面是源代码的地址

1 1