Android開発ログパンチAPP（1）

記事ディレクトリ

Android開発ログパンチAPP（1）

序章

KotlinとAndroidの開発を学び始め、最後の宿題はAPPの開発です。人々のグループなので、私はよりシンプルなログパンチカードを選びました。知識の制限のため、アプリの機能は比較的シンプルで、コードとプロジェクトの構造は少し厄介です。最初から最後まで半月近くかかり、途中で色々な苦労をしましたが、最終的には受け入れ時期が近づいていたため、完結しませんでした。

インターフェイスディスプレイ

アプリには、ホームページ、統計インターフェース、設定インターフェースの3つの主要なインターフェースがあります

ここに画像の説明を挿入

コンテンツの概要

1.コントロール

10を超えるコントロールが使用されます。主な一般的なコントロールは、TextView、Button、EditText、ImageView、Dialog、ImageButton、Calendar、

ProgressBar、ListView、RecyclerView、およびアプリインターフェイスを構築するためのカスタムコントロールの使用。

2.レイアウト

3つの一般的なレイアウト方法を使用します：LinearLayout、RelativeLayout、FrameLayout

3.テクノロジー

主な技術概要：SQLite、フラグメント、マテリアルデザインなど

開発プロセス

準備オーケー

新しいプロジェクトを作成し、[ボタンナビゲーションアクティビティ]を選択すると、AndroidStudioが「下部ナビゲーションバー」フレームワークの作成に役立ちます。

ここに画像の説明を挿入

作成されたプロジェクト構造は次のとおりです。

この時点で下部のナビゲーションバーが作成されていることがわかります。コードをよく見ると、uiフォルダーの下に3つのサブフォルダーがあります。これらは3つのUIフラグメントであり、3つのフラグメントを使用してMainActivity.ktに埋め込みます。これに基づき、APPの生産を開始します。

ここに画像の説明を挿入

スタートページ

美しいAPPには美しいスタートページがあるので、APPでスタートページも作成しました。

（注：システムの元のMainActivity.ktを置き換えるために新しいHome.ktファイルを作成し、元のMAinActivity.ktをAPPのスタートアップページにしました）

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="-1dp"
        android:layout_marginTop="-260dp"
        android:layout_marginEnd="-1dp"
        android:layout_marginBottom="23dp"
        android:src="@drawable/back_pt" />

    <ImageView
        android:id="@+id/main_logo"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="520dp"
        android:scaleType="fitXY"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/main_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_logo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="6dp"
        android:text="Small Daily"
        android:textColor="#DD3922"
        android:textSize="20dp" />

</RelativeLayout>

効果は次のとおりです。

ここに画像の説明を挿入

下部のナビゲーションバー

下部のナビゲーションバーは、元のフレームに基づいて変更および生成されます。したがって、これに基づいてナビゲーションバーに対応するアイコンと名前を変更すれば、確立を完了することができます。
ナビゲーションバーのレイアウトファイルは、メニューディレクトリのbottom_nav_menu.xmlにあり、対応するコードを変更します。
ここに画像の説明を挿入さらに、activity_homeファイルで、下部のナビゲーションバーの背景色を目的の色に変更します（ここではピンクに置き換えられています）。）：：