Android 自定义Banner

其他 2018-09-16 06:45:32 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Common_it/article/details/80706917

Android开发中，大部分APP都缺不了一个推广或者广告的一个Banner位置，今天就和大家利用ViewPage打造一个简单的Banner控件(前面是按照步骤的代码，后面有整体代码，所有资源文件也都在后面)

效果

Banner效果图

自定义控件老规矩

继承FrameLayout，加载一个界面到我们的自定义控件中

public class CustomBanner extends FrameLayout {
    private Context mContext;
    //ViewPager
    private ViewPager mViewPage;
    //指针显示容器
    private LinearLayout mLinearLayout;
    //指针控件容器
    private List<View> mPointView = new ArrayList<>();
    //指针个数
    private int pointSize = 0;
    //轮播间隔(ms)
    private final int DIV_TIME = 2000;
    private Handler mHandler = new Handler();
    private MRunnable mMRunnable;
    //滑动方向
    private boolean isPageOrientation = true;

    public CustomBanner(Context context) {
        this(context, null);
    }

    public CustomBanner(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomBanner(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }
}

初始化加载的控件

    /**
     * 初始化加载UI
     */
    private void initView() {
        View view = LayoutInflater.from(mContext).inflate(R.layout.custom_item, this);
        mViewPage = view.findViewById(R.id.cu_viewPage);
        mLinearLayout = view.findViewById(R.id.cu_pointer);
        mLinearLayout.setGravity(Gravity.CENTER);
        mViewPage.addOnPageChangeListener(new MPageChangeListener());
    }

ViewPage滑动监听

在这里处理指针的显示、和ViewPage的滑动方向

    /**
     * ViewPage滑动监听
     */
    private class MPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (position == 0) {
                isPageOrientation = true;
            }
            if (position == (pointSize - 1)) {
                isPageOrientation = false;
            }
            //将所有指针置为默认状态
            for (int i = 0; i < pointSize; i++) {
                mPointView.get(i).setSelected(false);
            }
            //将当前界面对面的指针置为选中状态
            mPointView.get(position).setSelected(true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

设置轮播界面的UI

这里需要把要轮播显示的界面传过来

    /**
     * 设置轮播UI
     *
     * @param data
     */
    public void setImageData(List<View> data) {
        pointSize = data.size();
        if (data != null && pointSize > 0) {
            MPageAdapter mMaxPageAdapter = new MPageAdapter(data);
            mViewPage.setAdapter(mMaxPageAdapter);
            initPoint();
        }
    }

适配器

适配器很简单，基本操作

    /**
     * ViewPage适配器
     */
    private class MPageAdapter extends PagerAdapter {
        private List<View> data;

        public MPageAdapter(List<View> data) {
            this.data = data;
        }

        @Override
        public int getCount() {
            return data != null ? data.size() : 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View mView = data.get(position);
            container.addView(mView);
            return mView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

开启轮播

这里也交给使用者自己来控制

    /**
     * 开启轮播
     */
    public void start() {
        if (mMRunnable == null) {
            mMRunnable = new MRunnable();
        }
        mHandler.postDelayed(mMRunnable, DIV_TIME);
    }

停止轮播

    /**
     * 停止轮播
     */
    public void stop() {
        if (mMRunnable != null) {
            mHandler.removeCallbacks(mMRunnable);
        }
    }

定时任务

根据时间间隔切换界面

    /**
     * 定时任务
     */
    private class MRunnable implements Runnable {

        @Override
        public void run() {
            mHandler.postDelayed(mMRunnable, DIV_TIME);
            int mCurrentItem = mViewPage.getCurrentItem();
            if (isPageOrientation) {
                mCurrentItem++;
            } else {
                mCurrentItem--;
            }
            mViewPage.setCurrentItem(mCurrentItem);
        }
    }

R.layout.custom_item 界面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/cu_viewPage"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_marginBottom="10dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/cu_pointer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />

</RelativeLayout>

R.drawable.point_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/item_circle_def" android:state_selected="false"/>
    <item android:drawable="@drawable/item_circle_sel" android:state_selected="true"/>
</selector>

item_circle_def和item_circle_sel

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2.5dp"/>
    <solid android:color="#B3FFFFFF"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2.5dp"/>
    <solid android:color="#FF0000"/>
</shape>

整体代码

public class CustomBanner extends FrameLayout {
    private Context mContext;
    //ViewPager
    private ViewPager mViewPage;
    //指针显示容器
    private LinearLayout mLinearLayout;
    //指针控件容器
    private List<View> mPointView = new ArrayList<>();
    //指针个数
    private int pointSize = 0;
    //轮播间隔(ms)
    private final int DIV_TIME = 2000;
    private Handler mHandler = new Handler();
    private MRunnable mMRunnable;
    //滑动方向
    private boolean isPageOrientation = true;

    public CustomBanner(Context context) {
        this(context, null);
    }

    public CustomBanner(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomBanner(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }

    /**
     * 初始化加载UI
     */
    private void initView() {
        View view = LayoutInflater.from(mContext).inflate(R.layout.custom_item, this);
        mViewPage = view.findViewById(R.id.cu_viewPage);
        mLinearLayout = view.findViewById(R.id.cu_pointer);
        mLinearLayout.setGravity(Gravity.CENTER);
        mViewPage.addOnPageChangeListener(new MPageChangeListener());
    }


    /**
     * 设置轮播UI
     *
     * @param data
     */
    public void setImageData(List<View> data) {
        pointSize = data.size();
        if (data != null && pointSize > 0) {
            MPageAdapter mMaxPageAdapter = new MPageAdapter(data);
            mViewPage.setAdapter(mMaxPageAdapter);
            initPoint();
        }
    }

    /**
     * 开启轮播
     */
    public void start() {
        if (mMRunnable == null) {
            mMRunnable = new MRunnable();
        }
        mHandler.postDelayed(mMRunnable, DIV_TIME);
    }

    /**
     * 停止轮播
     */
    public void stop() {
        if (mMRunnable != null) {
            mHandler.removeCallbacks(mMRunnable);
        }
    }

    /**
     * 初始化指针
     */
    private void initPoint() {
        for (int i = 0; i < pointSize; i++) {
            View view = new View(mContext);
            int viewSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());
            LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(viewSize, viewSize);
            mLayoutParams.leftMargin = mLayoutParams.rightMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
            view.setLayoutParams(mLayoutParams);
            view.setBackground(ContextCompat.getDrawable(mContext, R.drawable.point_background));
            view.setSelected(false);
            mLinearLayout.addView(view);
            mPointView.add(view);
        }
        mPointView.get(0).setSelected(true);
    }

    /**
     * ViewPage适配器
     */
    private class MPageAdapter extends PagerAdapter {
        private List<View> data;

        public MPageAdapter(List<View> data) {
            this.data = data;
        }

        @Override
        public int getCount() {
            return data != null ? data.size() : 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View mView = data.get(position);
            container.addView(mView);
            return mView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

    /**
     * ViewPage滑动监听
     */
    private class MPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (position == 0) {
                isPageOrientation = true;
            }
            if (position == (pointSize - 1)) {
                isPageOrientation = false;
            }
            //将所有指针置为默认状态
            for (int i = 0; i < pointSize; i++) {
                mPointView.get(i).setSelected(false);
            }
            //将当前界面对面的指针置为选中状态
            mPointView.get(position).setSelected(true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    /**
     * 定时任务
     */
    private class MRunnable implements Runnable {

        @Override
        public void run() {
            mHandler.postDelayed(mMRunnable, DIV_TIME);
            int mCurrentItem = mViewPage.getCurrentItem();
            if (isPageOrientation) {
                mCurrentItem++;
            } else {
                mCurrentItem--;
            }
            mViewPage.setCurrentItem(mCurrentItem);
        }
    }
}

实现思路

  1. 基础需要ViewPage实现滚动，下面加一个容器来放置指针
  2. 利用Handler的postDelayed方法实现定时滚动的

猜你喜欢

转载自blog.csdn.net/Common_it/article/details/80706917
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022