(白话通俗讲解)Android分离式可重用UI-自定义View沉浸式导航栏

最新推荐文章于 2022-04-07 09:15:14 发布

DJSeokHo

最新推荐文章于 2022-04-07 09:15:14 发布

阅读量430

点赞数

文章标签： Android 导航栏可重用UI 分离式界面沉浸式导航栏

本文链接：https://blog.csdn.net/djseokho/article/details/100555925

版权

本文介绍了如何实现Android应用程序中分离式可重用UI，特别是自定义沉浸式导航栏的创建。通过理解ViewGroup和委托接口的使用，详细展示了如何在布局文件中设置导航栏，并在MainActivity中加载。使用此方法，可以独立管理导航栏，方便复用并减少代码冗余。文章提供完整代码示例，鼓励开发者应用到其他可复用组件的设计中。

摘要由CSDN通过智能技术生成

原创博客，转载请注明出处。

小伙伴们好，时隔很久，终于决定开始更新博客。本文要将的是一种分离式UI的思想，并且给出一个利用这种思想制作的自定义导航栏。导航栏可以自由设定左图标和右图标，可以设置标题，以满足各界面对不同的图标和标题的需求，并且点击左图标或右图标后，通过委托可以让父界面进行某些操作。废话不多说，直接开始。

背景：

很多看起来非常复杂的界面，我们不可能写在一个文件里，相信我，当你接手一个超过3000行的Activity，你会很难受。一般情况下界面元素无非就是由头部导航区，中间内容区，下部内容区构成，这里我将制作一个头部导航栏区，体现分离式界面思想的优势。

前提知识：

ViewGroup的简单理解：

ViewGroup是什么？简单来说，比如常用的FrameLayout就是一个ViewGroup。字面意思理解的话，翻译成View的小组，意思就是一堆View构成的一个小组。View是什么？View, Button, TextView, EditText…这些就是View，而且，View里面可以嵌套ViewGroup，ViewGroup里又可以放View，至此，知道这些已经足够。

委托(接口)的使用：

委托的使用可以参考我之前写的的这篇文章即可。

开始：

新建一个项目之后为了弄成沉浸式，我喜欢在style.xml里动动手脚，以下是我的style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

        <!--
        因为使用了 AppCompat.NoActionBar 的主题，所以一些控件没有任何颜色，可以完全自定义。
        如果不习惯，可以用其他主题下的 NoActionBar 主题。
        NoActionBar是为了做沉浸式画面。
         -->

        <!-- edit text -->
        <item name="colorControlNormal">@color/gray</item>
        <item name="colorControlActivated">@color/app_basic_color</item>


    </style>

</resources>

别忘了在colors.xml里定义颜色。

接下来是导航栏的布局，在layout文件夹里新建一个view_holder_simple_navigation_bar.xml的文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/app_basic_color"
    >
	<!--
	 这里高度我设置为60dp，不是什么特定值，你可以换成你想要的任何值得，
	 我只是觉得60dp对于一个导航栏来说是属于比较漂亮和合适的高度。
	-->
	
    <ImageButton
        android:layout_marginStart="10dp"
        android:layout_gravity="center_vertical"
        android:id="@+id/imageButtonLeft"
        android:background="@color/app_basic_color"
        android:scaleType="fitCenter"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:background="@color/app_basic_color"
        android:id="@+id/textViewTitle"
        android:layout_marginStart="10dp"
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:textSize="10pt"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <ImageButton
        android:layout_marginEnd="10dp"