HUD导航
HUD 导航用于驾车过程中投影展示,该模式直观展示了导航信息,是一种安全简洁的导航模式。HUD导航主要是导航一种界面简洁的应用。
下面以驾车导航为例,介绍如何实现HUD导航。
1、HUD布局代码示例
<?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);