现在很多APP的顶部都有一个广告条,支持自动以及手动播放,并且有点击功能。这种风格可以算是当下APP的一种常见风格,所以自定义一个类似的ViewPager就显得很重要了,可以反复使用的。现在小编就按自己的思路讲解一下,并且贡献出源码(大神请飘过,本人小菜一枚)。
第一部分:布局文件
(1)新建一个相对布局的布局文件(activity_main.xml);
(2)添加一个ViewPager,并且更具需求设置好相应的属性;
(3)新建一个线性布局,目的是在该布局内摆放一个TextView 和 一个线性布局;其中TextView是用来显示标题,LinearLayout是用来显示小点点的;
代码:
<?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="180dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewpager"
android:background="#44000000"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="3dp"
android:text="好好学习"
android:textColor="#ffffff" />
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" />
</LinearLayout>
</RelativeLayout>
二、逻辑代码
(1)对相应控件进行实例化(简单的就不做过多说明了);
(2)初始化两个数组,分别存储图片资源和标题资源;
(3)新建一个集合存储图片信息;
(3)设置ViewPager的适配器(新建一个类继承OnPageChangeListener),并且把图片信息集合传到适配器类;
(4)设置TextView的文字信息;
(5)关于下面小点点的操作(需要选择器);
代码:
package dhua.fc.com.viewpager1;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.security.KeyStore;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
//ListView的使用
//1.在布局文件中定义ListView
//2.在代码中实例化ListView
//3.准备数据
//4.设置适配器-item布局-绑定数据
private ArrayList<ImageView> imageViews;
// 图片资源ID
private final int[] imageIds = {
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e };
private int preposition = 0;
// 图片标题集合
private final String[] imageDescriptions = {
"学习使我快乐",
"学习艰辛,请各位兄弟多多指教",
"Android我只会皮毛",
"大神请飘过",
"再见"
};
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int item = viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
handler.sendEmptyMessageDelayed(0,4000);
}
};
//是否已经滚动
private boolean isDragging = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_title = (TextView) findViewById(R.id.tv_title);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
//ViewPager的使用
//1.在布局文件中定义ViewPager
//2.在代码中实例化ViewPager
//3.准备数据
imageViews = new ArrayList<>();
for (int i = 0 ;i < imageIds.length;i++) {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(imageIds[i]);
//添加到集合中
imageViews.add(imageView);
//添加点
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
if (i==0){
point.setEnabled(true);
}else{
point.setEnabled(false);
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
viewpager.setAdapter(new MyPagerAdapter());
//设置监听页面的改变
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();//要保证是images的整数倍
viewpager.setCurrentItem(item);
handler.sendEmptyMessageDelayed(0,3000);
}
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 当页面滚动时回调这个方法
* @param position 当前页面的位置
* @param positionOffset 滑动页面的百分比
* @param positionOffsetPixels 在屏幕上滑动的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 当某个页面被选中了的时候回调
* @param position 被选中页面的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition = position % imageViews.size();
//设置对应文本信息
tv_title.setText(imageDescriptions[realPosition]);
//把上一个高亮设置默认-灰色
ll_point_group.getChildAt(preposition).setEnabled(false);
//当前设置为高亮
ll_point_group.getChildAt(realPosition).setEnabled(true);
preposition = realPosition;
}
/**
* 当页面滚动状态变化的时候回调的方法
* 静止--->滑动
* 滑动--->静止
* 静止--->拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
if(state == viewpager.SCROLL_STATE_DRAGGING){
isDragging =true;
}else if(state == viewpager.SCROLL_STATE_SETTLING){
}else if(state == viewpager.SCROLL_STATE_IDLE&&isDragging){
isDragging = false;
handler.removeCallbacksAndMessages(null);
handler.sendEmptyMessageDelayed(0,4000);
}
}
}
class MyPagerAdapter extends PagerAdapter{
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = position % imageViews.size();
ImageView imageView = imageViews.get(realPosition);
container.addView(imageView);
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN://手指按下
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_MOVE://手指在这个控件上移动
break;
case MotionEvent.ACTION_UP://手指离开
handler.sendEmptyMessageDelayed(0,4000);
break;
}
return false;
}
});
imageView.setTag(position);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = (int) v.getTag()%imageViews.size();
String text = imageDescriptions[position];
Toast.makeText(MainActivity.this,text,Toast.LENGTH_SHORT).show();
}
});
return imageView;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object);
container.removeView((View) object);
}
}
}
希望可以帮到各位:获取源码可以关注微信公众号尚安卓,回复ViewPager源码;或者点击打开链接 点击打开链接 点击打开链接