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

先上一张图看下效果：

主要实现功能有：

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

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