开发笔记:Android自定义轮播效果

1、首先我们得掌握 ViewPage 的使用&＃xff0c;我们都知道在 ViewPager 中可以展示 ImageView、也可以加载一个 Fragment&＃xff0c;这都是目前非常常见的用法。我们就不过多赘述。

2、了解 clipChildren 属性

3、了解 PagerTransformer

clipChildren 属性要放在 父控件上&＃xff0c;意思是是否把子控件的多余部分隐藏&＃xff0c;要配合子控件的 android:layout_gravity&＃61;"" 使用。

效果展示

布局代码


xmlns:app&＃61;"http://schemas.android.com/apk/res-auto"
xmlns:tools&＃61;"http://schemas.android.com/tools"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"match_parent"
android:orientation&＃61;"horizontal"
android:clipChildren&＃61;"false" //放在父控件上
tools:context&＃61;".MainActivity">
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"40dp"
android:layout_gravity&＃61;"bottom"
android:orientation&＃61;"horizontal">
android:layout_width&＃61;"0dp"
android:layout_height&＃61;"match_parent"
android:layout_weight&＃61;"1"
android:src&＃61;"&＃64;mipmap/ic_launcher"/>
android:layout_width&＃61;"0dp"
android:layout_height&＃61;"match_parent"
android:layout_weight&＃61;"1"
android:src&＃61;"&＃64;mipmap/ic_launcher"/>
android:layout_width&＃61;"0dp"
android:layout_height&＃61;"70dp"
android:layout_weight&＃61;"1"
android:layout_gravity&＃61;"bottom" //子控件配合
android:src&＃61;"&＃64;mipmap/ic_launcher"/>
android:layout_width&＃61;"0dp"
android:layout_height&＃61;"match_parent"
android:layout_weight&＃61;"1"
android:src&＃61;"&＃64;mipmap/ic_launcher"/>
android:layout_width&＃61;"0dp"
android:layout_height&＃61;"match_parent"
android:layout_weight&＃61;"1"
android:src&＃61;"&＃64;mipmap/ic_launcher"/>


了解 PagerTransformer

第一步&＃xff1a;写布局

注意点&＃xff1a;根布局 和 ViewPager 都得加 clipChildren &＃61; “false" 属性&＃xff0c;缺一不可


xmlns:app&＃61;"http://schemas.android.com/apk/res-auto"
xmlns:tools&＃61;"http://schemas.android.com/tools"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"match_parent"
android:orientation&＃61;"horizontal"
android:clipChildren&＃61;"false" //不能少
tools:context&＃61;".MainActivity">
android:id&＃61;"&＃64;&＃43;id/vp_my_viewpager"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"200dp"
android:layout_marginLeft&＃61;"80dp" //写这个属性的目的是 不能让单个 ViewPager 项占满整个横屏
android:layout_marginRight&＃61;"80dp"
android:clipChildren&＃61;"false" //不能少
/>


第二步&＃xff1a;写 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 imgList;
&＃64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//准备图片资源
imgList &＃61; 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);
//第一步&＃xff1a;找到 ViewPager 这个控件
vp_my_viewpager &＃61; findViewById(R.id.vp_my_viewpager);
//第二步&＃xff1a;设置 ViewPager 的一些属性
// 这个属性的目的 是设置 预加载3张 防止 滚动时出现断层
vp_my_viewpager.setOffscreenPageLimit(3);
// 这个属性的目的 是设置 每个Item之间的距离间隔
vp_my_viewpager.setPageMargin(10);
//第三步&＃xff1a;设置适配器
vp_my_viewpager.setAdapter(new myPagerAdapter());
}
private class myPagerAdapter extends PagerAdapter {
&＃64;Override
public int getCount() {
return imgList.size();
}
&＃64;Override
public boolean isViewFromObject(&＃64;NonNull View view, &＃64;NonNull Object object) {
return view &＃61;&＃61; object;
}
&＃64;NonNull
&＃64;Override
public Object instantiateItem(&＃64;NonNull ViewGroup container, int position) {
ImageView iv &＃61; new ImageView(getApplicationContext());
iv.setImageResource(imgList.get(position));
container.addView(iv);
return iv;
}
&＃64;Override
public void destroyItem(&＃64;NonNull ViewGroup container, int position, &＃64;NonNull Object object) {
container.removeView((View) object);
}
}
}


写到这里&＃xff0c;基本的效果已经出来了

如果想要更酷炫的效果&＃xff0c;那我们的主角得登场了 PagerTransformer

第三步&＃xff1a;灵活使用 PagerTransformer

transformPage(&＃64;NonNull View page, float position)
#参数一&＃xff1a; 视图
#参数二&＃xff1a; 参数一视图对应的位置变化


经过上面的分析&＃xff0c;我们可知我们最关心的是 屏幕显示项 &＃43; 屏幕显示项两侧布局 的动画效果&＃xff0c;他们的 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 imgList;
&＃64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//准备图片资源
imgList &＃61; 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);
//第一步&＃xff1a;找到 ViewPager 这个控件
vp_my_viewpager &＃61; findViewById(R.id.vp_my_viewpager);
//第二步&＃xff1a;设置 ViewPager 的一些属性
// 这个属性的目的 是设置 预加载3张 防止 滚动时出现断层
vp_my_viewpager.setOffscreenPageLimit(3);
// 这个属性的目的 是设置 每个Item之间的距离间隔
vp_my_viewpager.setPageMargin(0);
//第三步&＃xff1a;设置适配器
vp_my_viewpager.setAdapter(new myPagerAdapter());
//第四步&＃xff1a;设置 PagerTransformer
vp_my_viewpager.setPageTransformer(false,new myPagerTransformer());
}
private class myPagerAdapter extends PagerAdapter {
&＃64;Override
public int getCount() {
return imgList.size();
}
&＃64;Override
public boolean isViewFromObject(&＃64;NonNull View view, &＃64;NonNull Object object) {
return view &＃61;&＃61; object;
}
&＃64;NonNull
&＃64;Override
public Object instantiateItem(&＃64;NonNull ViewGroup container, int position) {
ImageView iv &＃61; new ImageView(getApplicationContext());
iv.setImageResource(imgList.get(position));
container.addView(iv);
return iv;
}
&＃64;Override
public void destroyItem(&＃64;NonNull ViewGroup container, int position, &＃64;NonNull Object object) {
container.removeView((View) object);
}
}
private class myPagerTransformer implements ViewPager.PageTransformer {
&＃64;Override
public void transformPage(&＃64;NonNull View page, float position) {
if (position <-1 || position > 1){
page.setAlpha(0.3f);
page.setScaleX(0.7f);
page.setScaleY(0.7f);
}else {
if (position > 0){
page.setAlpha(1 - 0.7f*position);
page.setScaleX(1 - 0.3f*position);
page.setScaleY(1 - 0.3f*position);
}else {
page.setAlpha(1 &＃43; 0.7f*position);
page.setScaleX(1 &＃43; 0.3f*position);
page.setScaleY(1 &＃43; 0.3f*position);
}
}
}
}
}


效果

第四步&＃xff1a;优化

1、实现自动无线轮播

2、改变轮播的速度

如果大家觉得这篇文章帮助你了&＃xff0c;可以支持一下。

有偿提问