5-7日目(2022.01.2022.01.04)

プロジェクトの開発と完了

もともと毎日すべて招待状を书きたいです...思ったより仕事量が多くて遅れたようです.5日目から7日目まで、機能開発、デバッグ、設計、UIの修正作業を継続します.
完了したプロジェクトGithub repoのReadmeファイルの内容をいくつか修正し、添付します.

Pro . dev

IT業界向けHuman Networkプラットフォーム

プロジェクトの概要

課題の概要

最初の週のタスクでは、3つのタブからなるアプリケーションを開発します.
3つのラベルの内容は以下の通りです.

連絡先の画面が表示されます(ただし、連絡先はJSONデータ型である必要があります)

は、20枚の画像を含む画像セット

を表示する.

画面

1番タブ

JSONデータを効率的に処理できるZXingライブラリを使用して、連絡先データを追加および編集できます.ZXingは2 Dコードの読み取り/書き込み機能を提供するライブラリ
2 Dコードは、個別のActivityまたはFragmentを作成することなく読み込むことができ、Activityはoverride onActivity Result()関数で結果値を取得します.

fun runQRCodeReader() { // QR 코드 리더 실행 함수 예시
	val integrator = IntentIntegrator(this)
	integrator.setBarcodeImageEnabled(false)
	integrator.setBeepEnabled(false)
	integrator.setPrompt("화면에 QR 코드를 인식시켜주세요")
	integrator.initiateScan()
}

@SuppressLint("MissingSuperCall") //  QR 코드 리더의 결과를 처리하는 함수
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
	result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data)
	if (result.contents == null) {
		Toast.makeText(applicationContext, "스캔 실패. 다시 시도해주세요.", Toast.LENGTH_SHORT).show()
	}
	else {
		var bundle = Bundle()
		bundle.putString("JSON", result.contents)
	}
}

そして連絡先は個人情報カードとして提示され,そのために個人情報カードを自ら設計した.コンフィギュレーションカードは複数追加できますが、そのためにViewPager 2を使用しています.
また、Dots Indicatorライブラリを使用して、現在選択されているコンフィギュレーションカードの位置を直感的にユーザに伝える.ただし、ViewPager 2の項目を削除してもIndicatorのインデックス長が変わらないなどの問題があり、Circle IndicatorライブラリのCircleIndicator 3を使用して問題を解決しました.

最初のタブ操作の例.gif
次に、プロファイルカードの追加と削除に使用するドロップダウンメニューを追加します.
例ドロップダウンおよび削除画面.個人情報カードを追加する画面もありますが、アンドロイドシミュレータではQRコードが認識できず、単独では添付できません.
追加または削除時に表示されるモードウィンドウでは、Dialogクラスを継承してCustom Dialogクラスを作成して使用します.このために別のXMLファイルを作成し、削除時にモードウィンドウを開き、結果に基づいてプロファイルカードを削除するコードを作成しました.

deleteBtn.setOnClickListener(object: View.OnClickListener{
	override fun onClick(v: View?) {
		val dialog = ProfileDeleteDialog(context)
		dialog.setOnOKClickedListener{
		delete(viewholder)
		readJsonData()
	}
	dialog.start("dsf")
	}
})

onClickListenerのコンフィギュレーションカード上の削除ボタンを使用して削除を実行

2番目のタブ

2番目のラベルは写真をギャラリーに展示する画面です.IT子会社が利用していると仮定したので,同僚開発者を含む会社からアップロードされた投稿の画面を表示できるようにした.
画面の構成はインスタやフェイスブックを参考にして配置されています.写真ではGridViewを使い、一列に3枚の写真を置くことができます.

画像をクリックすると、投稿を表示できる分割が実行されます.分割の切り替え時にアニメーションが追加され、次のコードを使用して、分割間の切り替え時にアニメーションを実行できます.

 activity!!.supportFragmentManager.beginTransaction()
 	.setCustomAnimations(R.anim.fade_in, R.anim.fade_out)
	.replace(R.id.fragment, feedDetailFragment)
	.commitAllowingStateLoss()

現在のAlpha値を調整することで、Fade-InとFade-Outの効果を実現し、AndroidではXMLファイルを作成してアニメーションを実現できます.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="500"/>
</set>

3番タブ

本アプリはIT部門のサラリーマン向けに作成されているため、3番目のタグは「プロジェクト管理型」ページで、サラリーマンが参加するプロジェクトを管理しやすい.時間管理と詳細のチェックが容易です.

UI

一番上のグラフは、プロジェクトの言語スケールを決定します.プロジェクト言語をマスターし、個数で比を計算して反映します.どの言語が高い割合を占めているかを迅速に確認するために使用されます.

正面

プロジェクト管理カードの正面には重要な情報が含まれています.プロジェクトの締め切り日、締め切り日のD-Day、プロジェクトを担当するリーダー、リーダー以外のプロジェクト参加者、現在のプロジェクトの進捗を含む.項目で使用する言語はカードの色で区別できます.青はPython、黄色はKotlin、赤は他の言語を表す.

背面

カードの裏面に詳細な項目情報が表示されます.カットされた項目のタイトルを前にもう一度確認し、項目責任者の名前、電子メール、携帯電話番号、履歴書の写真を確認できます.プロジェクトを効率的に管理するためのTODOリストを以下に示します.右側では、プロジェクトの実行時に実行する作業をスクロールして表示できます.作業が完了したら、チェックボックスを選択すると、進行状況が左側のグラフに反映されます.背面のパイ図は、このプロジェクトの詳細な作業の進捗状況を示しています.作業全体で何個の作業が完了したかをチェックボックスで確認し、プロジェクトの完了状況をパーセントで通知します.
プロジェクト画面の作成例