热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要为大家详细介绍了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  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  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 getMargins(View view) {
        LayoutParams params = (LayoutParams) view.getLayoutParams();
        List listMargin = new ArrayList();
        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  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 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()
        }
 
}

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


推荐阅读
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • Spring框架中的面向切面编程(AOP)技术详解
    面向切面编程(AOP)是Spring框架中的关键技术之一,它通过将横切关注点从业务逻辑中分离出来,实现了代码的模块化和重用。AOP的核心思想是将程序运行过程中需要多次处理的功能(如日志记录、事务管理等)封装成独立的模块,即切面,并在特定的连接点(如方法调用)动态地应用这些切面。这种方式不仅提高了代码的可维护性和可读性,还简化了业务逻辑的实现。Spring AOP利用代理机制,在不修改原有代码的基础上,实现了对目标对象的增强。 ... [详细]
  • JBPM 6.5 环境配置深入解析(下篇)
    本文深入探讨了JBPM 6.5 的环境配置细节,从零开始详细介绍了下载、解压后的文件结构,并结合实际操作步骤,为初学者提供了全面的配置指南。通过具体的示例和详细的解释,帮助读者快速掌握 JBPM 6.5 的安装与配置过程。 ... [详细]
  • 在搭建Hadoop集群以处理大规模数据存储和频繁读取需求的过程中,经常会遇到各种配置难题。本文总结了作者在实际部署中遇到的典型问题,并提供了详细的解决方案,帮助读者避免常见的配置陷阱。通过这些经验分享,希望读者能够更加顺利地完成Hadoop集群的搭建和配置。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • 在Maven项目中,高效地切换数据存储库是一项常见的需求。本文介绍了如何通过配置POM文件和使用 profiles 来实现不同环境下的数据存储库切换,确保开发、测试和生产环境的一致性和灵活性。此外,还探讨了最佳实践和常见问题的解决方案,帮助开发者提高工作效率和代码质量。 ... [详细]
  • Go 项目中数据库配置文件的优化与应用 ... [详细]
  • Hadoop 2.6 主要由 HDFS 和 YARN 两大部分组成,其中 YARN 包含了运行在 ResourceManager 的 JVM 中的组件以及在 NodeManager 中运行的部分。本文深入探讨了 Hadoop 2.6 日志文件的解析方法,并详细介绍了 MapReduce 日志管理的最佳实践,旨在帮助用户更好地理解和优化日志处理流程,提高系统运维效率。 ... [详细]
  • 手机号码归属地查询服务由 WebXml.com.cn 提供,通过其 WEB 服务接口(http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx)实现。该服务能够准确解析国内手机号码的归属地信息,适用于多种应用场景,如用户身份验证、市场分析等。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • Java Web开发中的JSP:三大指令、九大隐式对象与动作标签详解
    在Java Web开发中,JSP(Java Server Pages)是一种重要的技术,用于构建动态网页。本文详细介绍了JSP的三大指令、九大隐式对象以及动作标签。三大指令包括页面指令、包含指令和标签库指令,它们分别用于设置页面属性、引入其他文件和定义自定义标签。九大隐式对象则涵盖了请求、响应、会话、应用上下文等关键组件,为开发者提供了便捷的操作接口。动作标签则通过预定义的动作来简化页面逻辑,提高开发效率。这些内容对于理解和掌握JSP技术具有重要意义。 ... [详细]
  • 在尝试对从复杂 XSD 生成的类进行序列化时,遇到了 `NullReferenceException` 错误。尽管已经花费了数小时进行调试和搜索相关资料,但仍然无法找到问题的根源。希望社区能够提供一些指导和建议,帮助解决这一难题。 ... [详细]
  • 深入解析 Android 选择器与形状绘制技术
    本文深入探讨了 Android 中选择器(Selector)与形状绘制(Shape Drawing)技术的应用与实现。重点分析了 `Selector` 的 `item` 元素,其中包括 `android:drawable` 属性的使用方法及其在不同状态下的表现。此外,还详细介绍了如何通过 XML 定义复杂的形状和渐变效果,以提升 UI 设计的灵活性和美观性。 ... [详细]
  • 通过在项目中引用 NuGet 包 `ExcelDataReader`,可以实现高效地读取和导入 Excel 文件中的数据。具体方法是在项目中执行 `Install-Package ExcelDataReader` 命令,然后通过定义一个 `LeadingIn` 方法并传入上传文件的路径来完成数据导入。该方法不仅简化了代码逻辑,还显著提升了数据处理的效率和可靠性。 ... [详细]
  • 在 Vbox 和 Hbox 布局中,当用户点击容器添加一个矩形时,系统会自动为该矩形分配坐标并打印其位置信息。此外,在按键事件触发时,系统仅打印当前矩形的坐标值。这两种布局在特定的交互场景下,能够动态地管理和更新子组件的位置。 ... [详细]
author-avatar
山野木每子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有