仿淘宝首页分类，带seekbar进度条手势样式

最新推荐文章于 2023-06-24 08:45:00 发布
置顶 最新推荐文章于 2023-06-24 08:45:00 发布
阅读量645 收藏 5
点赞数 2
分类专栏： 仿淘宝首页分类滑动 带seekbar手势滑动效果 文章标签： android android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rhf_123/article/details/107334927
版权

近期项目中有类似淘宝首页分类的样式，需要带进度条样式：

1.页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical">

    <com.learn.taobaocateogory.MyHorizontalScrollView
        android:id="@+id/horizontal_scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.learn.taobaocateogory.MyGridView
                android:id="@+id/top_category_gridview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginLeft="2dp"
                android:layout_marginRight="2dp"
                android:background="#ffffff"
                android:columnWidth="55dp"
                android:gravity="center"
                android:numColumns="4"
                android:stretchMode="columnWidth" />
        </LinearLayout>
    </com.learn.taobaocateogory.MyHorizontalScrollView>

    <SeekBar
        android:id="@+id/mSeekBar"
        android:layout_width="45dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="14dp"
        android:background="@drawable/home_shape_dddddd_sort_indicator_gray_bg"
        android:focusable="true"
        android:maxHeight="4.0dip"
        android:minHeight="4.0dip"
        android:progress="0"
        android:progressDrawable="@drawable/home_shape_fast_scroll_bar_track"
        android:stateListAnimator="@null"
        android:thumb="@drawable/home_shape_fast_scroll_bar_thumb"
        android:visibility="visible"
        android:thumbOffset="0dp"
        android:paddingStart="0dp"
        android:paddingEnd="0dp"
        tools:ignore="UnusedAttribute" />

</LinearLayout>

2.用到的MyHorizontalScrollView

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;

/**
 * ClassName MyHorizontalScrollView
 * Create by rhf
 * Create on 2020/7/14 10:31
 * Description 自定义水平滚动的ScrollView
 */
public class MyHorizontalScrollView extends HorizontalScrollView {
    private float startX;
    private int currentScroll;
    private boolean firstOldL;
    private ScrollViewListener mListener;
    private int oldL;

    public MyHorizontalScrollView(Context context,
                                  AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

    public MyHorizontalScrollView(Context context) {
        super(context);
    }


    public interface ScrollViewListener {

        void onScrollChanged(int l, int t, int oldl, int oldt);

        void onScrollStopped(int scrollDistance);

    }

    private Handler mHandler;


    /**
     * 滚动监听间隔
     */
    private int scrollDealy = 1;

    public void setListener(ScrollViewListener listener) {
        mListener = listener;
    }

    public void setHandler(Handler handler) {
        this.mHandler = handler;
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        Log.i("dan.y", "isfirstoldl:" + firstOldL);
        if (!firstOldL) {
            Log.i("dan.y", "isfirstoldl:" + firstOldL);
            oldL = oldl;
            firstOldL = true;
        }
        if (mListener != null) {
            mListener.onScrollChanged(l, t, oldl, oldt);

        }
        super.onScrollChanged(l, t, oldl, oldt);
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = ev.getX();
                firstOldL = false;
                Log.i("dan.y", "startX:" + startX);
                break;
            case MotionEvent.ACTION_UP:
                float endX = ev.getX();
                currentScroll = this.getScrollX();
                if (mHandler != null) {
                    mHandler.postDelayed(scrollTask, scrollDealy);
                }
                break;

            default:
                break;
        }
        return super.onTouchEvent(ev);
    }

    Runnable scrollTask = new Runnable() {

        @Override
        public void run() {
            int newScroll = MyHorizontalScrollView.this.getScrollX();
            if (currentScroll == newScroll) {
                Log.i("dan.y", "oldl:" + oldL);
                firstOldL = false;
                mListener.onScrollStopped(currentScroll - oldL);
                mHandler.removeCallbacks(scrollTask);
            } else {
                currentScroll = MyHorizontalScrollView.this.getScrollX();
                postDelayed(scrollTask, scrollDealy);
            }
        }
    };

}

3.用的MyGridView

import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;

/**
 * ClassName MyGridView
 * Create by rhf
 * Create on 2020/7/14 10:32
 * Description 自定义GridView，兼容ScrollView
 */
public class MyGridView extends GridView {

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

    public MyGridView(Context context) {
        super(context);
    }

    public MyGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

4.用到的seekbar背景 home_shape_dddddd_sort_indicator_gray_bg.xml

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

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

5.用到的home_shape_fast_scroll_bar_track.xml

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

    <size
        android:width="45dp"
        android:height="4dp" />
</shape>

6.用到的home_shape_fast_scroll_bar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2dp" />
    <solid android:color="#FF6059" />
    <size
        android:width="30dp"
        android:height="4dp" />

</shape>

7.在Activity中的使用

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.SeekBar;

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

public class MainActivity extends AppCompatActivity {

    private MyHorizontalScrollView horizontalScrollview;
    private MyGridView topaCtegoryGridview;
    private SeekBar mSeekBar;
    private List<String> mTopSortData;
    private int defaultColumns = 4;
    private Handler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
        registerListener();
    }

    /**
     * 初始化View
     */
    private void initView() {
        horizontalScrollview = findViewById(R.id.horizontal_scrollview);
        horizontalScrollview.setHorizontalScrollBarEnabled(false);// 隐藏滚动条
        horizontalScrollview.setFocusable(false);

        topaCtegoryGridview = findViewById(R.id.top_category_gridview);
        mSeekBar = findViewById(R.id.mSeekBar);
    }


    /**
     * 水平滚动scrollview监听设置
     */
    private void registerListener() {
        handler = new Handler();
        horizontalScrollview.setHandler(handler);
        horizontalScrollview.setListener(new MyHorizontalScrollView.ScrollViewListener() {

            @Override
            public void onScrollChanged(int l, int t, int oldl, int oldt) {

                int mColumns = calculateNumClumns();
                if (mColumns > defaultColumns) {
                    mSeekBar.setProgress(oldl);//滑动的距离
                }
            }

            @Override
            public void onScrollStopped(int scrollDistance) {
            }
        });
    }

    /**
     * 初始化数据
     */
    private void initData() {

        mTopSortData = new ArrayList<>();
        mTopSortData.add("天猫新品");
        mTopSortData.add("今日爆款");
        mTopSortData.add("天猫国际");
        mTopSortData.add("饿了么");
        mTopSortData.add("天猫超市");
        mTopSortData.add("淘宝吃货");
        mTopSortData.add("闲鱼");
        mTopSortData.add("会员中心");
        mTopSortData.add("淘票票");
        mTopSortData.add("土货鲜食");
        mTopSortData.add("充值中心");
        mTopSortData.add("机票酒店");
        mTopSortData.add("领取淘币");
        if (mTopSortData.size() > 8) {
            mSeekBar.setVisibility(View.VISIBLE);
        } else {
            mSeekBar.setVisibility(View.INVISIBLE);
        }
        HomeTopSortAdapter topSortAdapter = new HomeTopSortAdapter(this, mTopSortData);
        topaCtegoryGridview.setAdapter(topSortAdapter);

        setValue();
    }

    /**
     * 设置gridview
     */
    private void setValue() {

        int numColumns = calculateNumClumns();
        int itemWidth = (AppUiUtils.getScreenWidth(this)) / defaultColumns;
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(numColumns * itemWidth,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        topaCtegoryGridview.setLayoutParams(params);

        topaCtegoryGridview.setColumnWidth(itemWidth);//设置条目宽度
        topaCtegoryGridview.setStretchMode(GridView.NO_STRETCH);
        topaCtegoryGridview.setNumColumns(numColumns);
        topaCtegoryGridview.setSelector(new ColorDrawable(Color.TRANSPARENT));
        int canMoveDistance = (numColumns - defaultColumns) * itemWidth;
        mSeekBar.setMax(canMoveDistance);

    }

    /**
     * 计算一屏幕显示多少列
     *
     * @return 一屏幕显示的列数
     */
    private int calculateNumClumns() {

        int totalCount = mTopSortData.size();
        int numberColumns;
        if (totalCount >= 8) {
            //当count大于8时  如下排列
            //| 1 | 3 | 5 | 7 |
            //| 2 | 4 | 6 | 8 |
            numberColumns = (totalCount % 2 == 0) ? totalCount / 2 : totalCount / 2 + 1;
        } else {
            //当count小于于8时  如下排列
            //| 1 | 2 | 3 | 4 |
            //| 5 | 6 | 7 | 8 |
            int defaultRows = 2;
            numberColumns = (totalCount % defaultRows == 0) ? totalCount / defaultRows : totalCount / defaultRows + 1;
            if (numberColumns < defaultColumns) {
                numberColumns = defaultColumns;
            }
        }
        return numberColumns;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (handler != null) {
            handler.removeCallbacksAndMessages(null);
        }
    }
}

8.用到的HomeTopSortAdapter

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * ClassName HomeTopSortAdapter
 * Create by rhf
 * Create on 2020/7/14 10:49
 * Description 分类数据适配器
 */
public class HomeTopSortAdapter extends BaseAdapter {

    private Context mContext;
    private List<String> mData;

    public HomeTopSortAdapter(Context mContext, List<String> mData) {
        this.mContext = mContext;
        this.mData = mData;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {

        MyViewHolder holder;
        if (convertView == null) {
            holder = new MyViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.home_item_top_category, null);
            holder.tvCategoryName = convertView.findViewById(R.id.tv_category_name);
            holder.ivSortmage = convertView.findViewById(R.id.iv_sort_image);
            convertView.setTag(holder);
        } else {
            holder = (MyViewHolder) convertView.getTag();
        }

        holder.tvCategoryName.setText(mData.get(position));
        return convertView;
    }

    private class MyViewHolder {
        TextView tvCategoryName;
        ImageView ivSortmage;
    }

}

9.用到的条目布局home_item_top_category.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright (C), 2016-2019, Shall Buy Life info. Co., Ltd.
  -->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:id="@+id/view_top_line"
        android:layout_width="5dp"
        android:layout_height="22dp"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/iv_sort_image"
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:layout_below="@+id/view_top_line"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@drawable/common_shape_test_circle" />

    <TextView
        android:id="@+id/tv_category_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_sort_image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="6dp"
        tools:text="充值中心"
        android:textColor="#333333"
        android:textSize="14sp" />

</RelativeLayout>

10.用到的默认图片common_shape_test_circle.xml

<?xml version="1.0" encoding="utf-8"?>

<!--
  ~ Copyright (C), 2016-2019, Shall Buy Life info. Co., Ltd.
  -->

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#FFF2C3C6" />
    <size
        android:width="40dp"
        android:height="40dp" />

</shape>
枫_feng
关注
专栏目录
Android 11.0 自定义仿小米全面屏手势导航左右手势滑动返回UI效果
安卓兼职framework和app工程师的博客
07-23 2643
在定制化开发中，对SystemUI的UI效果修改定制也是常有的功能，由于发现小米全面屏手势左右滑动返回UI效果比较美观 所以有需求要求仿小米全面屏手势来做左右滑动返回UI的效果，来自定义UI做手势返回的布局样式,这样的弧线就涉及到用贝塞尔曲线来实现功能...
Android 动态改变SeekBar进度条颜色与滑块颜色的实例代码
01-21
遇到个动态改变SeekBar进度条颜色与滑块颜色的需求，有的是根据不同进度改变成不同颜色。 对于这个怎么做呢？大家都知道设置下progressDrawable与thumb即可，但是这样设置好就是确定的了，要动态更改需要在代码里...
Android 之 Gestures(手势)
最新发布
leyang0910的博客
06-24 758
当然，没有这样的手机也没关系，我们有模拟器嘛，自己开个4.0的系统试试 就知道了，另外，我们可以到\mmt\sdcard\gestures获取到保存手势的文件！好的，本节给大家带来点的是第三章的最后一节——Gestures(手势)， 用过魅族手机的朋友相信对手势肯定是不陌生的，在home键两侧像屏幕内滑动， 可以打开后台任务列表等等~在应用中通过手势来操作会大大提升用户体验， 比如Scroll手势在浏览器中个滚屏，Fling在浏览器中的换页等！
Recyclview实现仿京东淘宝金刚位带滚动进度条
yizhixiaohuli的博客
08-19 2806
首先先上效果图 整体是一个recycleview列表 下面滚动条是单独的view 监听recycleview列表的滑动，来控制view的滑动 先上布局 <android.support.v7.widget.RecyclerView android:id="@+id/rcy_icon" android:layout_width="match_parent"
安卓仿淘宝首页的分类标签实现(横向滑动)
qq_35777293的博客
07-02 2948
淘宝效果 我的效果 使用recycleview实现 很简答,几行代码(只粘贴 了主要代码) GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, LinearLayoutManager.HORIZONTAL, false);//2代表是两列,也可以改成你需要的列数 ,LinearLayoutManager.HORIZONTAL代表横向滑动 recycleView.setLayoutManager(gr
Android自定义控件-仿淘宝ios客户端天猫商品详情界面动效
热门推荐
我是汤姆猫,从事android开发
06-13 1万+
Android自定义控件-仿淘宝ios客户端天猫商品详情界面动效 一个自定义控件继承自ScrollView,下拉时header会放大松开后会恢复原状,上滑时header会被下面的内容吃掉盖住而且会稍稍往上滑，在header高度范围内滑动时导航栏背景和导航栏的按钮会反向改变透明度形成一种对比效果。
Android自定义竖直方向SeekBar多色进度条
09-01
在某些设计需求中，可能需要创建竖直方向的SeekBar，并且进度条颜色能随进度变化而变化。本篇文章将详细介绍如何在Android中自定义一个竖直方向的多色SeekBar。 首先，实现这个功能需要自定义一个View，继承自...
Android自定义垂直拖动seekbar进度条
08-28
Android自定义垂直拖动SeekBar进度条 Android自定义垂直拖动SeekBar进度条是Android开发中一个常见的需求，特别是在某些特殊的场景中，需要垂直方向的SeekBar来满足特定的设计需求。在Android系统中，SeekBar默认是...
SeekBar进度条
02-10
使用`setProgressDrawable(Drawable progressDrawable)`方法可以自定义进度条的显示样式，包括背景和已选择部分的样式。 3. 更改颜色 通过修改颜色资源或者在代码中设置颜色，可以更改SeekBar的轨道、滑块和指示器...
自定义view实现仿淘宝菜单栏底部进度条联动
HelloJavaString的博客
11-20 404
！！自定义view实现仿淘宝菜单栏底部进度条联动 先看效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20191120170542681.png?x-oss- 暂时上传不了视频 看图不合适立马关掉播客 换下一篇process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly...
高仿淘宝首页菜单滑动效果
06-26
高仿淘宝首页菜单滑动效果，不分页。 重要逻辑：通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度， 同理scrollView的偏移量为scrollView的内容宽度减去scrollView的宽度。 通过比例计算可得出pageControl的偏移量， 即offsetX:scrollView可偏移的总距离=x:pageControl可偏移的总距离 整理得x = offsetX*pageControl可偏移的总距离/scrollView可偏移的总距离
仿淘宝首页，多样式列表
12-05
仿淘宝，支付宝，京东等知名app首页模块，多样式列表，mvp模式应用，
仿淘宝首页分类列表效果实现代码
09-06
模板淘宝首页的分类列表效果，17173的游戏分类效果也不错。
SeekArc:圆形SeekBar进度条
05-29
SeekArc 经过改造的圆形进度条或SeekBar Thanks for and
仿拼多多，淘宝水,平滑动宫格，自定义滚动条
10-23
主要实现水平滑动recyclerView处理滚动条，以及可滑动区域，实现仿拼多多，淘宝水平滑动
仿拼多多、淘宝、水平滚动RecyclerView,自定义滚动条滚动距离
Johnson的博客
10-23 8738
前几天，产品出了个原型图，直接截图拼多多，可滑动宫格，实现随意水平滑动。于是研究下拼多多的样式，感觉是一个水平滑动的RecyclerView,但是底部的滚动条，瞬间挠头了~~~于是乎研究滚动条，尝试修改RecyclerView自带的滚动条，可把自己折腾坏了，游标的滑动时可以自定义了，但是底部scrollbarTrackHorizontal 的长短修改不了。另寻他法。。。 研究了下源码，有这...
Android中仿淘宝头条滚动效果，可定制布局
qq_32371277的博客
10-13 911
本控件将实现类似淘宝头条的向上滚动的效果，同时可以自定义Animation实现更多的动画效果，支持自定义布局，我例子中的是一个Button和一个TextView，见下图。
Android之仿淘宝商品详情浏览效果
叶已初秋的博客
11-10 1万+
Android仿淘宝京东天猫等软件商品详情和图文详情的浏览效果，商品详情拖动到底部继续上滑出来图文详情，图文详情拖动到顶部继续拖动返回查看商品详情、
仿淘宝首页功能菜单实现可动态配置的进度展示
cj641809386的专栏
11-15 996
最近新需求要我们将app首页的功能菜单，做成类似于淘宝首页功能菜单滑动进度展示的样子，同时要满足，首页功能菜单的栏位可以后台动态配置:每页展示的行数和列数，滑动进度类似于淘宝首页菜单的样子。通过观察可以发现， 淘宝菜单进度条红线的宽度比上灰线的宽度等于屏幕的宽度比上菜单的总宽度。 1.自定义底部进度条控件 继承View,实现其构造方法。 重写onDraw方法绘制两条横线，一条表示进度，一条表示要...
SeekBar 进度条用法详解与示例
在XML布局文件中， SeekBar 的关键属性包括：minHeight 或 maxHeight 用于控制进度条的粗细，layout_width 定义宽度，layout_height 定义高度，progressDrawable 设置进度条样式，Max 设置最大范围，progress 设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值