Android View 基础：工控触控界面布局、横竖屏锁定、适配工业屏分辨率

Android View 基础工控触控界面布局、横竖屏锁定、适配工业屏分辨率工控屏不是手机屏幕——你的按钮要大到戴着手套也能点你的文字要远距离也能看清布局乱一帧就是现场事故。一、Android View体系简介1.1 View与ViewGroupAndroid界面由一棵View树构成View界面的最小单元如按钮Button、文本TextView、图片ImageViewViewGroup容器负责摆放子View的位置和大小如线性布局LinearLayout、相对布局RelativeLayout每一个Activity的界面本质就是一个ViewGroup作为根节点层层嵌套子View的树状结构。1.2 常用布局对比布局特点工控适用场景LinearLayout水平/垂直排列简单直接✅ 状态栏、仪表列表RelativeLayout相对定位灵活✅ 复杂监控面板已过时FrameLayout层叠摆放✅ 视频叠加OSDConstraintLayout约束定位性能好✅ 复杂界面首选GridLayout网格排列✅ 多路传感器矩阵工控建议ConstraintLayout 是当前Android官方推荐布局一次约束搞定所有位置关系性能优于RelativeLayout嵌套层级更少。工控界面通常不需要太复杂的嵌套LinearLayout也够用但一旦界面元素多起来ConstraintLayout是更优选择。二、工控界面布局选择实战2.1 简单场景——LinearLayout监控界面上下排列顶部状态栏 中间数据区 底部按钮栏LinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationvertical!-- 状态栏 --LinearLayoutandroid:orientationhorizontal...TextViewandroid:text设备状态运行中.../TextViewandroid:text温度36.5℃...//LinearLayout!-- 数据区 --FrameLayoutandroid:layout_weight1...!-- 仪表盘或波形图 --/FrameLayout!-- 按钮栏 --LinearLayoutandroid:orientationhorizontal...Buttonandroid:text启动.../Buttonandroid:text停止...//LinearLayout/LinearLayout2.2 复杂场景——ConstraintLayoutandroidx.constraintlayout.widget.ConstraintLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentTextViewandroid:idid/statusLabelapp:layout_constraintTop_toTopOfparentapp:layout_constraintLeft_toLeftOfparent/Buttonandroid:idid/startBtnapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintLeft_toLeftOfparentapp:layout_constraintRight_toLeftOfid/stopBtn/Buttonandroid:idid/stopBtnapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintLeft_toRightOfid/startBtnapp:layout_constraintRight_toRightOfparent//androidx.constraintlayout.widget.ConstraintLayout约束关系一目了然没有嵌套性能更好。三、触控事件处理3.1 基本触控回调工控界面的触控交互比手机更粗暴——操作员可能戴着防静电手套点击触控灵敏度要求更高// 点击事件button.setOnClickListener(v-{// 执行工控指令sendCommand(START_MOTOR);});// 长按事件工控中常用于确认危险操作button.setOnLongClickListener(v-{showConfirmDialog(确认关闭设备);returntrue;// 消费事件不再触发onClick});3.2 onTouchEvent——更精细的触控控制OverridepublicbooleanonTouchEvent(MotionEventevent){floatxevent.getX();floatyevent.getY();switch(event.getAction()){caseMotionEvent.ACTION_DOWN:// 手指按下开始触控反馈highlightButton(x,y);break;caseMotionEvent.ACTION_MOVE:// 手指滑动轨迹追踪break;caseMotionEvent.ACTION_UP:// 手指抬起触发动作executeAction(x,y);break;}returntrue;// 表示已处理}工控注意触控事件要设置防抖debounce连续快速点击不能重复触发指令。工业操作容不得双击误触发。四、工业屏分辨率与适配策略4.1 常见工业屏分辨率分辨率常见尺寸典型用途800×4807英寸小型HMI面板1024×60010英寸机床控制面板1280×80012英寸产线监控屏1920×108021英寸大屏中控3840×216055英寸会议室大屏4.2 dp与sp——密度无关单位dpDensity-independent Pixel1dp在160dpi屏幕上1px其他密度自动缩放。按钮宽度用dp保证在不同屏幕上物理尺寸一致。spScale-independent Pixel类似dp但会跟随系统字体缩放设置。文字大小用sp。!-- 工控按钮物理尺寸至少12mm约48dp --Buttonandroid:layout_width48dpandroid:layout_height48dpandroid:textSize18sp/4.3 dimen资源限定——多分辨率适配在res/values/dimens.xml定义基础尺寸!-- res/values/dimens.xml默认 --resourcesdimennamebtn_size48dp/dimendimennametext_large18sp/dimen/resources针对特殊分辨率创建限定目录!-- res/values-sw480dp/dimens.xml小屏7寸 --resourcesdimennamebtn_size36dp/dimendimennametext_large14sp/dimen/resources!-- res/values-sw720dp/dimens.xml大屏12寸 --resourcesdimennamebtn_size64dp/dimendimennametext_large24sp/dimen/resources布局引用android:layout_widthdimen/btn_size五、横竖屏锁定与布局适配5.1 方向锁定Manifest中锁定方向上一篇已讲activityandroid:screenOrientationlandscape/5.2 layout-land与layout-port目录当需要为不同方向提供不同布局时res/ layout/ → 默认布局竖屏 layout-land/ → 横屏专用布局横屏布局文件res/layout-land/activity_main.xml左侧数据面板 右侧视频区。竖屏布局文件res/layout/activity_main.xml上方视频区 下方数据面板。系统根据当前方向自动选择对应目录的布局文件。六、自定义View在工控中的应用6.1 为什么需要自定义View工控界面需要展示特殊元素仪表盘指针、温度波形曲线、设备状态指示灯。这些在标准View库里找不到必须自己画。6.2 自定义View基本步骤publicclassGaugeViewextendsView{privatefloatvalue0;// 当前指针值publicGaugeView(Contextcontext,AttributeSetattrs){super(context,attrs);}OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);intwgetWidth();inthgetHeight();intcxw/2;intcyh/2;intradiusMath.min(w,h)/2-20;// 画外圈PaintcirclePaintnewPaint();circlePaint.setColor(Color.GRAY);circlePaint.setStyle(Paint.Style.STROKE);circlePaint.setStrokeWidth(6f);canvas.drawCircle(cx,cy,radius,circlePaint);// 画指针PaintneedlePaintnewPaint();needlePaint.setColor(Color.RED);needlePaint.setStrokeWidth(4f);floatangle(value/100f)*270f-135f;// 0~100映射到-135°~135°floatrad(float)Math.toRadians(angle);floatnxcx(radius-10)*(float)Math.cos(rad);floatnycy(radius-10)*(float)Math.sin(rad);canvas.drawLine(cx,cy,nx,ny,needlePaint);}publicvoidsetValue(floatv){this.valuev;invalidate();// 触发重绘}}在布局中使用com.example.industrial.GaugeViewandroid:idid/temperatureGaugeandroid:layout_width200dpandroid:layout_height200dp/更新数据gaugeView.setValue(36.5f);七、工控UI设计原则工控界面和手机APP的UI逻辑完全不同核心原则大按钮最小触控区域48dp×48dp工控推荐64dp以上戴手套操作也不误触高对比度文字与背景色对比度 ≥ 4.5:1暗室环境也能看清防误触危险操作停止、复位必须长按确认不能一键触发信息密度适中不要堆太多数据在一屏分区明确关键数据放大突出色彩语义统一绿正常、黄警告、红故障整厂统一标准字号够大最小14sp标题24sp以上站在1米外也能看清八、代码示例工控状态监控界面?xml version1.0 encodingutf-8?LinearLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroid:background#1A1A2Eandroid:padding16dp!-- 状态指示行 --LinearLayoutandroid:orientationhorizontalandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalViewandroid:layout_width24dpandroid:layout_height24dpandroid:background#4CAF50/!-- 绿灯运行 --TextViewandroid:text设备运行中android:textSize24spandroid:textColor#FFFFFFandroid:layout_marginStart12dp//LinearLayout!-- 仪表区 --LinearLayoutandroid:orientationhorizontalandroid:layout_widthmatch_parentandroid:layout_height0dpandroid:layout_weight1android:gravitycentercom.example.industrial.GaugeViewandroid:idid/tempGaugeandroid:layout_width180dpandroid:layout_height180dp/com.example.industrial.GaugeViewandroid:idid/pressureGaugeandroid:layout_width180dpandroid:layout_height180dpandroid:layout_marginStart24dp//LinearLayout!-- 操作按钮区 --LinearLayoutandroid:orientationhorizontalandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:gravitycenterButtonandroid:idid/startBtnandroid:text启动android:textSize20spandroid:layout_width120dpandroid:layout_height64dpandroid:background#4CAF50android:textColor#FFFFFF/Buttonandroid:idid/stopBtnandroid:text停止android:textSize20spandroid:layout_width120dpandroid:layout_height64dpandroid:layout_marginStart24dpandroid:background#F44336android:textColor#FFFFFF//LinearLayout/LinearLayout工控界面的核心不是花哨而是稳、大、清。按钮大到手套能点字号大到一米可读配色到暗室可辨——这才是工业级UI。