Android淘宝电影日期滚动栏的实现

最近又有大片上映了，前几天刚看完《末日崩塌》，《侏罗纪世界》又来了，对于大片迷来说是一种福利，所以这几天手机上装了各种电影票团购软件，没办法，同样的电影同样的电影院同样的座位，但是不同的团购软件，价格就不一样。ok，言归正传

在淘宝电影上面有这样一个功能，日期可以滑动，并且选中的是在正中间，效果如下：

看完了，那么问题来了。这个功能怎么实现呢？

我们先来分析一下：

把功能拆分一下来看，如果不能滚动，是不是很好实现？其实就是一个 tab 栏，我在前面的 blog 中Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航） 中就实现了此功能，然后在此功能的基础上加上滚动功能即可，具体的实现原理是通过水平滚动控件 HorizontalScrollView把 tab 栏包含起来，然后通过 tab 的选中item 来控制HorizontalScrollView的滚动。

代码实现：

1、实现 自定义 tab，这里就不细讲了，跟前面那篇 blog 几乎一样，直接贴代码了，不清楚的请看前面的 blog

package toolbar.scrollstripview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by moon.zhong on 2015/5/25.
 */
public class SlidingTabView extends LinearLayout {

    private static final float DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0.5f;
    private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
    private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3;
    private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;

    private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;
    private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;
    private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;

    private final float mBottomBorderThickness;
    private final Paint mBottomBorderPaint;

    private final int mSelectedIndicatorThickness;
    private final Paint mSelectedIndicatorPaint;

    private final Paint mDividerPaint;
    private final float mDividerHeight;

    private int mSelectedPosition;
    private float mSelectionOffset;

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

    public SlidingTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setWillNotDraw(false);
        final float density = getResources().getDisplayMetrics().density;

        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true);
        final int themeForegroundColor =  outValue.data;

        mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
        mBottomBorderPaint = new Paint();
        mBottomBorderPaint.setColor(getResources().getColor(R.color.color_line));

        mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
        mSelectedIndicatorPaint = new Paint();
        mSelectedIndicatorPaint.setColor(0xffff1322);

        mDividerHeight = DEFAULT_DIVIDER_HEIGHT;
        mDividerPaint = new Paint();
        mDividerPaint.setStrokeWidth((int) (DEFAULT_DIVIDER_THICKNESS_DIPS * density));
        mDividerPaint.setColor(getResources().getColor(R.color.color_line));
    }

    void viewPagerChange(int position, float offset){
        this.mSelectedPosition = position ;
        this.mSelectionOffset = offset ;
        if (offset == 0){
            for (int i = 0; i < getChildCount(); i++) {
                TextView child = (TextView) getChildAt(i);
                child.setTextColor(0xff666666);
            }
            TextView selectedTitle = (TextView) getChildAt(mSelectedPosition);
            selectedTitle.setTextColor(0xffff1322);
        }
        invalidate();
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        final int height = getHeight();
        final int childCount = getChildCount();
        final int dividerHeightPx = (int) (Math.min(Math.max(0f, mDividerHeight), 1f) * height);

        if (childCount > 0) {
            TextView selectedTitle = (TextView) getChildAt(mSelectedPosition);
            int left = selectedTitle.getLeft();
            int right = selectedTitle.getRight();
            selectedTitle.setTextColor(blendColors(0xff666666,0xffff1322,mSelectionOffset));

            if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {

                TextView nextTitle = (TextView) getChildAt(mSelectedPosition + 1);
                left = (int) (mSelectionOffset * nextTitle.getLeft() +
                        (1.0f - mSelectionOffset) * left);
                right = (int) (mSelectionOffset * nextTitle.getRight() +
                        (1.0f - mSelectionOffset) * right);
                nextTitle.setTextColor(blendColors(0xffff1322,0xff666666,mSelectionOffset));
            }

            canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
                    height, mSelectedIndicatorPaint);
        }

        canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);

        int separatorTop = (height - dividerHeightPx) / 2;
        for (int i = 0; i < childCount - 1; i++) {
            View child = getChildAt(i);

            canvas.drawLine(child.getRight(), separatorTop, child.getRight(),
                    separatorTop + dividerHeightPx, mDividerPaint);
        }
    }
    private static int blendColors(int color1, int color2, float ratio) {
        final float inverseRation = 1f - ratio;
        float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
        float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
        float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
        return Color.rgb((int) r, (int) g, (int) b);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

}

2、自定义HorizontalScrollView

这个自定义类的功能，主要是填充 tab 的数据，通过选中的 item 来滚动HorizontalScrollView

填充数据：

    private void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final OnClickListener tabClickListener = new TabClickListener();
/**/
        /*通过 viewPager 的 item 来确定tab 的个数*/

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            TextView tabTitleView = null;

            if (mTabViewLayoutId != 0) {
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
            }

            if (tabView == null) {
                /*创建textView*/
                tabView = createDefaultTabView(getContext());
            }

            if (tabTitleView == null && TextView.class.isInstance(tabView)) {
                tabTitleView = (TextView) tabView;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabView.setOnClickListener(tabClickListener);
            tabView.setBackgroundResource(R.drawable.item_selector_bg);
            /*把 textView 放入到自定义的 tab 栏中*/
            mTabStrip.addView(tabView);
        }
    }

滚动 ScrollView

    /**
     * 这个方法是关键
     * 滚动 scrollview
     * @param tabIndex
     * @param positionOffset
     */
    private void scrollToTab(int tabIndex, int positionOffset) {
        final int tabStripChildCount = mTabStrip.getChildCount();
        if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
            return;
        }

        /*获取当前选中的 item*/
        View selectedChild = mTabStrip.getChildAt(tabIndex);
        if (selectedChild != null) {
            /*获取当前 item 的偏移量*/
            int targetScrollX = selectedChild.getLeft() + positionOffset;
            /*item 的宽度*/
            int width = selectedChild.getWidth();
            /*item 距离正中间的偏移量*/
            mTitleOffset = (int) ((mWidth-width)/2.0f);

            if (tabIndex > 0 || positionOffset > 0) {
                /*计算出正在的偏移量*/
                targetScrollX -= mTitleOffset;
            }
            Log.v("zgy","==================mWidth======="+mWidth) ;
            /*这个时候偏移的量就是屏幕的正中间*/
            scrollTo(targetScrollX, 0);
        }
    }

具体的调用当然就是 在 ViewPager 的OnPageChangeListener中。

完整类的代码如下：

package toolbar.scrollstripview;

import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.TextView;

/**
 * Created by moon.zhong.
 */
public class SlidingTabLayout extends HorizontalScrollView {
    private static final int TITLE_OFFSET_DIPS = 24;
    private static final int TAB_VIEW_PADDING_DIPS_TB = 15;
    private static final int TAB_VIEW_PADDING_DIPS = 16;
    private static final int TAB_VIEW_TEXT_SIZE_SP = 14;
    private int mTitleOffset;

    private int mTabViewLayoutId;
    private int mTabViewTextViewId;

    private ViewPager mViewPager;
    private final SlidingTabView mTabStrip;

    private int mWidth ;
    public SlidingTabLayout(Context context) {
        this(context, null);
    }

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

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

        setHorizontalScrollBarEnabled(false);

        setFillViewport(true);

        mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

        mTabStrip = new SlidingTabView(context);
        addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        DisplayMetrics displayMetrics = new DisplayMetrics() ;
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        mWidth = (int) (displayMetrics.widthPixels) ;
    }
    public void setViewPager(ViewPager viewPager) {
        mTabStrip.removeAllViews();

        mViewPager = viewPager;
        if (viewPager != null) {
            viewPager.addOnPageChangeListener(new InternalViewPagerListener());
            populateTabStrip();
        }
    }
    private void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final OnClickListener tabClickListener = new TabClickListener();
/**/
        /*通过 viewPager 的 item 来确定tab 的个数*/

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            TextView tabTitleView = null;

            if (mTabViewLayoutId != 0) {
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
            }

            if (tabView == null) {
                /*创建textView*/
                tabView = createDefaultTabView(getContext());
            }

            if (tabTitleView == null && TextView.class.isInstance(tabView)) {
                tabTitleView = (TextView) tabView;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabView.setOnClickListener(tabClickListener);
            tabView.setBackgroundResource(R.drawable.item_selector_bg);
            /*把 textView 放入到自定义的 tab 栏中*/
            mTabStrip.addView(tabView);
        }
    }
    /*这里就是创建 textView，没什么可讲的*/
    protected TextView createDefaultTabView(Context context) {
        TextView textView = new TextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);;

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {

            TypedValue outValue = new TypedValue();
            getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                    outValue, true);
            textView.setBackgroundResource(outValue.resourceId);
        }

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            textView.setAllCaps(true);
        }

        int paddingTB = (int) (TAB_VIEW_PADDING_DIPS_TB * getResources().getDisplayMetrics().density);
        textView.setPadding(0, paddingTB, 0, paddingTB);
        textView.setTextColor(0xff666666);
        int width = (int) (100 * getResources().getDisplayMetrics().density);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(width, ViewGroup.LayoutParams.WRAP_CONTENT) ;
        textView.setLayoutParams(params);
        return textView;
    }

    /**
     * 这个方法是关键
     * 滚动 scrollview
     * @param tabIndex
     * @param positionOffset
     */
    private void scrollToTab(int tabIndex, int positionOffset) {
        final int tabStripChildCount = mTabStrip.getChildCount();
        if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
            return;
        }

        /*获取当前选中的 item*/
        View selectedChild = mTabStrip.getChildAt(tabIndex);
        if (selectedChild != null) {
            /*获取当前 item 的偏移量*/
            int targetScrollX = selectedChild.getLeft() + positionOffset;
            /*item 的宽度*/
            int width = selectedChild.getWidth();
            /*item 距离正中间的偏移量*/
            mTitleOffset = (int) ((mWidth-width)/2.0f);

            if (tabIndex > 0 || positionOffset > 0) {
                /*计算出正在的偏移量*/
                targetScrollX -= mTitleOffset;
            }
            Log.v("zgy","==================mWidth======="+mWidth) ;
            /*这个时候偏移的量就是屏幕的正中间*/
            scrollTo(targetScrollX, 0);
        }
    }

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
        private int mScrollState;

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int tabStripChildCount = mTabStrip.getChildCount();
            if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                return;
            }

            mTabStrip.viewPagerChange(position, positionOffset);

            View selectedTitle = mTabStrip.getChildAt(position);
            int extraOffset = (selectedTitle != null)
                    ? (int) (positionOffset * selectedTitle.getWidth())
                    : 0;
            scrollToTab(position, extraOffset);

        }

        @Override
        public void onPageScrollStateChanged(int state) {
            mScrollState = state;

        }

        @Override
        public void onPageSelected(int position) {
            if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
                mTabStrip.viewPagerChange(position, 0f);
                scrollToTab(position, 0);
            }

        }

    }
    private class TabClickListener implements OnClickListener {
        @Override
        public void onClick(View v) {
            for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                if (v == mTabStrip.getChildAt(i)) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    }
}

代码引用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <toolbar.scrollstripview.SlidingTabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/id_sliding_view"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/id_sliding_view"/>
</RelativeLayout>

运行效果：

总结：

1、对前面Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航） blog 的运用；

2、scrollTo(targetScrollX, 0)；方法的灵活运用，targetScrollX如果小于0，获取targetScrollX大于 view 的宽度的时候这个方法都不会起作用，看源码可知：

    public void scrollTo(int x, int y) {
        // we rely on the fact the View.scrollBy calls scrollTo.
        if (getChildCount() > 0) {
            View child = getChildAt(0);
            x = clamp(x, getWidth() - mPaddingRight - mPaddingLeft, child.getWidth());
            y = clamp(y, getHeight() - mPaddingBottom - mPaddingTop, child.getHeight());
            if (x != mScrollX || y != mScrollY) {
                super.scrollTo(x, y);
            }
        }
    }

对 x、y 做了相应的截取操作

源码下载

时间： 2024-04-24 03:10:10

Android淘宝电影日期滚动栏的实现的相关文章

Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在ViewPager中添加多张网络请求图片的情况下,不能进行复用,导致每次都要重新去求情已经请求过的数据致使流量数据过大 自定义的数据结构解决了这个问题,固定传递的图片数据之后进行统一请求,完成后进行页面切换数据复用 代码中涉及网络请求是用的Volley网络请求框架 PicCarousel是网络数据请求的U

淘宝电影“追杀”猫眼电影，同门相争不可避免

在娱乐影评圈中,<小时代4>与<栀子花开>之间的自捧互黑拼杀已经接近尾声,而在互联网O2O圈内,二者的较量才刚刚开始.不过,互联网人关注的不是这两部影片的内容对比,而是影片票房背后的淘宝电影与猫眼电影的PK,这是这对同门之间的首回合直面冲突. 不差钱的淘宝电影来势汹汹,猫眼电影掌握先发优势 相比猫眼电影2012年就从美团中独立运营,淘宝电影的正式团队来的有些晚,直到去年10月才组建了一支电影市场团队.不过,淘宝电影来势汹汹,马云钦点曾成功打造"支付宝钱包"的樊路

淘宝电影联合华谊的数据报告，还有哪些重要信息？

这两日,淘宝电影联合华谊兄弟研究院发布的<2015中国影市报告>吸引了不少电影爱好者的关注,这份图析数据报告直观的告诉了我们很多市场情况,但对于行业人士而言,读懂其中潜在的数据信息或许更有意义. 电影即时消费性更强,预售适合用来做补充 在淘宝电影发布的数据报告中,有很多直观的数据结论,但还有一些根据这些结论数据深度分析的市场推论没有被挖掘出来,因为有些推论并不适合呈现给大众,但对行业人士而言这些推论当中或许藏着一些很重要的市场信息. 例如,报告中简单直接的给出了"74%的用户喜欢当天

【原生javascript】margin-top实现淘宝首页图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

仿淘宝左侧菜单导航栏纯Html + css 写的

这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代码,图片没法传,只能直接放代码下边,辛苦点一张一张扣去吧?? HTML部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd

UpMarqueeTextView-模仿淘宝客户端向上滚动的广告条

UpMarqueeTextView一个简单的向上滚动的类似跑马灯效果,项目中用到的时候是接受到推送过来的消息向上滚动一次,没有做动态的gif效果,所以都是一些纯文字的简单记录. UpMarqueeTextView通过实现TextView使用Animator动画来实现,所以需要满足3.0以下的版本需要使用nineold-androids来实现效果,其实原理什么很简单看看代码就能了解. public class UpMarqueeTextView extends TextView implement

使用递归制作仿京东淘宝的商品分类导航栏

前些天,培训ASP.NET的老师布置了作业,制作商城的一些重要功能, 昨天做了一下其中比较难的商品分类导航类,使用了递归的方法. ps:使用的是WebForm,希望看到MVC的同学请忽略. 最终效果图: 下面记录一下: 首先是数据库部分,使用的是SQL,在一张叫做Category的表中,设置了以下字段: [Id] 分类的Id,int,自增长[Name] 分类的名称,nvarchar(50)[ParentId] 父类的Id,int[Link] 链接地址,varchar(max),用于打开链接,也可

“折叠”的淘宝二楼，何以《一千零一夜》叫板院线电影！

深夜,掏出手机玩淘宝下拉首页"上楼"去,别问为什么?我已经改追广告剧了,抢鲜看刚出炉的<一千零一夜>小片,已成为很多年轻人每周三.四最大的期待! 你永远想不到,那个文艺范大叔和他那顶帐篷在何时.何地以什么样方式出现,透着天方夜谭的魔幻,还带着一丝丝戒备与好奇,一旦味蕾顿开的精美食物摆在你眼前,烦心事.生疏感全抛到了九霄云外,要做的就是大饱口福,世间或许只有美食才有这等魅力! 故事听完了,还意犹未尽,OK!点击"我要吃",跳转到片中推荐的美食,买买买的效率

Android开发案例 - 淘宝商品详情【转】

http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPager, git: castorflex/VerticalViewPager 手势拦截 & 处理 实现思路 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1] 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的