原生标题栏示例代码

简要描述

主要协助云上越秀App设置标题栏;

UI标注及切图参考

带WebView的页面导航设计图

返回按钮切图:


黑色返回按钮


白色返回按钮

布局xml文件代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:background="@color/white"
  7. android:orientation="vertical">
  8. <RelativeLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="34dp">
  11. <ImageView
  12. android:id="@+id/img_tool_back"
  13. android:layout_width="24dp"
  14. android:layout_height="24dp"
  15. android:layout_marginLeft="15dp"
  16. android:layout_marginTop="10dp"
  17. android:layout_marginBottom="10dp"
  18. android:src="@drawable/back_black" />
  19. <TextView
  20. android:id="@+id/tv_title"
  21. android:layout_width="wrap_content"
  22. android:layout_height="match_parent"
  23. android:layout_centerInParent="true"
  24. android:gravity="center"
  25. android:textColor="@color/ui_dialog_title"
  26. android:textSize="18sp"
  27. tools:text="test"
  28. />
  29. </RelativeLayout>
  30. <WebView
  31. android:id="@+id/container"
  32. android:layout_width="match_parent"
  33. android:layout_height="match_parent"
  34. android:orientation="vertical" />
  35. </LinearLayout>