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

}

}

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

以上是 Android实现小米相机底部滑动指示器 的全部内容, 来源链接: utcz.com/p/243473.html

回到顶部