美文网首页Android开发Android开发
橫滑列表 中间项变大第二种效果

橫滑列表 中间项变大第二种效果

作者: crossroads | 来源:发表于2017-02-20 19:09 被阅读145次

前言

仍然是一个小demo,这个添加了如果中间项没有到中间位置时,自动滚动至中间位置,并且在滑动过程中,不改变中间项
先上效果图

源码如下:

public class MiddleHorizal extends HorizontalScrollView {

    private onMiddleItemChangedListener middleItemChangedListener;
    private Handler mHandler = new Handler();
    private int currentX = 0;//记录当前滚动的距离
    private int scrollDealy = 50;//滚动监听间隔
    int current = -1; //当前位于中间item的位置
    double halfScreenWidth; //屏幕的一半宽度

    LinearLayout content; //内容view


    public MiddleHorizal(Context context, AttributeSet attrs) {
        super(context, attrs);
        halfScreenWidth = 1.0 * getScreenWidth(context) / 2;
    }

    public MiddleHorizal(Context context) {
        super(context, null);
    }

    /**
     * 滚动监听runnable
     */
    private Runnable scrollRunnable = new Runnable() {

        @Override
        public void run() {
            if (getScrollX() == currentX) {
                //滚动停止  取消监听线程
                mHandler.removeCallbacks(this);
                setMiddleItem();
                return;
            }
            else {
                //手指离开屏幕    view还在滚动的时候  
                mHandler.postDelayed(this, scrollDealy);
            }
            currentX = getScrollX();
        }
    };

    /**
     * 判断中间项 并滚动至屏幕中央
     */
    private void setMiddleItem() {
        if (content != null) {
            int minWidth = -1;
            int lastCurrent = current;
            int minDivider = 0;
            
            //判断距离屏幕中间距离最短的item
            for (int i = 0; i < content.getChildCount(); i++) {
                int divider = (int) ((content.getChildAt(i).getX() + 1.0 * content.getChildAt(i).getWidth() / 2 - currentX) - halfScreenWidth);
                int absDivider = Math.abs(divider);
                if (minWidth < 0) {
                    minWidth = absDivider;
                }
                else if (minWidth > absDivider) {
                    minWidth = absDivider;
                    minDivider = divider;
                    current = i;
                }
            }
            //如果中间项变化,则恢复原状
            if (lastCurrent != current && lastCurrent >= 0) {
                TextView lastMiddleView = (TextView) content.getChildAt(lastCurrent);
                lastMiddleView.setTextSize(20);
                lastMiddleView.setTextColor(Color.RED);
            }
            
            //滚动至中间位置
            scrollBy(minDivider, 0);
            middleItemChangedListener.middleItemChanged(current);
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
                //手指在上面移动的时候   取消滚动监听线程
                mHandler.removeCallbacks(scrollRunnable);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                //手指移动的时候
                mHandler.post(scrollRunnable);
                break;
        }
        return super.onTouchEvent(ev);
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //初始化,使得中间项在屏幕中间位置
        if (getChildCount() > 0 && current < 0 && middleItemChangedListener != null) {
            content = (LinearLayout) getChildAt(0);
            setMiddleItem();
        }
    }

    public void setMiddleItemChangedListener(onMiddleItemChangedListener middleItemChangedListener) {
        this.middleItemChangedListener = middleItemChangedListener;
    }

    /**
     * 获取屏幕宽度
     */
    public static int getScreenWidth(Context context) {
        Display display = ((WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
        return display.getWidth();
    }

    /**
     * 回调,将中间项位置传递出去
     */
    interface onMiddleItemChangedListener {
        void middleItemChanged(int current);
    }
}  
 <!--中间位置做个小标记-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="1"
        />

    <com.qianqian.demo.viewdemo.MiddleHorizal

        android:id="@+id/horizontalScrollView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:scrollbars="none">

        <LinearLayout

            android:id="@+id/content"

            android:layout_width="fill_parent"

            android:layout_height="100dp"

            android:layout_centerVertical="true"

            android:orientation="horizontal"

            />

    </com.qianqian.demo.viewdemo.MiddleHorizal>

    <TextView
        android:id="@+id/currentItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/horizontalScrollView"
        android:layout_centerHorizontal="true"
        />
public class MainActivity extends Activity implements MiddleHorizal.onMiddleItemChangedListener {
    LinearLayout contentLinear;
    MiddleHorizal horizontalScrollView;
    private ArrayList<String> items = new ArrayList<>();
    private TextView textView;

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

        contentLinear = (LinearLayout) findViewById(R.id.content);
        textView = (TextView) findViewById(R.id.currentItem);
        horizontalScrollView = (MiddleHorizal) findViewById(R.id.horizontalScrollView);
        horizontalScrollView.setMiddleItemChangedListener(this);
        contentLinear.removeAllViews();
        for (int i = 0; i < 50; i++) {
            TextView child = new TextView(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(80, ViewGroup.LayoutParams.MATCH_PARENT);
            params.gravity = Gravity.CENTER;
            child.setTextSize(20);
            child.setTextColor(Color.RED);
            child.setGravity(Gravity.CENTER);
            child.setText("" + i);
            items.add(""+i);
            contentLinear.addView(child, params);
        }
    }


    @Override
    public void middleItemChanged(int current) {
        TextView currentTxt = (TextView) contentLinear.getChildAt(current);
        currentTxt.setTextSize(24);
        currentTxt.setTextColor(Color.GREEN);
        String s = items.get(current);
        textView.setText("位于中间位置的是" + s);
    }
}

补充

添加点击某一项,将该item移动到中间位置的事件,这样子做:

//在自定义view中添加方法
    /**
     * 点击item,将该item移动至中间位置
     *
     * @param v 点击的item
     */
    public void setMiddleItem(View v) {
        if (v.getTag() != null && (int) v.getTag() != current) {
            TextView lastMiddleView = (TextView) content.getChildAt(current);
            lastMiddleView.setTextSize(20);
            lastMiddleView.setTextColor(Color.RED);
            int divider = (int) ((v.getX() + 1.0 * v.getWidth() / 2 - getScrollX()) - halfScreenWidth);
            scrollBy(divider, 0);
            current = (int) v.getTag();
            middleItemChangedListener.middleItemChanged(current);
        }
    }
\\activity中添加子view的时候,设置tag并在click方法中调用即可
child.setTag(i);//将postion设为tag,设置位置
child.setOnClickListener(new View.OnClickListener() {
   @Override
 public void onClick(View v) {
        horizontalScrollView.setMiddleItem(v);
 }
 });

参考网址

android HorizontalScrollView实现滚动监听

相关文章

  • 橫滑列表 中间项变大第二种效果

    前言 仍然是一个小demo,这个添加了如果中间项没有到中间位置时,自动滚动至中间位置,并且在滑动过程中,不改变中间...

  • 横滑列表 中间项变大第一种效果

    前言 这里只是一个小demo先上效果图吧 源码如下:

  • LBYCollectionViewLayout-UICollec

    在开发中经常会有列表横排横滑,竖排竖滑的需求,例如直播app中礼物列表就是横排横滑的效果,但是UICollecti...

  • 磨砂玻璃效果,并且可拉伸的个人主页

    实现了类似于N多的社交软件的个人主页效果,并添加高斯模糊处理. 列表拉伸的时候,列表前的图片跟着响应变大.画面效果...

  • Android 自定义View 字母索引列表

    1.字母索引列表效果 2.效果分析 2.1 当用于手指触摸右侧字母列表时,手指滑动,页面中间显示显示字母大写,同时...

  • 左滑编辑/删除效果

    说明 此文梳理模仿QQ好友列表项左滑编辑/删除效果。 需求 初始隐藏编辑/删除按钮编辑和删除按钮宽度相同 左滑显示...

  • 余弦函数的曲线特性

    一、实现效果 通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下: 二、原理说明 1、上面...

  • ViewPager实现横滑居中缩放功能

    需求描述 1.单行横滑海报列表,当前海报居中放大展示。2.点击左边海报,左边海报居中变大,点击右边海报,右边海报居...

  • iOS UITableViewCell侧滑显示多按钮

    仿QQ聊天列表侧滑显示多按钮效果效果,只需要实现UITableViewDelegate中的三个代理方法就可以了,效...

  • HTML作业详解

    作业一: 展示效果如下: 这个列表的结构十分清晰,一个无序列表有两项,每项又包含一个有序列表,有序列表的每一项又包...

网友评论

    本文标题:橫滑列表 中间项变大第二种效果

    本文链接:https://www.haomeiwen.com/subject/ljvewttx.html