您现在的位置:

HUD导航

HUD 导航用于驾车过程中投影展示,该模式直观展示了导航信息,是一种安全简洁的导航模式。HUD导航主要是导航一种界面简洁的应用。

HUD导航

下面以驾车导航为例,介绍如何实现HUD导航。

1、HUD布局代码示例

XML
                <?xml version="1.0" encoding="utf-8"?>
                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    
                    <include
                        android:id="@+id/hud_title"
                        layout="@layout/lay_title"/>
                        
                    <LinearLayout
                        android:id="@+id/hud_anim_parent"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:background="#f000"
                        android:orientation="vertical">
                        
                        <ImageView
                            android:id="@+id/hud_turn_icon"
                            android:layout_width="160dp"
                            android:layout_height="160dp"
                            android:layout_gravity="center"
                            android:layout_marginTop="15dp"/>
                            
                        <TextView
                            android:id="@+id/tv_no_nivadata"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:ellipsize="end"
                            android:gravity="center"
                            android:maxLines="1"
                            android:singleLine="true"
                            android:text="@string/hud_location"
                            android:textColor="@color/hud_color"
                            android:textSize="40sp"/>
                            
                        <TextView
                            android:id="@+id/hud_distance"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="4dp"
                            android:ellipsize="end"
                            android:gravity="center"
                            android:maxLines="1"
                            android:maxEms="6"
                            android:textColor="@color/hud_color"
                            android:textSize="80sp"/>
                            
                        <TextView
                            android:id="@+id/hud_roadname"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:ellipsize="end"
                            android:gravity="center"
                            android:maxLines="1"
                            android:maxEms="6"
                            android:singleLine="true"
                            android:textColor="@color/hud_color"
                            android:textSize="@dimen/F24"/>
                            
                        <LinearLayout
                            android:id="@+id/hud_bottom"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/space_60"
                            android:layout_marginTop="60dp"
                            android:gravity="center"
                            android:orientation="horizontal">
                            
                            <TextView
                                android:id="@+id/hud_speed"
                                android:layout_width="160dp"
                                android:layout_height="60dp"
                                android:layout_gravity="center"
                                android:background="@drawable/hud_circle_rect"
                                android:gravity="center"
                                android:singleLine="true"
                                android:text="0km/h"
                                android:textColor="@color/hud_color"
                                android:textSize="@dimen/F25"
                                android:textStyle="bold"/>
                                
                            <TextView
                                android:id="@+id/hud_direction"
                                android:layout_width="160dp"
                                android:layout_height="60dp"
                                android:layout_gravity="center"
                                android:layout_marginLeft="15dp"
                                android:layout_marginStart="15dp"
                                android:background="@drawable/hud_circle_rect"
                                android:gravity="center"
                                android:singleLine="true"
                                android:text="@string/north"
                                android:textColor="@color/hud_color"
                                android:textSize="@dimen/F25"
                                android:textStyle="bold"/>
                                
                        </LinearLayout>
                        <TextView
                            android:id="@+id/tv_remaining_time"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="36dp"
                            android:singleLine="true"
                            android:textColor="@color/hud_color"
                            android:textSize="@dimen/F26"/>
                    </LinearLayout>
                </LinearLayout>
            

2、HUD布局初始化

布局初始化使用了映射框架,可以自行集成。

                @ViewerInject(R.id.hud_title)
                TitleViewer titleViewer;
                /**
                * 翻转父控件
                */
                @ViewInject(R.id.hud_anim_parent)
                View vAnimParent;
                /**
                * 转向标
                */
                @ViewInject(R.id.hud_turn_icon)
                ImageView ivTurnIcon;
                /**
                * 下一路口
                */
                @ViewInject(R.id.hud_roadname)
                TextView tvRoadName;
                /**
                * 剩余距离
                */
                @ViewInject(R.id.hud_distance)
                TextView tvDistance;
                /**
                * 当前车速
                */
                @ViewInject(R.id.hud_speed)
                TextView tvSpeed;
                /**
                * 指南针
                */
                @ViewInject(R.id.hud_direction)
                TextView vDirection;
                /**
                * 剩余距离及时间s
                */
                @ViewInject(R.id.tv_remaining_time)
                TextView tvRemainingTime;

                @ViewInject(R.id.tv_no_nivadata)
                TextView tv_no_nivadata;
            

3、根据导航信息更新HUD界面

                // 沿XXX行驶
                distance = mNavigateData.getCurrentToNextTurnDistance();
                // 200米
                distanceText = GISUtils.formatDistance(distance, GISUtils.DistanceUnit.CN);
                matcher = NUMBER_PATTERN.matcher(distanceText);
                start = 0;
                end = 0;
                if (matcher.find()) {
                    start = matcher.start();
                    end = matcher.end();
                }
                numberDistance = distanceText.substring(start, end);
                
                unite = distanceText.substring(end, distanceText.length());
                distanceSize = R.dimen.F22;
                driveNumSize = R.dimen.F24;
                suffixSize = R.dimen.F14;
                String yan = YAN + mRoadName;
                SpannableStringBuilder yanStyle = new SpannableStringBuilder(yan);
                
                yanStyle.setSpan(new AbsoluteSizeSpan(LayoutUtils.getPxByDimens(suffixSize)), 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                yanStyle.setSpan(new AbsoluteSizeSpan(LayoutUtils.getPxByDimens(distanceSize)), 1, yan.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                
                String driveNum = typeKey + numberDistance + unite;
                SpannableStringBuilder driveNumStyle = new SpannableStringBuilder(driveNum);
                
                driveNumStyle.setSpan(new AbsoluteSizeSpan(LayoutUtils.getPxByDimens(suffixSize)), 0, typeKey.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                driveNumStyle.setSpan(new AbsoluteSizeSpan(LayoutUtils.getPxByDimens(driveNumSize)), typeKey.length(), typeKey.length() + numberDistance.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                driveNumStyle.setSpan(new AbsoluteSizeSpan(LayoutUtils.getPxByDimens(suffixSize)), typeKey.length() + numberDistance.length(), driveNum.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                
                tvDistance.setText(yanStyle);
                tvRoadName.setText(driveNumStyle);
            
返回顶部