Android 自定义轮播效果 (1),kotlin 编译器安卓版
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:layout_gravity="bottom" //子控件配合
android:src="@mipmap/ic_launcher"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
了解?PagerTransformer
===================
第一步:写布局
注意点:根布局 和 ViewPager 都得加?clipChildren = “false" 属性,缺一不可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal"
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.drawable.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);
评论