Android Toolbar左、中、右对齐

2018-11-01 22:08:19

Android Toolbar左、中、右对齐



默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/zhangphil.toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#03a9f4"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:logo="@drawable/ic_launcher"
        app:navigationIcon="@android:drawable/ic_menu_delete"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="title" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="左" />
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="中" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="右" />
    </android.support.v7.widget.Toolbar>
 
    <!-- 下边三个居左、居中、居右的view作为上面Toolbar的参照系可以清楚看出位置的偏移 -->
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/toolbar"
        android:text="左" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:layout_centerHorizontal="true"
        android:text="中" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/toolbar"
        android:text="右" />
 
</RelativeLayout>

如果没有使用Android Toolbar自身的app:navigationIcon、app:logo、app:title,则可以大致实现自定义的view居中、居右显示,但居左仍会有一些小瑕疵,因为Android Toolbar仍然为NavigationIcon(app:navigationIcon)在Toolbar的最左边保留了一定的空间位置,如图:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/zhangphil.toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#03a9f4"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="左" />
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="中" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="右" />
    </android.support.v7.widget.Toolbar>
 
    <!-- 下边三个居左、居中、居右的view作为上面Toolbar的参照系可以清楚看出位置的偏移 -->
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/toolbar"
        android:text="左" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:layout_centerHorizontal="true"
        android:text="中" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/toolbar"
        android:text="右" />
 
</RelativeLayout>





  • 2020-04-01 10:21:20

    Vue extend $mount 构造器详解

    本节介绍两个 Vue.js 内置但却不常用的 API——extend 和 $mount,它们经常一起使用。不常用,是因为在业务开发中,基本没有它们的用武之地,但在独立组件开发时,在一些特定的场景它们是至关重要的。

  • 2020-04-01 15:36:52

    CSS3中的transition属性详解

    transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间

  • 2020-04-02 17:02:25

    vue怎么能像jquery那样获得数据

    有时候我们需要获得动态的元素,但是我们没法直接用vue语法,vue一共了当前组件的对象,我们可以避免使用document.get...之类的。

  • 2020-04-02 21:38:15

    Nginx向ExpressJS转发真实IP地址

    由于服务器配置了Nginx的反向代理,在ExpressJS中无法获取到真实的IP地址。本文就介绍了如何配置Nginx以及ExpressJS使其可以显示用户的真实地址。