自定义BannerView,显示下个一个view部分界面

最新推荐文章于 2024-08-20 09:37:41 发布
最新推荐文章于 2024-08-20 09:37:41 发布
阅读量1.5k 收藏
点赞数 2
分类专栏： 自定义view 文章标签： android bannerView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16782391/article/details/78604364
版权

           先上效果图:

           

          一.view的分析

           首先看到view的轮播效果，一般人会想到用viewpager来实现这个功能，但是viewpager之间的view是独立了，看这个view是个独立的整体，所以viewpager不大适合这个是用场景，另外看到横向滑动的效果可能会想到horizontalscrollview,但注意到的是每一次滑动是移动一屏，但是horizontalscrollview是不断的移动,综合上述情况，我采用了水平方向的LinerLayout来实现上述效果。

          二.功能的实现

         下一个view会有少许部分界面在上一个view的页面中，这时候需要控制第一个view的宽度，第一view的宽度通过获取屏幕的宽度减去下个view显示在第一个view中的宽度

         

 int margin;
 int width;
 margin = DensityUtils.dp2px(PriceRankActivity.this,50);
 width = ScreenUtils.getScreenWidth(PriceRankActivity.this);
 ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams((width - margin), ViewGroup.LayoutParams.WRAP_CONTENT);
                    ll_addview.addView(view,lp);

 

          

        给LinerLayout加上手势监听，判断一个view是向左划还是向右划，在处理相应的滑动逻辑

        

  ll_addview.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent)
            {

                int margin = DensityUtils.dp2px(PriceRankActivity.this,50);
                int width = ScreenUtils.getScreenWidth(PriceRankActivity.this);

                switch (motionEvent.getAction()) {

                    case MotionEvent.ACTION_DOWN:
                        mPosX = (int) motionEvent.getX();
                        mPosY = (int) motionEvent.getY();

                        Log.e("Main"," mPosX " + mPosX + "  mPosY " + mPosY);
                        break;
                    case MotionEvent.ACTION_MOVE:
                        mCurPosX = (int) motionEvent.getX();
                        mCurPosY = (int) motionEvent.getY();

                        Log.e("Main"," mCurPosX " + mCurPosX + "  mCurPosY " + mCurPosY);
                        break;
                    case MotionEvent.ACTION_UP:
//                        if (mCurPosY - mPosY > 0
//                                && (Math.abs(mCurPosY - mPosY) > 25)) {
//                            //向下滑動
//
//                        } else if (mCurPosY - mPosY < 0
//                                && (Math.abs(mCurPosY - mPosY) > 25)) {
//                            //向上滑动
//
//                        }

                        if (mCurPosX - mPosX < 0 &&  (Math.abs(mCurPosX - mPosX) > 25)){

                            //Toast.makeText(PriceRankActivity.this,"向左滑动",Toast.LENGTH_SHORT).show();


                            if (isAnimalPaly){
                                switch (mCurrentPosiotn){

                                    case PERVIOUS:

                                        initAnimation();

                                        mCurrentPosiotn = MIDDLEN;
                                        break;

                                    case MIDDLEN:
                                        first = (width - margin);
                                        second = 2*(width - margin);

                                        initAnimation();
                                        mCurrentPosiotn = NEXT;


                                        break;

                                    case NEXT:

                                        first = 2*(width - margin);
                                        second =  2*(width - margin);

                                        initAnimation();

                                        //ll_addview.scrollTo(2*(width-margin),0);
                                        break;
                                }
                            }


                        }

                        if (mCurPosX - mPosX > 0 &&  (Math.abs(mCurPosX - mPosX) > 25)){

                           // Toast.makeText(PriceRankActivity.this,"向右滑动",Toast.LENGTH_SHORT).show();
                            if (isAnimalPaly){
                                switch (mCurrentPosiotn){

                                    case PERVIOUS:
//                                    first = 0;
//                                    second = (width - margin);


                                        break;

                                    case MIDDLEN:
                                        first = (width - margin);
                                        second =  0;

                                        initAnimation();
                                        mCurrentPosiotn = PERVIOUS;
                                        first = 0;
                                        second = (width - margin);
                                        break;

                                    case NEXT:
                                        first = 2*(width - margin);
                                        second =  (width - margin);
                                        initAnimation();

                                        mCurrentPosiotn = MIDDLEN;

                                        break;
                                }
                            }

                        }


                        break;
                }
                return true;
            }
        });

 

 

 

       

          控制view的移动，这里通过LinerLayout的scrollTo方法,每一屏的切换就是当前view的宽度，如果直接调用scrollTo方法切换，是瞬时切换，没有动画效果，想要让view的切换有动画效果，这时候要引入ValueAnimator方法，通过监听这个差值器的方法，通过把这个切换的距离切成一小段，通过不断的调用scrollTo方法让view缓慢的移动到指定的位置

         

private void initAnimation(){
        ValueAnimator valueAnimator;valueAnimator = ValueAnimator.ofFloat(first,second);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
        {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator)
            {
                float mAnimatorValue = (float) valueAnimator.getAnimatedValue();

                ll_addview.scrollTo((int)mAnimatorValue,0);

            }
        });
        valueAnimator.setDuration(500);

        valueAnimator.addListener(new Animator.AnimatorListener()
        {
            @Override
            public void onAnimationStart(Animator animator)
            {
                isAnimalPaly = false;
            }

            @Override
            public void onAnimationEnd(Animator animator)
            {
                Log.e(" animator ","动画结束");
                isAnimalPaly = true;
            }

            @Override
            public void onAnimationCancel(Animator animator)
            {

            }

            @Override
            public void onAnimationRepeat(Animator animator)
            {

            }
        });

        valueAnimator.start();
    }

 

 

 

       
 三.贴上完整代码

    

package smartworld.com.wcjsview;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ${charles}     on 2017/11/22.
 *
 * @desc ${TODO}
 */

public class PriceRankActivity extends AppCompatActivity
{
    private LinearLayout ll_addview;

    int mPosX,mPosY,mCurPosX,mCurPosY;
    public static final int PERVIOUS = 1;
    public static final int MIDDLEN = 2;
    public static final int NEXT = 3;

    private int mCurrentPosiotn = PERVIOUS;


    int margin;
    int width;
    private int first,second;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rank);

        ll_addview = (LinearLayout) findViewById(R.id.ll_addview);
        margin = DensityUtils.dp2px(PriceRankActivity.this,50);
        width = ScreenUtils.getScreenWidth(PriceRankActivity.this);

        first = 0;
        second = (width - margin);




        ll_addview.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent)
            {

                int margin = DensityUtils.dp2px(PriceRankActivity.this,50);
                int width = ScreenUtils.getScreenWidth(PriceRankActivity.this);

                switch (motionEvent.getAction()) {

                    case MotionEvent.ACTION_DOWN:
                        mPosX = (int) motionEvent.getX();
                        mPosY = (int) motionEvent.getY();

                        Log.e("Main"," mPosX " + mPosX + "  mPosY " + mPosY);
                        break;
                    case MotionEvent.ACTION_MOVE:
                        mCurPosX = (int) motionEvent.getX();
                        mCurPosY = (int) motionEvent.getY();

                        Log.e("Main"," mCurPosX " + mCurPosX + "  mCurPosY " + mCurPosY);
                        break;
                    case MotionEvent.ACTION_UP:
//                        if (mCurPosY - mPosY > 0
//                                && (Math.abs(mCurPosY - mPosY) > 25)) {
//                            //向下滑動
//
//                        } else if (mCurPosY - mPosY < 0
//                                && (Math.abs(mCurPosY - mPosY) > 25)) {
//                            //向上滑动
//
//                        }

                        if (mCurPosX - mPosX < 0 &&  (Math.abs(mCurPosX - mPosX) > 25)){

                            //Toast.makeText(PriceRankActivity.this,"向左滑动",Toast.LENGTH_SHORT).show();


                            if (isAnimalPaly){
                                switch (mCurrentPosiotn){

                                    case PERVIOUS:

                                        initAnimation();

                                        mCurrentPosiotn = MIDDLEN;
                                        break;

                                    case MIDDLEN:
                                        first = (width - margin);
                                        second = 2*(width - margin);

                                        initAnimation();
                                        mCurrentPosiotn = NEXT;


                                        break;

                                    case NEXT:

                                        first = 2*(width - margin);
                                        second =  2*(width - margin);

                                        initAnimation();

                                        //ll_addview.scrollTo(2*(width-margin),0);
                                        break;
                                }
                            }


                        }

                        if (mCurPosX - mPosX > 0 &&  (Math.abs(mCurPosX - mPosX) > 25)){

                           // Toast.makeText(PriceRankActivity.this,"向右滑动",Toast.LENGTH_SHORT).show();
                            if (isAnimalPaly){
                                switch (mCurrentPosiotn){

                                    case PERVIOUS:
//                                    first = 0;
//                                    second = (width - margin);


                                        break;

                                    case MIDDLEN:
                                        first = (width - margin);
                                        second =  0;

                                        initAnimation();
                                        mCurrentPosiotn = PERVIOUS;
                                        first = 0;
                                        second = (width - margin);
                                        break;

                                    case NEXT:
                                        first = 2*(width - margin);
                                        second =  (width - margin);
                                        initAnimation();

                                        mCurrentPosiotn = MIDDLEN;

                                        break;
                                }
                            }

                        }


                        break;
                }
                return true;
            }
        });
        initData();

        addItemView();
    }

    private boolean isAnimalPaly = true;
    private void initAnimation(){
        ValueAnimator valueAnimator;valueAnimator = ValueAnimator.ofFloat(first,second);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
        {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator)
            {
                float mAnimatorValue = (float) valueAnimator.getAnimatedValue();

                ll_addview.scrollTo((int)mAnimatorValue,0);

            }
        });
        valueAnimator.setDuration(500);

        valueAnimator.addListener(new Animator.AnimatorListener()
        {
            @Override
            public void onAnimationStart(Animator animator)
            {
                isAnimalPaly = false;
            }

            @Override
            public void onAnimationEnd(Animator animator)
            {
                Log.e(" animator ","动画结束");
                isAnimalPaly = true;
            }

            @Override
            public void onAnimationCancel(Animator animator)
            {

            }

            @Override
            public void onAnimationRepeat(Animator animator)
            {

            }
        });

        valueAnimator.start();
    }


    String[] str = {"本田","丰田","三菱"};
    String[] str2 = {"1","2","3"};
    private void addItemView(){
        int width = ScreenUtils.getScreenWidth(this);


            for (int z = 0; z < listList.size(); z++ ){

                View view = View.inflate(this,R.layout.item_price_rank,null);
                LinearLayout ll_root = (LinearLayout) view.findViewById(R.id.ll_root);

                List<PriceBean> priceBeanList = listList.get(z);
                for (int i=0; i < priceBeanList.size(); i++){

                    View childView =  View.inflate(this,R.layout.item_child,null);
                    TextView tv_title = (TextView) childView.findViewById(R.id.tv_title);
                    TextView tv_num = (TextView) childView.findViewById(R.id.tv_num);


                    tv_title.setText(priceBeanList.get(i).getTitle());
                    tv_num.setText(priceBeanList.get(i).getNum());

                    ll_root.addView(childView);
                }

                if (z == 2){

                    ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams((width), ViewGroup.LayoutParams.WRAP_CONTENT);
                    ll_addview.addView(view,lp);
                }else {
                    int margin = DensityUtils.dp2px(this,50);
                    ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams((width - margin), ViewGroup.LayoutParams.WRAP_CONTENT);
                    ll_addview.addView(view,lp);
                }

            }

    }

    private List<List<PriceBean>> listList = new ArrayList<>();
    private void initData(){
        List<PriceBean> list1 = new ArrayList<>();
        list1.add(new PriceBean("1","本田"));
        list1.add(new PriceBean("2","本田"));
        list1.add(new PriceBean("3","本田"));

        List<PriceBean> list2 = new ArrayList<>();
        list2.add(new PriceBean("1","宝马"));
        list2.add(new PriceBean("2","宝马"));
        list2.add(new PriceBean("3","宝马"));

        List<PriceBean> list3 = new ArrayList<>();
        list3.add(new PriceBean("1","奔驰"));
        list3.add(new PriceBean("2","奔驰"));
        list3.add(new PriceBean("3","奔驰"));

        listList.add(list1);
        listList.add(list2);
        listList.add(list3);
    }

    class PriceBean{

        String num;
        String title;

        public PriceBean(String num, String title)
        {
            this.num = num;
            this.title = title;
        }

        public String getNum()
        {
            return num;
        }

        public void setNum(String num)
        {
            this.num = num;
        }

        public String getTitle()
        {
            return title;
        }

        public void setTitle(String title)
        {
            this.title = title;
        }
    }
}

 

 

 

     项目地址

欢迎加Q群交流学习:819443769

JianXinZheng
关注
专栏目录
BannerView
LinWeiJ的博客
02-08 799
BannerView 源码地址： BannerView 一个基于FrameLayout+ViewPager+FragmentPagerAdapter的轮播图 特点: 广告轮播图,跟FrameLayout一样简单使用 基于ViewPager+FragmentPagerAdapter,滑动流畅 可定制图片加载器 提供一些定制接口 如何使用它 gradle 先在 ...
图片轮播(BannerView)
CFOX
07-17 795
图片轮播(BannerView)
BannerView:Android BannerView 图片轮播控件，支持无限循环，可设置显示各种样式，支持添加banner切换动画，支持定制各种大小形状不一的指示器。调用简单，代码稳定，体积小
05-16
BannerView 这是一个轻量简洁的自定义banner控件。欢迎大家提出意见或建议 BannerView在控件可见时自动播放，不可见时停止播放，不需要额外设置界面切换时的开始播放和暂停播放。 Gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } } implementation 'com.github.lany192:BannerView:3.0.1' Usage xml layout <com.lany.banner.BannerView android:id="@+id/banner_view" android:layout_width="match_parent" android:layout_height="180dp" app:ba
TextBannerView 使用教程
最新发布
gitblog_00093的博客
08-20 231
TextBannerView 使用教程 TextBannerView项目地址:https://gitcode.com/gh_mirrors/tex/TextBannerView 1. 项目目录结构及介绍 TextBannerView 是一个专为 Android 开发的文本轮播控件，实现在应用中创建类似于电商应用中的广告词滚动效果。以下是该项目的基本目录结构及其简介： TextBannerVie...
ViewPager系列之 仿魅族应用的广告BannerView
weixin_34289454的博客
06-04 138
前言 Banner广告位是APP 中的一个非常重要的位置，为什么呢？因为它能带来money。是一个公司很重要的一个营收点。像那种用户数基数特别大的产品，如facebook、twitter、QQ、微信等等。Banner广告位日营收估计得上千万美刀（猜的,不知道具体数据）。一个漂亮的Banner往往能够吸引用户的眼球，引导用户点击，从而提高转化率。遗憾的是现在的大多数产品的Banner都是千篇一律的，...
Android自定义view二Banner
qq_34942689的博客
03-22 379
自定义view第二篇，无限自动轮播的banner public class BannerView extends LinearLayout implements ViewPager.OnPageChangeListener{ private Context mContext; private ViewPager viewPager; private LinearLayout pointsVie...
Android BannerView
09-03
Android结合viewpager实现的简单广告轮播banner控件，仅供参考~
仿米赚带两侧slidingmenu和自动banner的一个应用.zip
12-10
2. 自定义View：如果不需要特定的广告平台，开发者也可以自定义一个View，包含多个ImageView，并通过Handler或Timer进行定时切换。 在这个项目中，开发者可能使用了自定义View或者第三方库来实现自动轮播的Banner，...
自定义Banner控件：无限循环图片轮播实现
在本文中，作者分享了如何通过自定义View的方式，来实现一个具有高度灵活性和可配置性的无限循环图片轮播器。这个自定义Banner控件不仅实现了基本的图片切换功能，还提供了以下特性： 1. **支持自定义宽高比例**：...
meta的Name为apple-itunes-app 是什么意思
DA6328的博客
07-25 229
例如：<meta name="apple-itunes-app" content="app-id=432274380" />解答：这个标签是告诉iphone的safari浏览器，这个网站对应的app是什么，然后在页面上面显示一个下载banner 转载于:https://www.cnblogs.com/Mwsoft/p/3867526.html...
Android常用控件-BannerView(无限轮播图控件)
weixin_33892359的博客
08-05 842
轮播图控件，封装ViewPager，支持无限循环轮播，支持三种常用页面特效，支持设置指示器，支持自动切换手动滑动和自动滑动的滑动时长，封装Banner的Holder实现更加简单。使用Kotlin开发，在项目中使用，满足大部分Banner相关需求，可以直接使用。 本项目基于MZBannerView进行二次开发，只用于开源交流，如果侵权等问题请及时提醒。 简单预览 使用方法 在项目根目录的bui...
自定义BannerView
12-01
看了很多bannerView的实现，看起来比较困难，于是自己自定义了一个，使用就像是普通widget一样的使用，可以设置indicator的位置，可以设置图片的数量，手动播放，点击item,自动播放都支持。
BannerView：适用于Android的BannerView
02-07
BannerView Android版BannerView。 从RecyclerView扩展。 显示图像或文字。 简单易用，易于扩展。 屏幕截图 入门 步骤1.将其添加到存储库末尾的root build.gradle中： allprojects { repositories { .. . maven { url ' https://jitpack.io ' } } } 步骤2.添加依赖关系： dependencies { implementation ' com.github.mminng:BannerView:1.0.0 ' } 例就像使用Recyclerview 将BannerView添加到您的布局 图片横幅 < com> 文字横幅
Android 最新可见上下页的banner实现demo
03-21
这个demo实现了Android 最新可见上下页的banner，快捷导入接口使用
Android-单页显示3个Item的ViewPager炫酷切换效果适用于Banner等。
08-12
单页显示3个Item的ViewPager炫酷切换效果，适用于Banner等。
Android-LBannerView-包含小圆点的轮播图控件
08-13
LBannerView - 包含小圆点的轮播图控件
Android-简单的轮播图控件BannerView
skyf1y的专栏
09-14 886
一个简单android轮播图控件，引入非常简单，只要给工程增加一个类即可
android只轮播,Android App Banner，用它就够了。无限轮播、简单易用、扩展性强的BannerView...
weixin_29819789的博客
06-07 475
按照惯例先上效果图：引导页效果标题等信息跟随页面滚动标题固定，圆点指示器标题固定，数字指示器还有各种效果体验Demo点击下载或扫码下载DemoApk"扫码下载"写在前面GitHub上有更加详细的使用介绍的，如果你想直接看GitHub上的也可以直接点击后面的传送门去往GitHub。我是传送门本文的内容可能有点长，如果你想要直接但Demo的源码的，可以直接跳到最后，最后有完整的代码(包括Java代码和...
自定义View之轮播控件BannerView
AmStrong_的博客
04-16 1149
一、介绍 在项目中使用的自动轮播控件一直是网上别人做的，在出现问题的时候去看代码细节扫雷就非常浪费时间。于是痛定思痛自己造个轮子。 这个控件在app中使用非常频繁，并且原理也不复杂，就是在前后各加一页。相信每一个android开发者都会做这个东西。 功能介绍： 1.无限自动轮播。 2.指示器（下方的小点点） 3.滚动动画时间可调 4.拖拽的时候停止轮播 全部代码和示例代...
Android自定义View：打造QQ健康界面
"这篇教程介绍了如何在Android平台上创建一个自定义View来仿制QQ健康界面。作者通过四个步骤展示了实现过程，重点在于自定义View的属性定义和使用，以及界面效果的实现。" 在Android开发中，自定义View是创建独特...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值