Pager LayoutsとScreenの実装

12499 ワード
テキストリンク

11月16日Androidレッスン7週目


この間、アンドロイドのメンバーは復習ブログを真剣にアップしていましたついにまた私の番になりました:)みんなに会えて嬉しいです!!では、先週の勝言の復習に続き、今週も「Chegg Prep」アプリのクローンコードを続けていきましょう~!

Pager layoutsについて


Pager Layoutsは、「Accompanist」が提供するJetPack Componentのライブラリの1つで、既存のAndroidのViewPagerと似ています.名前から分かるように、ページをめくるようにレイアウトを表現していますこのライブラリはAPIを使用してサポートされていますが、まだ開発中なので、「@ExperimentalPagerAPI」と組み合わせて使用する必要があります.
  • HorizontalPager:プロジェクト水平配置、レイアウト
    • 、水平切替可能
  • VerticalPager:垂直配置項目のレイアウト
    • 、垂直ストライプ付き

  • Lazyの作成方法:HorizontalPagerとVerticalPagerは、ユーザーがページを閲覧するときに不要なページを削除できる不活性な作成方法を提供します.

  • contentパラメータ:ページ数を指定するときにこのパラメータが必要です.

  • stateパラメータ:転送されていない場合は自動的に生成され、外部でpagerState remeberとともに転送および使用されます.

  • 次のコードをgradleに追加して使用できます.(バージョンは作成日として0.19.0を使用)
    • dependencies {
    implementation "com.google.accompanist:accompanist-pager:<version>"

    // If using indicators, also depend on 
    implementation "com.google.accompanist:accompanist-pager-indicators:<version>"
}

    CreateScreen実装


    上部はScaffoldを用いたtopBarであり、右側下部はFloatingActionButtonである.カードを生成する画面なので、真ん中にカードの前後にコンテンツを作成できるUIがあります.

    CreateCardScreen複合関数の使用

    CreateCardScreen(
    cardList = cardList, //SnapshotStateList<Card> 전달
    setCard = { index, card ->
        cardList[index] = card // Card 수정
    },
    addCard = { cardList.add(Card("", "")) }, // 새로운 Card 추가
    removeCard = { index ->
        cardList.removeAt(index) // Card 삭제
        if (cardList.size == 0) cardList.add(Card("", ""))
        // card가 cardList에서 삭제된 후 cardList의 사이즈가 0이면 비어 있는 새로운 Card 추가
    },
    navigateBack = { navController.popBackStack() },
    onDone = { Log.d("cardList", cardList.joinToString("\n")) }
)
    CreateScreenはViewModelを有し、可変状態リストOfを用いてカード情報を取得するためにカード形式のカードリストを作成し、画面上で主にこれらのカード情報を使用する.val cardList = remember { mutableStateListOf(Card("", "")) }コードによって1つのカードを空のカードリストに初期化し、そのカードリストをCreateCardScreenに送信する.最終的に、ビューモデルのcreateScreenStateの値がcreateSateのCardsscreenの場合、when文で上記のコードを実行してcardを修正、作成、削除できます.

    HorizontalPagerの使用

    HorizontalPager( 
    count = cardList.size,
    state = pagerState, // 선언된 pagerState 사용 (선언하지 않으면 내부에서 자동으로 사용)
    contentPadding = PaddingValues(start = 32.dp, end = 32.dp) // 양쪽에 이전&다음 카드 보기
) { page ->
    CardItemField(
        card = cardList[page], // cardList에서 page에 해당하는 card 전달
        setCard = { card ->
            setCard(page, card) // CardItemField가 전달하는 card 정보로 해당 page를 set
        },
        removeCard = { removeCard(page) } // page에 해당하는 card 삭제
    )
}
    Pager Layoutsのタイミングを利用して~!val pagerState = rememberPagerState()のpager Stateでは、ページの数と現在のページの状態がわかります.var prevPageCount by remember { mutableStateOf(pagerState.pageCount) }のコードを作成して、前のページの数を覚えることができます.prevPageCountはPagerのスクロールアニメーションを処理するために使用されます.

    PracticesScreenの実装


    上部のtopBarはCreateScreenによく似ているので、スキップします!みんな知ってるって信じてる???🏄‍♀️ ProgressBarはメンバーが課題として実施したUIですこの画面には、カードのswife進捗に応じてProgressBarバーが表示されます.次のカードはCreateScreenで作成され、前後に1つずつあります.また、HorizontalPagerを使用してSkypeを有効にし、Flip機能でカードをクリックしたときに前->後->前に切り替えることもできます.かっこいいでしょ?!

    Flip機能


    芸源CoreはStackoverflowのFlip機能の実現方式を発見し、CheggPrepに適切に溶け込んだ.CardFaceという名前のenumクラスを作成し、角度によってFrontとBackを区別します.Frontの次はBack/Back、次はFrontです.
    var cardFace by remember {
    mutableStateOf(CardFace.Front)
} // 카드의 앞면, 뒷면 상태

..생략..

Card(
    onClick = {  cardFace = cardFace.next  }, // 클릭하면, 카드 뒤집기
    modifier = modifier
        .graphicsLayer {
            // 변화하는 rotation 값을 rotationX 또는 rotationY로 사용
            if (axis == RotationAxis.AxisX) {
                rotationX = rotation.value
            } else {
                rotationY = rotation.value
            }
            cameraDistance = 12f * density
        },
)

    Repositoryモードとは?


    レポートモードは、Android Jetpackが推奨するアプリケーションアーキテクチャです.
    ActivityまたはFragmentですべてのコードを記述した場合、「興味の分離」が困難なために問題が発生する可能性があります.したがって、Jetpack ComponentなどのUIベースの操作を管理するには、クラスを簡単に維持し、ライフサイクル管理に注意する必要があります.すなわち,クラスへの依存性を最小化しなければならない.
    上の画像の例で詳しく説明しましょう.各コンポーネントは、別のコンポーネントに属します.レポートはデータ・ソースをコンテナにカプセル化し、ViewModelがデータを要求すると、状況に応じてモデル(継続的なデータ・モデル)とリモート・データ・ソース(リモート・バックエンド・データ・ソース)からデータが取得され、渡されます.これは、ローカルでデータを保持するか、バックグラウンドでデータを更新して再ロードして使用するかを決定できることを意味します.
    さらに、レポート・モードの詳細については、Android公式ドキュメントを参照してください.😉

    Hiltって何ですか?


    クラスの依存性を減らすには、外部で作成したオブジェクトを変更することで、オブジェクトの注入方法を変更できます.これを「依存注入」と呼ぶ.依存注入には、構造関数注入とフィールド注入が含まれます.難しいでしょ?!さらに,注入依存性により,コード可用性,再構成状態,テスト状態の利点が得られる.この依存注入を簡略化するために,Android依存注入ライブラリ「Dagger」が存在する.Daggerベースで使いやすいのが「Hilt」.したがって、依存性が強化されると、これらの自動依存注入ライブラリは、実行時に接続するか、コンパイル時に接続して依存性を管理するために使用することができる.(実行時よりもコンパイルが信頼できる!)
    ->ちょっと難しいコンセプトなので、ここまで簡単に進めます…!😥

    の最後の部分


    さあ...!今日はスクリーン実装コードの量も多く、コンセプト部分の難易度も以前より高く、容易ではないはずです.皆さんは理解しづらいかもしれませんが、自分が時間をかけて勉強すれば、ある瞬間に慣れて、いつかは受け入れやすいと思います!私ももっと頑張ります!今週の会話も皆さんお疲れ様でした~!来週笑顔で会おう😊 みんなは背筋を伸ばしてストレッチをします🦾
    👩‍💻 SWEA 1861正方形部屋