ViewPager+Fragment+DrawableLayout 實作頁面水平滑動與側滑抽屜布局-有解無憂

1. 設計目標

因為最近做課設，需要實作水平滑動頁面和側滑打開側邊欄功能，于是把這兩個功能合在一起寫了個demo，
實作的功能主要有：水平滑動和點擊底部按鈕切換頁面，側滑選單拉出與監聽，

2. 思路簡介

2.1 ViewPager + Fragment

ViewPager 物件具有內置滑動手勢來切換頁面，并且默認顯示螢屏滑動影片，因此無需再額外實作手勢識別和創建自己的影片，直接使用即可，ViewPager 使用 PagerAdapter 物件提供要顯示的新頁面，因此需要創建的 Fragment 類，在Fragment類里加載頁面的layout，并回傳View，同時需要重寫TabFragmentPagerAdapter類對Frament進行管理，在螢屏底部添加兩個Button監聽點擊事件進行Frament切換，為了提高用戶體驗，在螢屏頂部增加了標題欄來告知用戶當前所在頁面，螢屏底部在Button也有高亮的字體提示用戶當前所在頁面，

2.2 DrawableLayout + NavigationView

drawerLayout是一個布局控制元件，跟LinearLayout等控制元件是一樣的，只是drawerLayout帶有滑動的功能，只要按照drawerLayout的規定布局方式寫完布局，就能有側滑的效果，其中在撰寫程序需要注意：1.必須設定layout_gravity屬性，它表示側滑選單是在左邊還是右邊，這里選擇了start，表示跟隨系統語言判斷左右（漢語往左），2.NavigationView需要在布局檔案的最下面，可能會被其他布局給覆寫到導致無法監聽，
NavigationView可以很方便的實作Drawable的選單頁面，只需要把它放在DrawerLayout里，再通過它把需要跳轉的頁面設定進去即可，

3.實作方法

3.1 activity_main布局

為了能側滑，應把drawerLayout放在最外層，
NavigationView需要在布局檔案的最下面，可能會被其他布局給覆寫到導致無法監聽

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:custom="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="0dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:paddingTop="0dp"
        >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@color/cpb_blue"
                >

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_gravity="center_vertical">


                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/textView_topTitle"
                        android:text="安卓課設"
                        android:textSize="25dp"
                        android:textColor="@color/white"
                        android:layout_gravity="center_vertical"
                        android:textAlignment="center"
                        custom:ignore="RtlCompat" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"></LinearLayout>


                </LinearLayout>

            </LinearLayout>
            <androidx.viewpager.widget.ViewPager
                android:id="@+id/myViewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_marginLeft="0dp">
                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:id="@+id/content"></FrameLayout>
            </androidx.viewpager.widget.ViewPager>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="bottom"
                android:background="@color/lightgrey">

                <Button
                    android:id="@+id/button_manage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="40dp"
                    android:layout_weight="1"
                    android:background="@drawable/main_button_bg"
                    android:text="管理系統"
                    android:textAlignment="center"
                    android:textSize="15dp" />

                <Button
                    android:id="@+id/button_status"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginRight="40dp"
                    android:layout_weight="1"
                    android:background="@drawable/main_button_bg"
                    android:text="狀態查詢"
                    android:textSize="15dp" />

            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

3.2兩個Fragment子頁面與側滑選單布局

activity_status:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="狀態查詢"
    android:id="@+id/textView_status"
    android:textSize="25dp"
    tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

activity_manage:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="管理系統"
        android:id="@+id/textView_manage"
        android:textSize="25dp"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

nav_header:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="132dp"
        android:layout_height="90dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="9dp"
        android:src="@drawable/head" />

    <TextView
        android:id="@+id/username"
        android:layout_width="307dp"
        android:layout_height="35dp"
        android:layout_below="@id/icon_image"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="6dp"
        android:layout_marginBottom="30dp"
        android:text="lan"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="356dp"
        android:layout_height="wrap_content"


        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginEnd="53dp"

        android:layout_marginRight="53dp"
        android:layout_marginBottom="5dp"
        android:text="androidstudio@gmail.com"
        android:textColor="@color/black"
        android:textSize="14sp" />

</RelativeLayout>

在res目錄下新建一個menu檔案夾，存放nav_menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks" />
    </group>
</menu>

3.3 建立兩個Fragment類加載布局和建立TabFragmentPagerAdapter類管理Fragment

Fragment_Manage:

package com.example.test7;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class Fragment_Manage extends Fragment {
    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout.activity_manage ,container,false) ;

        return view;
    }
}

Fragment_status:

package com.example.test7;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class Fragment_Staus extends Fragment {
    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout.activity_status ,container,false) ;

        return view;
    }
}

TabFragmentPagerAdapter:

package com.example.test7;


import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mlist;


    public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.mlist = list;
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        super.setPrimaryItem(container, position, object);
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);//顯示第幾個頁面
    }

    @Override
    public int getCount() {
        return mlist.size();//有幾個頁面
    }
}

3.4 MainActivity

package com.example.test7;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.res.ColorStateList;
import android.content.res.Resources;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

import java.util.ArrayList;
import java.util.List;



public class MainActivity extends AppCompatActivity {

    private List<Fragment> list;
    private ViewPager myViewPager;
    private TabFragmentPagerAdapter adapter;

    private TextView  topTitle;


    private Button bt_status;
    private Button bt_manage;

    private NavigationView navView;
    private DrawerLayout myDrawerLayout;

    private ColorStateList cl_blue;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView()
    {
        //系結點擊事件
        bt_status=(Button)  findViewById(R.id.button_status ) ;
        bt_manage =(Button)  findViewById(R.id.button_manage ) ;
        topTitle =(TextView)  findViewById(R.id.textView_topTitle ) ;
        myViewPager = (ViewPager) findViewById(R.id.myViewPager);
        myViewPager.setOnPageChangeListener(new MyPagerChangeListener()) ;

        navView = findViewById(R.id.nav_view);
        myDrawerLayout = findViewById(R.id.drawer_layout);

        //顏色初始化
        Resources resource = (Resources) getBaseContext().getResources();
        cl_blue= (ColorStateList) resource.getColorStateList(R.color.cpb_blue);

        //把Fragment添加到List集合里面
        list = new ArrayList<>();
        list.add(new Fragment_Manage() );
        list.add(new Fragment_Staus() );
        adapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), list);
        myViewPager.setAdapter(adapter);

        //初始化顯示第一個頁面
        myViewPager.setCurrentItem(0);

        //button切換監聽
        bt_status.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myViewPager.setCurrentItem(1);
            }
        });
        bt_manage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myViewPager.setCurrentItem(0);
            }
        });


        //側邊欄item的監聽
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.nav_call:
                        Toast.makeText(MainActivity.this, "You clicked Call", Toast.LENGTH_SHORT).show();
                        myDrawerLayout.closeDrawers();
                        break;
                }
                return false;
            }
        });



    }

    //ViewPager監聽事件，當左右滑動ViewPager時選單欄被選中狀態跟著改變
    public class MyPagerChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int arg0) {
            switch (arg0) {
                case 0:
                    bt_manage.setTextColor(cl_blue  );
                    bt_status.setTextColor(Color.BLACK );
                    topTitle .setText("管理系統") ;
                    break;
                case 1:
                    bt_manage.setTextColor(Color.BLACK);
                    bt_status.setTextColor(cl_blue);
                    topTitle .setText("狀態查詢") ;
                    break;
            }

        }

    }
}

4. 補充

有些顏色、shape、圖片這里沒有給出，需要更改，
專案原始碼鏈接

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/172418.html

標籤：其他

上一篇：Android開發Activity頁面預加載

下一篇：Android系統應用Launcher的啟動流程結合原始碼詳解