Android自定义轮播效果

最新推荐文章于 2024-06-24 17:55:20 发布

super码王

最新推荐文章于 2024-06-24 17:55:20 发布

阅读量1.2k

点赞数 1

分类专栏： Android自定义控件连续剧文章标签： android

本文链接：https://blog.csdn.net/qq_41885673/article/details/116356521

版权

Android自定义控件连续剧专栏收录该内容

40 篇文章 8 订阅

订阅专栏

效果展示

Android自定义轮播效果展示

思路分析

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

2、了解 clipChildren 属性

3、了解 PagerTransformer

了解 clipChildren 属性

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

效果展示

布局代码

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="bottom"
        android:orientation="horizontal">

        <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"/>

        <ImageView
            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);
        //第三步：设置适配器
        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){
                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 + 0.7f*position);
                    page.setScaleX(1 + 0.3f*position);
                    page.setScaleY(1 + 0.3f*position);
                }
            }
        }
    }
}

效果

第四步：优化

1、实现自动无线轮播

2、改变轮播的速度

有偿提问

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

有偿提问

super码王

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
6
评论
Android自定义轮播效果

效果展示思路分析1、首先我们得掌握 ViewPage 的使用，我们都知道在 ViewPager 中可以展示 ImageView、也可以加载一个 Fragment，这都是目前非常常见的用法。我们就不过多赘述。2、了解clipChildren 属性3、了解PagerTransformer了解clipChildren 属性clipChildren 属性要放在父控件上，意思是是否把子控件的多余部分隐藏，要配合子控件的android:layout_gravity="" 使用。...
复制链接

扫一扫