Android 入門チュートリアル | DrawerLayout サイドスライダー

ここに画像の説明を挿入します

DrawerLayout は、横スライドメニュー効果を実装するコントロールです。

DawerLayout は、サイドメニューとメインコンテンツ領域の 2 つの部分に分かれています。

メインコンテンツ領域はサイドメニューの前に配置する必要があり、メインコンテンツ領域のインターフェイスのルートレイアウトとして DrawerLayout を使用するのが最善です。そうしないと、タッチイベントがブロックされる問題が発生する可能性があります。
横スライドメニューパーツのレイアウトでは、横スライドメニューが左側にあるのか右側にあるのかを示す、layout_gravity 属性を設定する必要があります。layout_gravity="start/left" が設定されているビューのみが横スライドメニューとみなされます。

使用上の注意

メインコンテンツビューは、DrawerLayout の最初のサブビューである必要があります。
メインコンテンツビューの幅と高さは match_parent である必要があります
指定されたサイドスライディングビューの android:layout_gravity 属性が表示される必要があります。android:layout_gravity = "start" の場合、メニューは左から右にスライドアウトします。android:layout_gravity = "end" の場合、メニューは右から右にスライドアウトします。左。左右の使用はお勧めしません。
サイドスライディングビューの幅は dp 単位で測定されます。(メインコンテンツビューを常に表示するために) 320 dp を超えることはお勧めできません。サイドスライディングイベントを設定します: mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene)

DrawerLayout の例:

DrawerLayout を使用するには、DrawerLayout をレイアウト XML ファイルのルートビューとして設定します。

左側からスライドして引き出した図（サイドスライダー）

左からサイドスライダーをスライドさせる簡単な例。

サイドスライダーが抜けると後ろの視界に影がつきます。

レイアウトファイル

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是主页" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是侧滑栏" />
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

効果：

tools:openDrawer="start"DrawerLayout を設定する必要があること、およびサイドスライダーレイアウトを設定する必要があることに注意してくださいandroid:layout_gravity="start"。

変更する場合はtools:openDrawer="end"サイドスライダーのレイアウトを設定する必要がありますandroid:layout_gravity="end"。サイドスライドバーは右側からスライド可能です。

これでサイドバーがRelativeLayoutで配置されました。RecyclerView を置くこともできます。

引き出しが出てきたらページを押す

サイドスライドバーのスライドイベントをリッスンするには、を使用しますActionBarDrawerToggle。サイドスライドバーがスライドする際のonDrawerSlideスライド距離をメソッドで計算します。次に、メインビューの水平方向の相対オフセット距離を設定しますsetTranslationX。

構成操作はアクティビティの onCreate メソッドで実行できます。

DrawerLayout root = findViewById(R.id.root);
    final View contentView = findViewById(R.id.content_field);

    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, root, android.R.string.yes, android.R.string.cancel) {
    
    

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
    
    
            super.onDrawerSlide(drawerView, slideOffset);
            float slideX = drawerView.getWidth() * slideOffset;
            contentView.setTranslationX(slideX);
        }
    };
    root.addDrawerListener(actionBarDrawerToggle);

スライドアウト時に影を変更する

setScrimColor影の色を変更するには、DrawerLayout メソッドを使用します。デフォルトの影の色はですDEFAULT_SCRIM_COLOR = 0x99000000。

DrawerLayout root = findViewById(R.id.root);
root.setScrimColor(Color.TRANSPARENT);

ロックドロワーレイアウト

root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); // 解锁
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); // 不检测从左到右的滑动动作

最後にもう一度シェアします

[Tencent テクニカルチーム制作] Android をゼロから始めてマスターする、Android Studio インストールチュートリアル + Android 基本チュートリアルのフルセット

Androidプログラミング入門チュートリアル

入門から慣れるまでの Java 言語の基礎

ここに画像の説明を挿入します

Kotlin 言語の基礎から入門まで

ここに画像の説明を挿入します

初心者から使い慣れたものまでの Android テクノロジースタック

ここに画像の説明を挿入します

Android Jetpack についての総合的な学習

ここに画像の説明を挿入します

初心者にとって、Android Studio のインストールは難しいかもしれません。次のビデオを見て、インストール方法と実行方法を段階的に学習できます。

Android Studioのインストールチュートリアル

ここに画像の説明を挿入します

Java の学習段階では、この段階ではビデオ学習に重点を置き、書籍を確認して穴埋めすることで補うことをお勧めします。書籍を中心に学習する場合は、書籍の説明に基づいてコードを入力し、指導ビデオで補足して抜け漏れを確認し、穴埋めすることができます。問題が発生した場合は、Baidu にアクセスすると、初級レベルの問題に遭遇した場合でも、より適切な回答が得られることが多いです。

4 つの主要なコンポーネントの使用方法、Service の作成方法、レイアウト方法、簡単なカスタム View、アニメーション、ネットワーク通信、その他の共通技術などの基本的な知識を習得する必要があります。

ゼロベースのチュートリアルの完全なセットが用意されています。必要な場合は、以下の QR コードを追加して無料で入手できます。