2018-07-03发表2021-08-10更新项目 / 开发日志 / 人升5 分钟读完 (大约771个字)

人升开发日志#7 | 7/3 侧滑菜单+登陆界面

效果图：

总体都是在AS自带的几个Activity上进行修改，但也遭遇了不少的坑。

侧滑菜单

分割线

不同Group之间会自动添加分割线，布局如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group
        android:id="@+id/grp_application"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="主页" />
        <item
            android:id="@+id/nav_history"
            android:icon="@drawable/ic_history_black_24dp"
            android:title="历史" />
        <item
            android:id="@+id/nav_achievement"
            android:icon="@drawable/ic_stars_black_24dp"
            android:title="成就" />
    </group>

    <group
        android:id="@+id/grp_system"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="选项" />
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_info_black_24dp"
            android:title="关于" />
    </group>

</menu>

按钮图标来源

Google在Github上有material design的图标仓库，内含矢量图和png以及ios可用的多种格式。

登陆界面

采用ToolBar

登陆界面的模板使用的是ActionBar，我们要手动改成Toolbar。

布局文件中添加：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/login_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

kt代码中添加：

setSupportActionBar(login_toolbar)
//下面两句是启用Toolbar的Up按钮
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeButtonEnabled(true)

Up的按钮的作用理应是：返回该活动的父级活动，有点类似于Windows中的向上操作。

所以是和返回（Back）操作是不同的。

正确的实现方式是在AndroidManifest.xml相应的Activity中添加父布局：

1	android:parentActivityName=".activities.MainActivity"

取消自动打开软键盘

默认情况进入Login Activity，会自动获取第一个输入框的焦点。

显得不方便以及不美观，在AndroidManifest.xml相应的Activity中添加：

1	android:windowSoftInputMode="stateHidden\|stateAlwaysHidden"

分割线的实现

使用一个自定义宽高以及颜色的View实现，布局文件：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="128dp">

    <View
        android:id="@+id/divider_left"
        android:layout_width="128dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="3dp"
        android:layout_marginStart="3dp"
        android:text="@string/login_or"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/divider_right"
        app:layout_constraintStart_toStartOf="@id/divider_left"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/divider_right"
        android:layout_width="128dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.47" />

</android.support.constraint.ConstraintLayout>

按钮显示图片

<Button
    android:id="@+id/yiban_sign_in_button"
    style="?android:textAppearanceSmall"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginTop="16dp"
    android:background="@color/yiban_btn"
    android:drawableLeft="@drawable/ic_yibanlogo" <!-- 左侧显示的图片 -->
    android:drawablePadding="72dp" <!-- 文字与图片的间隔 -->
    android:gravity="center_vertical" <!-- 只垂直居中 -->
    android:paddingStart="16dp" <!-- 设置图片与左侧的Padding -->
    android:text="@string/login_viaYiban"
    android:textColor="@color/white"
    android:textStyle="bold" />

默认似乎是文字在图片之外的空间内居中，而不是在按钮整个宽度居中。

为方便这里微调间距解决，理论上也可以重写Button解决。

默认的ThemeOverlay.AppCompat.Dark.ActionBar是白色文字+白色水波纹，结果我们的背景色过于浅色，白色水波纹几乎看不见。

修改theme实现

1
2
3

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:textColorPrimary">@android:color/white</item>
</style>