Android实现小米相机底部滑动指示器

近期工作内容需要涉及到相机开发,其中一个功能点就是实现一个相机预览页底部的滑动指示器,现在整理出来供大家讨论参考。

先上一张图看下效果:

主要实现功能有:

1.支持左右滑动,每次滑动一个tab

2.支持tab点击,直接跳到对应tab

3.选中的tab一直处于居中位置

4.支持部分UI自定义(大家可根据需要自己改动)

5.tab点击回调

6.内置Tab接口,放入的内容需要实现Tab接口

7.设置预选中tab

public class CameraIndicator extends LinearLayout {
    // 当前选中的位置索引
    private int currentIndex;
    //tabs集合
    private Tab[] tabs;

    // 利用Scroller类实现最终的滑动效果
    public Scroller mScroller;
    //滑动执行时间(ms)
    private int mDuration = 300;
    //选中text的颜色
    private int selectedTextColor = 0xffffffff;
    //未选中的text的颜色
    private int normalTextColor = 0xffffffff;
    //选中的text的背景
    private Drawable selectedTextBackgroundDrawable;
    private int selectedTextBackgroundColor;
    private int selectedTextBackgroundResources;
    //是否正在滑动
    private boolean isScrolling = false;

    private int onLayoutCount = 0;

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

    public CameraIndicator(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CameraIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mScroller = new Scroller(context);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //测量所有子元素
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        //处理wrap_content的情况
        int width = 0;
        int height = 0;
        if (getChildCount() == 0) {
            setMeasuredDimension(0, 0);
        } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                width +=  child.getMeasuredWidth();
                height = Math.max(height, child.getMeasuredHeight());
            }
            setMeasuredDimension(width, height);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                width +=  child.getMeasuredWidth();
            }
            setMeasuredDimension(width, heightSize);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                height = Math.max(height, child.getMeasuredHeight());
            }
            setMeasuredDimension(widthSize, height);
        } else {
            //如果自定义ViewGroup之初就已确认该ViewGroup宽高都是match_parent,那么直接设置即可
            setMeasuredDimension(widthSize, heightSize);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //给选中text的添加背景会多次进入onLayout,会导致位置有问题,暂未解决
        if (onLayoutCount > 0) {
            return;
        }
        onLayoutCount++;

        int counts = getChildCount();
        int childLeft = 0;
        int childRight = 0;
        int childTop = 0;
        int childBottom = 0;
        //居中显示
        int widthOffset = 0;

        //计算最左边的子view距离中心的距离
        for (int i = 0; i < currentIndex; i++) {
            View childView = getChildAt(i);
            widthOffset += childView.getMeasuredWidth() + getMargins(childView).get(0)+getMargins(childView).get(2);
        }

        //计算出每个子view的位置
        for (int i = 0; i < counts; i++) {
            View childView = getChildAt(i);
            childView.setOnClickListener(v -> moveTo(v));
            if (i != 0) {
                View preView = getChildAt(i - 1);
                childLeft = preView.getRight() +getMargins(preView).get(2)+ getMargins(childView).get(0);
            } else {
                childLeft = (getWidth() - getChildAt(currentIndex).getMeasuredWidth()) / 2 - widthOffset;
            }
            childRight = childLeft + childView.getMeasuredWidth();
            childTop = (getHeight() - childView.getMeasuredHeight()) / 2;
            childBottom = (getHeight() + childView.getMeasuredHeight()) / 2;
            childView.layout(childLeft, childTop, childRight, childBottom);
        }

        TextView indexText = (TextView) getChildAt(currentIndex);
        changeSelectedUIState(indexText);

    }

    private List<Integer> getMargins(View view) {
        LayoutParams params = (LayoutParams) view.getLayoutParams();
        List<Integer> listMargin = new ArrayList<Integer>();
        listMargin.add(params.leftMargin);
        listMargin.add(params.topMargin);
        listMargin.add(params.rightMargin);
        listMargin.add(params.bottomMargin);
        return listMargin;
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            // 滑动未结束,内部使用scrollTo方法完成实际滑动
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        } else {
            //滑动完成
            isScrolling = false;
            if (listener != null) {
                listener.onChange(currentIndex,tabs[currentIndex]);
            }
        }
        super.computeScroll();
    }

    /**
     * 改变选中TextView的颜色
     *
     * @param currentIndex 滑动之前选中的那个
     * @param nextIndex    滑动之后选中的那个
     */
    public final void scrollToNext(int currentIndex, int nextIndex) {
        TextView selectedText = (TextView) getChildAt(currentIndex);
        if (selectedText != null) {
            selectedText.setTextColor(normalTextColor);
            selectedText.setBackground(null);
        }
        selectedText = (TextView) getChildAt(nextIndex);
        if (selectedText != null) {
            changeSelectedUIState(selectedText);
        }
    }

    private void changeSelectedUIState(TextView view) {
        view.setTextColor(selectedTextColor);
        if (selectedTextBackgroundDrawable != null) {
            view.setBackground(selectedTextBackgroundDrawable);
        }

        if (selectedTextBackgroundColor != 0) {
            view.setBackgroundColor(selectedTextBackgroundColor);
        }
        if (selectedTextBackgroundResources != 0) {
            view.setBackgroundResource(selectedTextBackgroundResources);
        }
    }

    /**
     * 向右滑一个
     */
    public void moveToRight() {
        moveTo(getChildAt(currentIndex - 1));
    }

    /**
     * 向左滑一个
     */
    public void moveToLeft() {
        moveTo(getChildAt(currentIndex + 1));
    }

    /**
     * 滑到目标view
     *
     * @param view 目标view
     */
    private void moveTo(View view) {
        for (int i = 0; i < getChildCount(); i++) {
            if (view == getChildAt(i)) {
                if (i == currentIndex) {
                    //不移动
                    break;
                } else if (i < currentIndex) {
                    //向右移
                    if (isScrolling) {
                        return;
                    }
                    isScrolling = true;
                    int dx = getChildAt(currentIndex).getLeft() - view.getLeft() + (getChildAt(currentIndex).getMeasuredWidth() - view.getMeasuredWidth()) / 2;
                    //这里使用scroll会使滑动更平滑不卡顿,scroll会根据起点、终点及时间计算出每次滑动的距离,其内部有一个插值器
                    mScroller.startScroll(getScrollX(), 0, -dx, 0, mDuration);
                    scrollToNext(currentIndex, i);
                    setCurrentIndex(i);
                    invalidate();
                } else if (i > currentIndex) {
                    //向左移
                    if (isScrolling) {
                        return;
                    }
                    isScrolling = true;
                    int dx = view.getLeft() - getChildAt(currentIndex).getLeft() + (view.getMeasuredWidth() - getChildAt(currentIndex).getMeasuredWidth()) / 2;
                    mScroller.startScroll(getScrollX(), 0, dx, 0, mDuration);
                    scrollToNext(currentIndex, i);
                    setCurrentIndex(i);
                    invalidate();
                }
            }
        }
    }

    /**
     * 设置tabs
     *
     * @param tabs
     */
    public void setTabs(Tab... tabs) {
        this.tabs = tabs;
        //暂时不通过layout布局添加textview
        if (getChildCount()>0){
            removeAllViews();
        }
        for (Tab tab : tabs) {
            TextView textView = new TextView(getContext());
            textView.setText(tab.getText());
            textView.setTextSize(14);
            textView.setTextColor(selectedTextColor);
            textView.setPadding(dp2px(getContext(),5), dp2px(getContext(),2), dp2px(getContext(),5),dp2px(getContext(),2));
            LayoutParams layoutParams= new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
            layoutParams.rightMargin=dp2px(getContext(),2.5f);
            layoutParams.leftMargin=dp2px(getContext(),2.5f);
            textView.setLayoutParams(layoutParams);
            addView(textView);
        }
    }

    public int getCurrentIndex() {
        return currentIndex;
    }

    //设置默认选中第几个
    public void setCurrentIndex(int currentIndex) {
        this.currentIndex = currentIndex;
    }

    //设置滑动时间
    public void setDuration(int mDuration) {
        this.mDuration = mDuration;
    }

    public void setSelectedTextColor(int selectedTextColor) {
        this.selectedTextColor = selectedTextColor;
    }

    public void setNormalTextColor(int normalTextColor) {
        this.normalTextColor = normalTextColor;
    }

    public void setSelectedTextBackgroundDrawable(Drawable selectedTextBackgroundDrawable) {
        this.selectedTextBackgroundDrawable = selectedTextBackgroundDrawable;
    }

    public void setSelectedTextBackgroundColor(int selectedTextBackgroundColor) {
        this.selectedTextBackgroundColor = selectedTextBackgroundColor;
    }

    public void setSelectedTextBackgroundResources(int selectedTextBackgroundResources) {
        this.selectedTextBackgroundResources = selectedTextBackgroundResources;
    }

    public interface OnSelectedChangedListener {
        void onChange(int index, Tab tag);
    }

    private OnSelectedChangedListener listener;

    public void setOnSelectedChangedListener(OnSelectedChangedListener listener) {
        if (listener != null) {
            this.listener = listener;
        }
    }

    private int dp2px(Context context, float dpValue) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        return (int) (metrics.density * dpValue + 0.5F);
    }

    public interface Tab{
        String getText();
    }

    private float startX = 0f;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            startX = event.getX();
        }
        if (event.getAction() == MotionEvent.ACTION_UP) {
            float endX = event.getX();
            //向左滑条件
            if (endX - startX > 50 && currentIndex > 0) {
                moveToRight();
            }
            if (startX - endX > 50 && currentIndex < getChildCount() - 1) {
                moveToLeft();
            }
        }
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            startX = event.getX();
        }
        if (event.getAction() == MotionEvent.ACTION_UP) {
            float endX = event.getX();
            //向左滑条件
            if (Math.abs(startX-endX)>50){
                onTouchEvent(event);
            }
        }
        return super.onInterceptTouchEvent(event);
    }
}

在Activity或fragment中使用

private var tabs = listOf("慢动作", "短视频", "录像", "拍照", "108M", "人像", "夜景", "萌拍", "全景", "专业")
    lateinit var  imageAnalysis:ImageAnalysis

    override fun initView() {

        //实现了CameraIndicator.Tab的对象
        val map = tabs.map {
            CameraIndicator.Tab { it }
        }?.toTypedArray() ?: arrayOf()
        //将tab集合设置给cameraIndicator,(binding.cameraIndicator即xml布局里的控件)
        binding.cameraIndicator.setTabs(*map)
        //默认选中  拍照
        binding.cameraIndicator.currentIndex = 3

//点击某个tab的回调
binding.cameraIndicator.setSelectedTextBackgroundResources(R.drawable.selected_text_bg)

        binding.cameraIndicator.setOnSelectedChangedListener { index, tag ->
            Toast.makeText(this,tag.text,Toast.LENGTH_SHORT).show()
        }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果

    CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果 如何使用 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现下面GIF图中的效果,再展开的时候头像处于红白中间,根据收缩程度改变头像的位置!底下的RecyclerView也跟随这个移动,不会出现中间隔出一段距离!(仅提供源码复制粘贴,很简单的) 先看下效果图: 下面上代码 XML布局代码如下: <?xml vers

  • Android实现三段式滑动效果

    目录 高德的效果: 高德的效果: 实现的效果: 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是集成CoordinatorLayout.Behavior /**  * 高德首页滑动效果 */ public class GaoDeBottomSheetBehavior<V extends View> extends CoordinatorLayout.Behavior<V> { public static final int STATE_DRAGGING = 1; pub

  • Android SeekBar实现禁止滑动

    本文实例为大家分享了Android SeekBar实现禁止滑动的具体代码,供大家参考,具体内容如下 由于项目需要,在关闭开关的时候需要将顶部的调温栏禁用,变为灰色且不可点击滑动,而开的时候要启用,变为黄色且可点击滑动 为防止抓不住重点,仅展示相关代码 public class DeviceControlActivity extends Activity implements View.OnClickListener,SeekBar.OnSeekBarChangeListener{ private

  • Android实现上下菜单双向滑动

    本文实例为大家分享了Android实现上下菜单双向滑动的具体代码,供大家参考,具体内容如下 这是研究了网上大神双向左右滑动后实现的上下双向滑动特效,有兴趣的朋友可以看下面代码,注释很详细,原理就是根据手指滑动的方向,来将上下两个布局进行显示与隐藏.主要用了onTouch方法,获取滑动的距离进行偏移. import android.content.Context; import android.os.AsyncTask; import android.util.AttributeSet; impo

  • Android自定义SeekBar实现滑动验证且不可点击

    最近公司因为短信接口被盗刷的比较严重,需要做一个类似于淘宝的滑动验证,用于特定环境,以增加一层保障.拿到需求首先想到的是自定义ViewGroup来实现,里面放一个seekbar和TextView即可.但是有更简单的方法,直接在布局中放入seekbar和TextView,不就ok了?用最简单快捷的方法实现需求,才是硬道理. 值得一提的是,seekbar默认情况下是支持点击事件的,也就是说,用户可以直接点击进度条以实现滑动验证这是不允许的,因此,自定义seekbar,屏蔽点击事件.下面我们先从see

  • Android实现一个比相册更高大上的左右滑动特效(附源码)

    目录 实现思路 源码如下: 在Android里面,想要实现一个类似相册的左右滑动效果,我们除了可以用Gallery.HorizontalScrollView.ViewPager等控件,还可以用一个叫做 ViewFlipper 的类来代替实现,它继承于 ViewAnimator.如见其名,这个类是跟动画有关,会将添加到它里面的两个或者多个View做一个动画,然后每次只显示一个子View,通过在 View 之间切换时执行动画,最终达到一个类似相册能左右滑动的效果. 本次功能要实现的两个基本效果 最基

  • Android RecycleView滑动停止后自动吸附效果的实现代码(滑动定位)

    最近有个需求 要求列表 滑动后第一条 需要和顶部对齐 上网找了找  发现 官方支持 Recycle + LinearSnapHelper 可以实现 但我实际操作加上后 发现会卡顿 滑动卡顿 没有以前那种流畅感了 想了想  算了 懒得看源码  还是自己写一个得了 效果图 : 代码如下 注释很清楚了 package com.example.testapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle

  • Android自定义view实现滑动解锁效果

    本文实例为大家分享了Android自定义view实现滑动解锁的具体代码,供大家参考,具体内容如下 1. 需求如下: 近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停. 2. 需求效果图如下 3. 实现效果展示 4. 自定义view如下 /** * Desc 自定义滑动解锁View * Author ZY * Mail sunnyfor98@gmail.com * Date 2021/5/17 11:52 */ @SuppressLint("ClickableViewAccessibili

  • Android 滑动Scrollview标题栏渐变效果(仿京东toolbar)

    Scrollview标题栏滑动渐变 仿京东样式(上滑显示下滑渐变消失) /** * @ClassName MyScrollView * @Author Rex * @Date 2021/1/27 17:38 */ public class MyScrollView extends ScrollView { private TranslucentListener mTranslucentListener; public void setTranslucentListener(Translucent

  • Android实现View滑动效果的6种方法

    本文实例为大家分享了Android实现View滑动效果的具体代码,供大家参考,具体内容如下 一.View的滑动简介 View的滑动是Android实现自定义控件的基础,同时在开发中我们也难免会遇到View的滑动的处理.其实不管是那种滑动的方式基本思想都是类似的:当触摸事件传到View时,系统记下触摸点的坐标,手指移动时系统记下移动后的触摸的坐标并算出偏移量,并通过偏移量来修改View的坐标. 实现View滑动有很多种方法,这篇文章主要讲解六种滑动的方法,分别是:layout().offsetLe

  • Android实现手势滑动(左滑和右滑)

    最近想实现Android左滑弹出菜单框,右滑消失菜单这个个功能.了解了一下Android 的滑动事件,必须是在view组件或者Activity上实现,同时必须实现OnTouchListener, OnGestureListener这个两个接口. public class MyRelativeLayout extends RelativeLayout implements GestureDetector.OnGestureListener{ private float mPosX, mPosY,

  • Android RecyclerView实现滑动删除

    本文实例为大家分享了RecyclerView实现滑动删除的具体代码,供大家参考,具体内容如下 package com.example.demo; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.ItemTouchHelper; import androidx.recyclerview.widget.Lin

  • Android实现滑动效果

    本文实例为大家分享了Android实现滑动效果的具体代码,供大家参考,具体内容如下 坐标系与视图坐标系相辅相成 1.坐标系:描述了View在屏幕中的位置关系(以屏幕最左上角的顶点作为Android坐标系的原点) 2.视图坐标系:描述了子视图在父视图中的位置关系(以父视图最左上角为坐标系原点) 获取坐标值的方法 1.View提供的获取坐标方法 getTop():获取到的是View自身的顶边到其父布局顶边的距离 getLeft():获取到的是View自身的左边到其父布局顶边的距离 getRight(

随机推荐