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