<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.viewpager.widget.ViewPager
android:id="@+id/content_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
tools:ignore="MissingConstraints" />
androidx.constraintlayout.widget.ConstraintLayout>
2.在主活动java文件下编写代码
package com.example.carousellearning;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.graphics.Color;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private looperpagerAdapter mLooperPagerAdapter;
private static List<Integer> sColors = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//准备一个random类来提供随机颜色
Random random = new Random();
//准备数据
for (int i = 0; i < 5; i++) {
sColors.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
}
//在适配器类中添加一个方法来设置数据
mLooperPagerAdapter.setData(sColors);
mLooperPagerAdapter.notifyDataSetChanged();
}
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
}
}
3.为ViewPager添加一个适配器代码已经很详细了,自己好好看注释
public class looperpagerAdapter extends PagerAdapter {
//集合来存储
private List<Integer> mColors = new ArrayList<>();
@NonNull
@NotNull
@Override
public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
//设置一个imageview来充当载体
ImageView imageView = new ImageView(container.getContext());
//设置背景颜色
imageView.setBackgroundColor(mColors.get(position));
//设置完成后,把图片添加到容器里边
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
if (mColors != null) {
return mColors.size();
}
return 0;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
public void setData(List<Integer> sColors) {
this.mColors = sColors;
}
}
二、实现图片替换纯色 1.适配器里边做出改变适配器流程:
1.首先创建一个类使之继承PagerAdapter;
2.实现其两个默认方法;
3.在覆写instantiateItem()和destroyItem()方法,一个初始化、一个摧毁;
4.instantiateItem()里边设置一个imageview来作为载体,设置完成后把图片添加到容器里;
别的看注释,很详细了。
public class looperpagerAdapter extends PagerAdapter {
//集合来存储
private List<Integer> mPics = new ArrayList<>();
@NonNull
@NotNull
@Override
public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
//设置一个imageview来充当载体
ImageView imageView = new ImageView(container.getContext());
// //设置背景颜色
// imageView.setBackgroundColor(mColors.get(position));
//设置图片
imageView.setImageResource(mPics.get(position));
//设置完成后,把图片添加到容器里边
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
if (mPics != null) {
return mPics.size();
}
return 0;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
public void setData(List<Integer> sColors) {
this.mPics = sColors;
}
}
2.在java文件中改变代码
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private looperpagerAdapter mLooperPagerAdapter;
private static List<Integer> sPics = new ArrayList<>();
static{
sPics.add(R.mipmap.one);
sPics.add(R.mipmap.two);
sPics.add(R.mipmap.three);
sPics.add(R.mipmap.four);
sPics.add(R.mipmap.five);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
// //准备一个random类来提供随机颜色
// Random random = new Random();
//
// //准备数据
// for (int i = 0; i < 5; i++) {
// sPics.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
// }
// //在适配器类中添加一个方法来设置数据
// mLooperPagerAdapter.setData(sPics);
// mLooperPagerAdapter.notifyDataSetChanged();
}
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
mLooperPagerAdapter.setData(sPics);
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
}
}
三、实现轮播图的无限轮播 1.在适配器里边更改代码设置一个静态代码块来往集合里边添加图片
public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
//能够实现无限轮播
int realPosition = position % mPics.size();
//设置一个imageview来充当载体
ImageView imageView = new ImageView(container.getContext());
// //设置背景颜色
// imageView.setBackgroundColor(mColors.get(position));
//设置图片
imageView.setImageResource(mPics.get(realPosition));
//设置完成后,把图片添加到容器里边
container.addView(imageView);
return imageView;
}
2.在适配器中添加一个方法,用来获得轮播图的长度
public int getDataResultSizse(){
if (mPics != null) {
return mPics.size();
}
return 0;
}
3.在java文件中更改代码
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
mLooperPagerAdapter.setData(sPics);
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
//设置初始位置
/**
* 如果为true,就是要做动画,false就是不做动画
*/
viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
}
四、实现轮播图的自动轮播
1.java文件下更改代码
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private looperpagerAdapter mLooperPagerAdapter;
private static List<Integer> sPics = new ArrayList<>();
static {
sPics.add(R.mipmap.one);
sPics.add(R.mipmap.two);
sPics.add(R.mipmap.three);
sPics.add(R.mipmap.four);
sPics.add(R.mipmap.five);
}
private Handler handler;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
// //准备一个random类来提供随机颜色
// Random random = new Random();
//
// //准备数据
// for (int i = 0; i < 5; i++) {
// sPics.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
// }
// //在适配器类中添加一个方法来设置数据
// mLooperPagerAdapter.setData(sPics);
// mLooperPagerAdapter.notifyDataSetChanged();
handler = new Handler();
}
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
//当绑定这个窗口时
handler.post(mLooperTask);
}
@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
handler.removeCallbacks(mLooperTask);
}
private Runnable mLooperTask = new Runnable() {
@Override
public void run() {
//切换viewpager里面的图片到下一个
int currentItem = viewPager.getCurrentItem();
/**
* 这里要注意一下,++必须放在前面
* 先进行自增运算,在进行赋值。
* 布尔值设置为true表示是自动切换时有滑动效果,设置为false时没有滑动效果。
*/
viewPager.setCurrentItem(++currentItem,true);
//设置时间
handler.postDelayed(this,2000);
}
};
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
mLooperPagerAdapter.setData(sPics);
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
//设置初始位置
/**
* 如果为true,就是要做动画,false就是不做动画
*/
viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
}
}
首先实现一个Handler,来实现消息的传递;
覆写public void onAttachedToWindow()方法,表示绑定窗口时进行的 *** 作;
覆写public void onDetachedFromWindow(),表示解除绑定窗口时进行的 *** 作.
再来一个Runnable表示图片的切换和切换时间的设置.
具体代码的表示什么意思在注释里边已经很明确了,自己看注释就好
五、优化轮播图,实现手势控制是否自动轮播 1.首先创一个类使之继承ViewPagerpublic class MyViewPager extends ViewPager {
private OnViewPagerTouchListener mTouchListener = null;
public MyViewPager(@NonNull @NotNull Context context) {
super(context);
}
public MyViewPager(@NonNull @NotNull Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mTouchListener != null) {
mTouchListener.onPagerTouch(true);
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (mTouchListener != null) {
mTouchListener.onPagerTouch(false);
}
break;
}
return super.onTouchEvent(ev);
}
public void SetOnViewPagerTouchListener(OnViewPagerTouchListener listener){
this.mTouchListener = listener;
}
//设置一个接口进行轮播图是否=被触碰的监听
public interface OnViewPagerTouchListener{
void onPagerTouch(boolean isTouch);
}
}
2.里边设置一个接口,用来监听是否轮播图是否被触碰;在设置一个方法用来将接口转化为可调用的实例化方法;
public void SetOnViewPagerTouchListener(OnViewPagerTouchListener listener){
this.mTouchListener = listener;
}
//设置一个接口进行轮播图是否被触碰的监听
public interface OnViewPagerTouchListener{
void onPagerTouch(boolean isTouch);
}
3.设置一个方法,用来设置触碰事件的具体实现
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mTouchListener != null) {
mTouchListener.onPagerTouch(true);
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (mTouchListener != null) {
mTouchListener.onPagerTouch(false);
}
break;
}
return super.onTouchEvent(ev);
}
4.将主活动xml文件下viewpager的标签替换为 刚才创建的类的Reference
<androidx.constraintlayout.widget.ConstraintLayout 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.carousellearning.MyViewPager
android:id="@+id/content_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
tools:ignore="MissingClass,MissingConstraints" />
androidx.constraintlayout.widget.ConstraintLayout>
5.在java文件下修改代码
private MyViewPager viewPager;
private Runnable mLooperTask = new Runnable() {
@Override
public void run() {
if (!mIsTouch) {
//切换viewpager里面的图片到下一个
int currentItem = viewPager.getCurrentItem();
/**
* 这里要注意一下,++必须放在前面
* 先进行自增运算,在进行赋值。
* 布尔值设置为true表示是自动切换时有滑动效果,设置为false时没有滑动效果。
*/
viewPager.setCurrentItem(++currentItem,true);
//设置时间
}
handler.postDelayed(this,2000);
}
};
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
mLooperPagerAdapter.setData(sPics);
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
//设置初始位置
/**
* 如果为true,就是要做动画,false就是不做动画
*/
viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
viewPager.SetOnViewPagerTouchListener(this);
}
@Override
public void onPagerTouch(boolean isTouch) {
mIsTouch = isTouch;
}
六、给无线轮播图添加指示点
1.创建两个指示点的图标
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="10px"
android:width="10px"/>
<solid android:color="#9F9B9B"/>
shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="40px"
android:width="40px"/>
<solid android:color="#F30707"/>
shape>
2.修改主活动xml的代码
<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="200dp"
tools:context=".MainActivity">
<com.example.carousellearning.MyViewPager
android:id="@+id/content_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
tools:ignore="MissingClass,MissingConstraints" />
<LinearLayout
android:id="@+id/points_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40px">
LinearLayout>
RelativeLayout>
3.在java文件下添加一个新的方法,用来添加指示点
//添加小圆点,根据图片的个数来进行添加
private void insertPoint() {
for (int i = 0; i < sPics.size(); i++) {
View point = new View(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
point.setBackground(getResources().getDrawable(R.drawable.shape_point_nornal));
layoutParams.leftMargin = 20;
point.setLayoutParams(layoutParams);
pointContainer.addView(point);
}
}
4.覆写三个方法,用来实现指示点的监听事件
@Override
public void onPageSelected(int position) {
//这个方法的调用就是viewpager停下来以后选中的位置
int realPosition;
if (mLooperPagerAdapter.getDataResultSizse() != 0) {
realPosition = position % mLooperPagerAdapter.getDataResultSizse();
} else {
realPosition = 0;
}
setSelectedPoint(realPosition);
}
private void setSelectedPoint(int realPosition) {
for (int i = 0; i < pointContainer.getChildCount(); i++) {
View childAt = pointContainer.getChildAt(i);
if (i != realPosition) {
//若当前图片为选中,则就是白色
childAt.setBackgroundResource(R.drawable.shape_point_nornal);
} else {
//当前图片位置和该图片的真实位置相同,就是选中了,就表现出红色
childAt.setBackgroundResource(R.drawable.shape_point_selected);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
5.java文件下全部代码
public class MainActivity extends AppCompatActivity implements MyViewPager.OnViewPagerTouchListener, ViewPager.OnPageChangeListener {
private MyViewPager viewPager;
private looperpagerAdapter mLooperPagerAdapter;
private static List<Integer> sPics = new ArrayList<>();
static {
sPics.add(R.mipmap.one);
sPics.add(R.mipmap.two);
sPics.add(R.mipmap.three);
sPics.add(R.mipmap.four);
sPics.add(R.mipmap.five);
}
private Handler handler;
private boolean mIsTouch = false;
private LinearLayout pointContainer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
// //准备一个random类来提供随机颜色
// Random random = new Random();
//
// //准备数据
// for (int i = 0; i < 5; i++) {
// sPics.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
// }
// //在适配器类中添加一个方法来设置数据
// mLooperPagerAdapter.setData(sPics);
// mLooperPagerAdapter.notifyDataSetChanged();
handler = new Handler();
}
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
//当绑定这个窗口时
handler.post(mLooperTask);
}
@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
handler.removeCallbacks(mLooperTask);
}
private Runnable mLooperTask = new Runnable() {
@Override
public void run() {
if (!mIsTouch) {
//切换viewpager里面的图片到下一个
int currentItem = viewPager.getCurrentItem();
/**
* 这里要注意一下,++必须放在前面
* 先进行自增运算,在进行赋值。
* 布尔值设置为true表示是自动切换时有滑动效果,设置为false时没有滑动效果。
*/
viewPager.setCurrentItem(++currentItem, true);
//设置时间
}
handler.postDelayed(this, 2000);
}
};
//绑定控件
private void initView() {
//首先找到这个控件
viewPager = this.findViewById(R.id.content_pager);
//设置一个数据适配器
mLooperPagerAdapter = new looperpagerAdapter();
mLooperPagerAdapter.setData(sPics);
//设置一个对于位置的监听
viewPager.addOnPageChangeListener(this);
//给viewpager添加适配器
viewPager.setAdapter(mLooperPagerAdapter);
viewPager.SetOnViewPagerTouchListener(this);
pointContainer = findViewById(R.id.points_container);
//根据图片个数添加点的个数
insertPoint();
//设置初始位置
/**
* 如果为true,就是要做动画,false就是不做动画
*/
viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
}
//添加小圆点,根据图片的个数来进行添加
private void insertPoint() {
for (int i = 0; i < sPics.size(); i++) {
View point = new View(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
point.setBackground(getResources().getDrawable(R.drawable.shape_point_nornal));
layoutParams.leftMargin = 20;
point.setLayoutParams(layoutParams);
pointContainer.addView(point);
}
}
@Override
public void onPagerTouch(boolean isTouch) {
mIsTouch = isTouch;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//这个方法的调用就是viewpager停下来以后选中的位置
int realPosition;
if (mLooperPagerAdapter.getDataResultSizse() != 0) {
realPosition = position % mLooperPagerAdapter.getDataResultSizse();
} else {
realPosition = 0;
}
setSelectedPoint(realPosition);
}
private void setSelectedPoint(int realPosition) {
for (int i = 0; i < pointContainer.getChildCount(); i++) {
View childAt = pointContainer.getChildAt(i);
if (i != realPosition) {
//若当前图片为选中,则就是白色
childAt.setBackgroundResource(R.drawable.shape_point_nornal);
} else {
//当前图片位置和该图片的真实位置相同,就是选中了,就表现出红色
childAt.setBackgroundResource(R.drawable.shape_point_selected);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
对LayoutParams的详解
1.简介 :
LayoutParams继承于Android.View.ViewGroup.LayoutParams相当于一个Layout的信息包,它封装了Layout的位置、高、宽等信息。
通俗地讲(这里借鉴了网上的一种说法),LayoutParams类是用于child view(子视图)向parent view(父视图)传达自己的意愿的一个东西(孩子想变成什么样向其父亲说明)。举个栗子,子视图和父视图分别可以简单理解成一个LinearLayout 和该LinearLayout里边的一个 TextView 的关系, TextView 就算LinearLayout的子视图 child view。需要注意的是LayoutParams只是ViewGroup的一个内部类这里边这个也就是ViewGroup里边这个LayoutParams类是base class基类实际上每个不同的ViewGroup都有自己的LayoutParams子类。比如AbsListView.LayoutParams, AbsoluteLayout.LayoutParams, Gallery.LayoutParams, ViewGroup.MarginLayoutParams, WindowManager.LayoutParams等。
2.属性ViewGroup.LayoutParams类只能简单的设置高height以及宽width两个基本的属性,宽和高都可以设置成三种值:
1,一个确定的值;
2,MATCH_PARENT;
3,WRAP_CONTENT。
ViewGroup.MarginLayoutParams类是ViewGroup.LayoutParams的子类,顾名思义,它只能设置child View的margin属性信息。
1、利用setMargins(left,top,right,bottom);
2、利用MarginLayoutParams对象params方法单独设置.topMargin
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)