写点什么

Android 自定义轮播效果,flutter 开发环境

用户头像
Android架构
关注
发布于: 2021 年 11 月 05 日

android:clipChildren="false" //不能少


tools:context=".MainActivity">


<androidx.viewpager.widget.ViewPager


android:id="@+id/vp_my_viewpager"


android:layout_width="match_parent"


android:layout_height="200dp"


android:layout_marginLeft="80dp" //写这个属性的目的是 不能让单个 ViewPager 项占满整个横屏


android:layout_marginRight="80dp"


android:clipChildren="false" //不能少


/>


</LinearLayout>


第二步:写 java 代码


package com.wust.myhorizontalscrollview;


import androidx.annotation.NonNull;


import androidx.appcompat.app.AppCompatActivity;


import androidx.viewpager.widget.PagerAdapter;


import androidx.viewpager.widget.ViewPager;


import android.os.Bundle;


import android.os.Handler;


import android.os.Message;


import android.view.View;


import android.view.ViewGroup;


import android.view.animation.AccelerateInterpolator;


import android.widget.ImageView;


import java.lang.reflect.Field;


import java.util.ArrayList;


import java.util.List;


public class MainActivity extends AppCompatActivity {


private ViewPager vp_my_viewpager;


private List<Integer> imgList;


@Override


protected void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);


setContentView(R.layout.activity_main);


//准备图片资源


imgList = new ArrayList<>();


imgList.add(R.drawable.test);


imgList.add(R.drawable.test2);


imgList.add(R.drawable.test);


imgList.add(R.drawable.test2);


imgList.add(R.draw


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


able.test);


//第一步:找到 ViewPager 这个控件


vp_my_viewpager = findViewById(R.id.vp_my_viewpager);


//第二步:设置 ViewPager 的一些属性


// 这个属性的目的 是设置 预加载 3 张 防止 滚动时出现断层


vp_my_viewpager.setOffscreenPageLimit(3);


// 这个属性的目的 是设置 每个 Item 之间的距离间隔


vp_my_viewpager.setPageMargin(10);


//第三步:设置适配器


vp_my_viewpager.setAdapter(new myPagerAdapter());


}


private class myPagerAdapter extends PagerAdapter {


@Override


public int getCount() {


return imgList.size();


}


@Override


public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {


return view == object;


}


@NonNull


@Override


public Object instantiateItem(@NonNull ViewGroup container, int position) {


ImageView iv = new ImageView(getApplicationContext());


iv.setImageResource(imgList.get(position));


container.addView(iv);


return iv;


}


@Override


public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {


container.removeView((View) object);


}


}


}


写到这里,基本的效果已经出来了



如果想要更酷炫的效果,那我们的主角得登场了?PagerTransformer


第三步:灵活使用?PagerTransformer


transformPage(@NonNull View page, float position)


#参数一: 视图


#参数二: 参数一视图对应的位置变化



经过上面的分析,我们可知我们最关心的是 屏幕显示项 + 屏幕显示项两侧布局 的动画效果,他们的 position 变化我们也通过图解描述的很清楚


package com.wust.myhorizontalscrollview;


import androidx.annotation.NonNull;


import androidx.appcompat.app.AppCompatActivity;


import androidx.viewpager.widget.PagerAdapter;


import androidx.viewpager.widget.ViewPager;


import android.os.Bundle;


import android.os.Handler;


import android.os.Message;


import android.view.View;


import android.view.ViewGroup;


import android.view.animation.AccelerateInterpolator;


import android.widget.ImageView;


import java.lang.reflect.Field;


import java.util.ArrayList;


import java.util.List;


public class MainActivity extends AppCompatActivity {


private ViewPager vp_my_viewpager;


private List<Integer> imgList;


@Override


protected void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);


setContentView(R.layout.activity_main);


//准备图片资源


imgList = new ArrayList<>();


imgList.add(R.drawable.test);


imgList.add(R.drawable.test2);


imgList.add(R.drawable.test);


imgList.add(R.drawable.test2);


imgList.add(R.drawable.test);


//第一步:找到 ViewPager 这个控件


vp_my_viewpager = findViewById(R.id.vp_my_viewpager);


//第二步:设置 ViewPager 的一些属性


// 这个属性的目的 是设置 预加载 3 张 防止 滚动时出现断层


vp_my_viewpager.setOffscreenPageLimit(3);


// 这个属性的目的 是设置 每个 Item 之间的距离间隔


vp_my_viewpager.setPageMargin(0);


//第三步:设置适配器


vp_my_viewpager.setAdapter(new myPagerAdapter());


//第四步:设置 PagerTransformer


vp_my_viewpager.setPageTransformer(false,new myPagerTransformer());


}


private class myPagerAdapter extends PagerAdapter {


@Override


public int getCount() {


return imgList.size();


}


@Override


public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {


return view == object;


}


@NonNull


@Override


public Object instantiateItem(@NonNull ViewGroup container, int position) {


ImageView iv = new ImageView(getApplicationContext());


iv.setImageResource(imgList.get(position));


container.addView(iv);


return iv;


}


@Override


public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {


container.removeView((View) object);


}


}


private class myPagerTransformer implements ViewPager.PageTransformer {


@Override


public void transformPage(@NonNull View page, float position) {


if (position < -1 || position > 1){

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android自定义轮播效果,flutter开发环境