首页 > 解决方案 > 显示加载图标,直到 Firebase Firestore 将数据完全加载到文本视图中

问题描述

当我的应用程序将 Firebase Firestore 数据加载到其中时,如何实现加载图标?现在,当我加载应用程序时,它显示一个空的文本视图,一旦它从数据库中获取数据,它就会弹出。我希望有一个加载屏幕,直到数据在显示之前完全加载到活动中,所以没有数据弹出。

我试图在这个网站上查看其他解决方案,但它们都来自不同的编程语言,或者我很难理解。

这是我从数据库中获取数据并将其存储在 textView 中的简单代码。

    welcomeTv = findViewById(R.id.welcomeTv);
    fStore = FirebaseFirestore.getInstance();

    fStore.collection("Users").document(FirebaseAuth.getInstance().getCurrentUser().getUid()).get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
        @Override
        public void onComplete(@NonNull Task<DocumentSnapshot> task) {

            if (task.isSuccessful() && task.getResult() != null) {
                username = task.getResult().getString("username");
                welcomeTv.setText(username);

                //other stuff
            } else {
                Toast.makeText(HomeActivity.this, "Currently logged in", Toast.LENGTH_SHORT).show();
            }


        }
    });

标签: javaandroidfirebaseandroid-studio

解决方案


加载数据后,您可以使用ProgressBar和调用隐藏进度条。ProgressBar.setVisibility(View.GONE)

首先ProgressBar在布局的其余部分添加一个外部,并将要隐藏的布局的可见性设置为消失

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"> // Initially hide all the body

        <TextView
            android:id="@+id/welcomeTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Welcome"
            app:layout_constraintBottom_toTopOf="@+id/logOutBtn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.84000003" />

        <Button
            android:id="@+id/logOutBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Log out"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

加载数据后,隐藏 ProgressBar 并使 mainContent 布局可见

ProgressBar progressBar = findViewById(R.id.progressBar); // Get ProgressBar reference
ConstraintLayout mainContent = findViewById(R.id.mainContent);
welcomeTv = findViewById(R.id.welcomeTv);
fStore = FirebaseFirestore.getInstance();


fStore.collection("Users").document(FirebaseAuth.getInstance().getCurrentUser().getUid()).get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
        @Override
        public void onComplete(@NonNull Task<DocumentSnapshot> task) {
            progressBar.setVisibility(View.GONE); // Hide Progress bar 
            mainContent.setVisibility(View.VISIBLE); // Show TextView

            if (task.isSuccessful() && task.getResult() != null) {

                username = task.getResult().getString("username");
                welcomeTv.setText(username);

                //other stuff
            } else {
                Toast.makeText(HomeActivity.this, "Currently logged in", Toast.LENGTH_SHORT).show();
            }


        }
    });

希望能帮助到你

更新:使用评论中提到的布局更新了代码。


推荐阅读