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()
        }
 
}

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