自定义HorizontalScrollView视图实现仿ViewPager效果

最新推荐文章于 2024-04-12 13:41:42 发布
最新推荐文章于 2024-04-12 13:41:42 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： Android 文章标签： viewpager

先展示效果图:
这里写图片描述

自定义HorizontalScrollView类：AppHorizontalScrollView

package com.eg.lyx.demo;
import java.util.ArrayList;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;

/***
 * 应用详情页截图 自定义HorizontalScrollView视图  （ 仿ViewPager效果）
 *
 */
public class AppHorizontalScrollView extends HorizontalScrollView {

    /**
     * 数据定义
     */
    private int subChildCount = 0;
    private ViewGroup firstChild = null;
    private int downX = 0;
    private int currentPage = 0;
    private ArrayList<Integer> viewList = new ArrayList<Integer>();

    /**
     * 构造方法
     */
    public AppHorizontalScrollView(Context context, AttributeSet attrs,
                                   int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public AppHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public AppHorizontalScrollView(Context context) {
        super(context);
        init();
    }

    private void init() {
        setHorizontalScrollBarEnabled(false);//设置原有的滚动无效
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        getChildInfo();
    }

    /**
     * 获取子视图信息
     */
    public void getChildInfo() {

        firstChild = (ViewGroup) getChildAt(0);
        if (firstChild != null) {
            subChildCount = firstChild.getChildCount();
            for (int i = 0; i < subChildCount; i++) {
                if (((View) firstChild.getChildAt(i)).getWidth() > 0) {
                    viewList.add(((View) firstChild.getChildAt(i)).getLeft());
                }
            }
        }

    }

    /**
     * 触摸监听时间
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = (int) ev.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                if (Math.abs((ev.getX() - downX)) > getWidth() / 4) {
                    if (ev.getX() - downX > 0) {
                        smoothScrollToPrePage();
                    } else {
                        smoothScrollToNextPage();
                    }
                } else {
                    smoothScrollToCurrent();
                }
                return true;
            }
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 滑动到当前页
     */
    private void smoothScrollToCurrent() {
        smoothScrollTo(viewList.get(currentPage)-10, 0);
    }

    /**
     * 滑动到下一页
     */
    private void smoothScrollToNextPage() {
        if (currentPage < subChildCount - 1) {
            currentPage++;
            smoothScrollTo(viewList.get(currentPage)-10, 0);
        }
    }
    /**
     * 滑动到上一页
     */
    private void smoothScrollToPrePage() {
        if (currentPage > 0) {
            currentPage--;
            smoothScrollTo(viewList.get(currentPage)-10, 0);
        }
    }

    /**
     * 滑动到下一页
     * @author caizhiming
     */
    public void nextPage() {
        smoothScrollToNextPage();
    }

    /**
     * 滑动到上一页
     */
    public void prePage() {
        smoothScrollToPrePage();
    }

    /**
     * 跳转到指定的页面
     */
    public boolean gotoPage(int page) {
        if (page > 0 && page < subChildCount - 1) {
            smoothScrollTo(viewList.get(page), 0);
            currentPage = page;
            return true;
        }
        return false;
    }

}

布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.eg.lyx.demo.MainActivity">

    <com.eg.lyx.demo.AppHorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <include layout="@layout/item_one"/>

            <include layout="@layout/item_one"/>

            <include layout="@layout/item_one"/>

            <include layout="@layout/item_one"/>

        </LinearLayout>

    </com.eg.lyx.demo.AppHorizontalScrollView>

</RelativeLayout>

item_one:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="360dp"
              android:layout_height="wrap_content"
              android:layout_marginRight="20dp"
              android:layout_marginTop="20dp"
              android:background="@drawable/bg"
              android:orientation="vertical"
              android:paddingLeft="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="景点玩乐"
        android:textColor="#99000000"
        android:textStyle="bold"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:src="@drawable/aa"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="6dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="POI名称"
                android:textSize="13sp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_marginBottom="4dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:visibility="visible">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4.9分"
                    android:textColor="#e69e0e"
                    android:textSize="11sp"/>

                <View
                    android:layout_width="1px"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="2dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    android:layout_marginTop="2dp"
                    android:background="#000000"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="距离市中心10.2km"
                    android:textSize="11sp"/>


            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="234起"
                android:textColor="#e69e0e"
                android:textSize="11sp"/>


        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:layout_marginRight="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1c57c4"
                android:text="预订"
                android:textColor="#ffffff"/>

        </LinearLayout>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:src="@drawable/aa"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="6dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="POI名称"
                android:textSize="13sp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_marginBottom="4dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:visibility="visible">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4.9分"
                    android:textColor="#e69e0e"
                    android:textSize="11sp"/>

                <View
                    android:layout_width="1px"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="2dp"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    android:layout_marginTop="2dp"
                    android:background="#000000"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="距离市中心10.2km"
                    android:textSize="11sp"/>


            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="234起"
                android:textColor="#e69e0e"
                android:textSize="11sp"/>


        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:layout_marginRight="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1c57c4"
                android:text="预订"
                android:textColor="#ffffff"/>

        </LinearLayout>


    </LinearLayout>

</LinearLayout>
Y X L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android利用HorizontalScrollView仿ViewPager设计简单相册
09-02
3. 自定义HorizontalScrollView需要计算每个图片View的宽度和高度，以便填充到容器中。这通常通过获取屏幕宽度并根据需要的布局进行计算。 4. 关于缓存机制，我们可以借鉴ViewPager的思想，在用户滑动时动态加载或...
Android自定义HorizontalScrollView打造超强Gallery效果
09-02
本文将深入探讨如何通过自定义HorizontalScrollView来实现一个类似ViewPager的功能，以解决这些问题。 首先，让我们了解HorizontalScrollView的基本使用方法。HorizontalScrollView继承自FrameLayout，因此它只能有...
Android重写HorizontalScrollView仿ViewPager效果
weixin_33913332的博客
11-11 279
Android提供的ViewPager类太复杂，有时候没有必要使用，所以重写一个HorizontalScrollView来实现类似的效果，也可以当做Gallery来用 思路很简单，就是重写onTouchEvent事件，在手指抬起或者取消的时候，进行smoothScroll的操作，具体请看代码： 布局文件：activity_test.xml 1 &lt;?xml version="1.0...
Android中ViewPager2的介绍，以及它的使用示例
m0_46368082的博客
02-29 1107
ViewPager2是Android官方提供的一个用于实现页面滚动视图的库。它是ViewPager的增强版，基于实现，提供了更多的功能和更好的。ViewPager2能够更有效地处理页面切换，并且支持垂直方向的滑动。可以实现页面滚动视图，常用于展示图片画廊、应用主界面标签页等场景。由于基于，可以充分利用的各种配置功能，如等。
手把手讲解ViewPager翻页特效：关键代码_viewpager叠加特效
最新发布
2301_79097795的博客
04-12 850
至此，ViewPager部分结束。做出这个效果的基本思路和详细过程都已经呈上。再次给出Demo地址：https://github.com/18598925736/StudyTabLayout/tree/hank_v1此Demo不仅仅是针对ViewPager的滑动特效，还包含了TabLayout 呈现效果的完全自定义。至于TabLayout如何随心所欲的操纵，下一篇文章将会详解。先预告一个最终效果图, 文章会尽快出炉。
Android 自定义 HorizontalScrollView 实现ViewPager效果，打造再多图片（控件）也不怕 OOM
热门推荐
z240336124的专栏
03-13 1万+
1. 效果上次实现了这个IOS Reveal效果，能够确保中间部分是彩色其余部分是灰色，但是也遗留了两个问题： 　　(1)如果把它做成ViewPager效果的方式可能会更好； 　　(2)HorizontalScrollView没有重用机制，虽然可能我们并不会加载很多的图片，但是一旦过多肯定会出现OOM问题；
利用HorizontalScrollView自己写一个viewPager指示器
u013835855的专栏
05-04 2579
目前滑动指示器最著名的是JakeWarton的ViewpagerIndicator，用别人的东西固然方便，但是也带来很多使用上的疑惑，这篇博客，我们使用HorizontalScrollView自己写一个viewPager指示器。 这里首先说一下很多自己写的indicator只限于可视范围内不能移动的指示器，所以tab的数量有限，一般最多五个就已经很拥挤了，可是我们发现开源的ViewpagerIn
Android自定义ViewPager指示器
09-01
在Android应用开发中，ViewPager是一种常见的滑动视图组件，用于展示多个页面，常用于实现类似轮播图或标签页的效果。然而，原生的ViewPager并不自带指示器，而指示器对于用户来说是识别当前页面状态的重要提示。...
Android实现3种侧滑效果（仿qq侧滑、抽屉侧滑、普通侧滑）
08-30
普通侧滑通常指的是在一个水平滚动视图（如`HorizontalScrollView`或`ViewPager`）中实现的左右滑动切换页面的效果。在示例中，使用`HorizontalScrollView`作为基础，通过监听滑动手势来控制内容的滑动。自定义布局...
android配合viewpager实现可滑动的标签栏示例分享
09-04
总之，通过结合使用`ViewPager`和自定义的`HorizontalScrollView`，我们可以实现一个灵活且可滑动的标签栏，它可以适应不同的设备屏幕和用户需求。这种设计方法不仅提供了良好的用户体验，还方便了代码的维护和扩展...
导航栏联动效果（ HorizontalScrollView+ViewPager）
01-05
以HorizontalScrollView与Viewpager实现分页滑动，类似淘宝分页滑动效果，其中头部局可以自定义
HorizontalGridPage:横向滑动网格页面（内置分页指示器）
05-17
一、介绍 一款采用RecyclerView的横向翻页网格布局控件，支持自定义行和列。自带翻页指示器。重要的是数据横向排列。 二、数据排列方式 三、文件说明 HorizontalGridPage---横向网格页面 PageGridView---------网格视图 PageIndicatorView----翻页指示器 PageGridAdapter------页面适配器 PageBuilder----------参数构建器 PageCallBack---------回调处理 四、选项配置 自定义网格（行数、列数） 自定义页面边距 是否显示指示器 自定义指示器大小 自定义指示器间隔 自定义指示器图片 自定义指示器位置 自定义滑动翻页百分比 五、用法 引入 Gradle方式： implementation 'com.bigkoo:horizontalgridpage:1.0' 或者 Maven方
Android，自定义HorizontalScrollView，更简单地实现分页效果
12-11
Android，自定义ScrollView，实现分页效果。利用此资源，可以灵活改变页宽、触发翻页的条件等。 本例中采用ScrollView自己的smoothScrollTo方法实现平滑过度效果。
Android HorizontalScrollView左右滑动效果
08-31
主要为大家详细介绍了Android HorizontalScrollView左右滑动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android，自定义HorizontalScrollView，实现分页效果
12-08
Android，自定义ScrollView，实现分页效果。利用此资源，可以灵活改变页宽、触发翻页的条件等。 本例中采用scrollTo方法+Scroller类配合实现平滑过度效果。
scrollview嵌套viewpager或recyclerview冲突解决
qq_36755922的博客
11-19 624
ScrollView里面嵌套ViewPager ViewPager里面嵌套ViewPager View的 事件分发机制 这篇博客不打算详细讲解View的事件分发机制，因为网上已经出现了一系列的好 文章，我自己的水平也有限，目前肯定写得不咋的。 先啰嗦一下，View 的事件分发机制主要涉及到一下三个 方法 dispatchTouchEvent ，这个方法主要是用来分发事件的 on...
HorizontalScrollView 使用 实现textview和viewpager的联动
Minle_的博客
06-28 841
设置初始化信息 // 设置主界面 // 隐藏下拉bar horizontalScrollView.setHorizontalScrollBarEnabled(false); // 设置导航分类 setNavigationTypes(); // 设置viewpager setViewPagerDetails(); 设置导航信息 // 设置导航
horizontalscrollview demo
04-10
horizontalscrollview 开发的demo代码
android HorizontalScrollView与viewpager联动，如何实现HorizontalScrollView自动滚动展示被遮盖的tab
03-31
实现HorizontalScrollView自动滚动展示被遮盖的tab可以通过以下步骤： 1. 获取HorizontalScrollView中的子view的宽度总和 2. 获取HorizontalScrollView的宽度 3. 计算出需要自动滚动的距离，即子view总宽度减去...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值