Pertanyaan ProgressBar di bawah Bilah Tindakan


Ringkasan Pertanyaan: Bagaimana saya bisa membuat ProgressBar terintegrasi di dalam ActionBar, seperti di Aplikasi Chrome?

Detail: Lihatlah tangkapan layar ini dari Chrome:

Chrome for Android screenshot

Saya ingin membuat Bilah Tindakan seperti ini. Tepat di bawah Action Bar, ada ProgressBar yang mengisi sesuai dengan pemuatan halaman. Saya telah melihat contoh ini dari banyak aplikasi, seperti Feedly, tetapi saya belum dapat membuat implementasi sendiri. Saya mencoba menggunakan API Android sendiri untuk membuatnya:

@Override
protected void onCreate(Bundle savedInstanceState) {
    //Request Permission to display the Progress Bar...
    this.requestWindowFeature(Window.FEATURE_PROGRESS);
            this.setWindowContentView(R.layout.activity_main)
    super.onCreate(savedInstanceState);

    this.setProgressBarIndeterminate(true);
}

Tetapi kode ini hanya menyebabkan ProgressBar untuk ditampilkan lebih Bilah Tindakan, seperti:

My App Screenshot

Jadi, bagaimana saya bisa membuat ProgressBar saya muncul di bawah Bilah Tindakan, seperti di Aplikasi Chrome?


76
2017-12-18 13:24


asal


Jawaban:


Ini sekarang adalah perilaku asli yang dapat diperoleh dengan menggunakan SwipeRefreshLayout.

Anda dapat membungkus tampilan digulir dengan SwipeRefreshLayout dan kemudian Anda hanya perlu mendengarkan onRefresh acara:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    swipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container);
    swipeLayout.setOnRefreshListener(this);
    swipeLayout.setColorScheme(android.R.color.holo_blue_bright, 
            android.R.color.holo_green_light, 
            android.R.color.holo_orange_light, 
            android.R.color.holo_red_light);
}


@Override public void onRefresh() {
    new Handler().postDelayed(new Runnable() {
        @Override public void run() {
            swipeLayout.setRefreshing(false);
        }
    }, 5000);
}

Tutorial yang bagus dan sederhana dapat ditemukan di blog ini.


6
2018-02-20 17:30



Saya tidak sepenuhnya puas dengan jawaban yang diterima di atas, jadi saya melakukan penelitian ekstra sendiri.

Trik yang saya percaya mereka gunakan adalah bahwa mereka mengambil tampilan atas dalam hierarki tampilan yang disebut DecorView dan menambahkan bilah kemajuan di sana. Dengan begitu, bilah progres menampilkan keduanya di atas bilah tindakan DAN area konten. Perhatikan bahwa jawaban S.D. menempatkan progress bar ke area konten dan 'mencuri' ruang dari konten yang sebenarnya, apa yang dapat menyebabkan hasil yang tidak diharapkan.

Mencicipi tangkapan layar implementasi ini:

ProgressBar

ProgressBarIndeterminate

Kode

Masukkan saja kode ini onCreate metode beberapa aktivitas dan seharusnya berfungsi:

// create new ProgressBar and style it
final ProgressBar progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));
progressBar.setProgress(65);

// retrieve the top view of our application
final FrameLayout decorView = (FrameLayout) getWindow().getDecorView();
decorView.addView(progressBar);

// Here we try to position the ProgressBar to the correct position by looking
// at the position where content area starts. But during creating time, sizes 
// of the components are not set yet, so we have to wait until the components
// has been laid out
// Also note that doing progressBar.setY(136) will not work, because of different
// screen densities and different sizes of actionBar
ViewTreeObserver observer = progressBar.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        View contentView = decorView.findViewById(android.R.id.content);
        progressBar.setY(contentView.getY() - 10);

        ViewTreeObserver observer = progressBar.getViewTreeObserver();
        observer.removeOnGlobalLayoutListener(this);
    }
});

Anda dapat bermain dengan argumen ketinggian LayoutParams untuk mengatur progressBar lebih lebar atau lebih sempit, tetapi Anda mungkin harus menyesuaikan -10 mengimbangi.

Styling

Sayangnya, Anda dapat melihat latar belakang abu-abu yang jelek dari bilah kemajuan. Untuk menghapusnya, cukup mencari latar belakang dengan id dan mencoba menyembunyikannya tidak berfungsi. Untuk menghapus latar belakang, saya harus membuat drawable identik dari versi sistem dan menghapus item latar belakang.

TL; DR: Buat file progress_horizontal_holo_no_background_light.xml dan tempel gambar yang dapat digambar ini:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_secondary_holo_light" />
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_primary_holo_light" />
    </item>

</layer-list>

Salin sesuai .png gambar dari sdk/platforms/android-xx/data/res/drawable-xxx/ ke proyek Anda dan kemudian di kode Anda dapat menambahkan:

progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.progress_horizontal_holo_no_background_light));

Ekstra: Kemajuan Tidak Menentu

Versi pra-KitKat dari progress bar yang tidak tentu sangat jelek dan lamban. Anda dapat mengunduh progressBar baru yang disebut halus ButteryProgressBar. Hanya mencarinya di google (saya tidak bisa memposting tautan lagi, karena saya baru di sini: [), tambahkan kelas ke dalam proyek Anda dan Anda cukup mengganti ProgressBar sebelumnya dengan kode ini dan memiliki bilah kemajuan tak tentu renyah:

final ButteryProgressBar progressBar = new ButteryProgressBar(this);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));

Anda mungkin juga perlu menyederhanakan kode ini:

final TypedArray ta = c.obtainStyledAttributes(attrs, R.styleable.ButteryProgressBar);
try {
    mBarColor = ta.getColor(R.styleable.ButteryProgressBar_barColor,
            c.getResources().getColor(android.R.color.holo_blue_light));
    mSolidBarHeight = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_barHeight,
            Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity));
    mSolidBarDetentWidth = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_detentWidth,
            Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity));
} finally {
    ta.recycle();
}

ke kode ini:

mBarColor = c.getResources().getColor(android.R.color.holo_blue_light);
mSolidBarHeight = Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity);
mSolidBarDetentWidth = Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity);

Semoga saya membantu :)


54
2018-06-08 03:13



Perluas Aktivitas dari kelas berikut untuk memiliki ProgressBar di bagian atas (di bawah ActionBar) masing-masing, dan a getProgressBar() metode:

Kelas induk:

public abstract class ProgressActivity extends Activity {
    private ProgressBar mProgressBar;

    @Override
    public void setContentView(View view) {
        init().addView(view);
    }

    @Override
    public void setContentView(int layoutResID) {
        getLayoutInflater().inflate(layoutResID,init(),true);
    }

    @Override
    public void setContentView(View view, ViewGroup.LayoutParams params) {
        init().addView(view,params);
    }

    private ViewGroup init(){
        super.setContentView(R.layout.progress);
        mProgressBar = (ProgressBar) findViewById(R.id.activity_bar);
        return (ViewGroup) findViewById(R.id.activity_frame);
    }

    protected ProgressBar getProgressBar(){
        return mProgressBar;
    }
}

Tata letak (progress.xml):

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="match_parent">
<ProgressBar android:id="@+id/activity_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-8dp"
    style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
    />
  <FrameLayout android:id="@+id/activity_frame"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      />
</LinearLayout>

25
2018-02-25 18:19



Saya telah meng-compile kode dari thread ini serta thread lain pada StackOverflow dan membuat proyek yang dapat digunakan untuk mengimplementasikan ButteryProgessbar serta "pull down to refresh". https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

Jangan ragu untuk menggunakan kode di aplikasi Anda.

Terima kasih banyak untuk kalian semua.


4
2017-07-26 17:20



Silakan gunakan kode di bawah ini. cukup gunakan satu gaya default dalam bilah kemajuan sebagai style="?android:attr/progressBarStyleHorizontal"

<RelativeLayout 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="@string/hello_world" />
    <ProgressBar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:indeterminate="true"

        />

</RelativeLayout>

2
2018-05-12 12:47



Yah, saya melakukan sesuatu yang serupa untuk salah satu aplikasi hewan peliharaan saya dan saya tidak yakin apakah itu satu-satunya cara atau cara terbaik untuk melakukannya, tetapi itu pasti berhasil.

Untuk memulainya, gunakan bilah tindakan hamparan dan kemudian atur latar belakang menjadi "nol" sehingga bilah tindakan hamparan transparan.

Sekarang dalam tata letak aktivitas Anda, atur margin atas untuk tampilan root Anda ke "tinggi actionbar" Anda dapat melakukannya seperti ini.

<RelativeLayout
    ...
    android:layout_marginTop="?android:attr/actionBarSize" />

Sekarang tindakannya tidak akan menyembunyikan konten aktivitas Anda.

Hal berikutnya yang harus Anda lakukan sekarang adalah - tambahkan tampilan tajuk di bagian atas tampilan akar Anda dengan tinggi yang sama dengan bilah tindakan. Atur warna latar belakang untuk itu. Ini sekarang akan menjadi warna bilah tindakan Anda dan karena bilah tindakan sejajar dengan sempurna di atas pf tampilan header ini.

Sekarang Anda dapat dengan mudah menempatkan bilah kemajuan di tampilan tajuk dan sejajarkan ke bagian bawah tampilan tajuk. Untuk pengguna ini akan terlihat seolah-olah progress bar ada di bilah tindakan itu sendiri, seperti halnya krom ..


0
2018-04-06 20:23