79

问题总结：如何在 Chrome 应用程序上进行ProgressBar集成？ActionBar

详细信息：查看 Chrome 的此屏幕截图：

适用于 Android 的 Chrome 屏幕截图

我想像这样创建一个操作栏。就在操作栏下方，有一个根据页面加载填充的进度条。我从许多应用程序（例如 Feedly）中看到了这个示例，但我无法创建自己的实现。我尝试使用 Android 自己的 API 来创建它：

@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);
}

但是这段代码只会导致 ProgressBar 显示在Action Bar 上，如下所示：

我的应用截图

那么，我怎样才能让我的 ProgressBar 出现在 Action Bar 下，就像在 Chrome 应用程序上一样？

4

6 回答 6

56

我对上面接受的答案并不完全满意，所以我自己做了一些额外的研究。

我相信他们使用的技巧是他们在调用的视图层次结构中检索顶部视图并在其中DecorView添加进度条。这样，进度条会同时显示在操作栏和内容区域上。请注意，SD 的答案将进度条放入内容区域并从实际内容中“窃取”空间，这可能会导致意外结果。

此实现的示例屏幕截图：

进度条

进度条不确定

代码

只需将此代码放入onCreate某些活动的方法中，它应该可以工作：

// 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);
    }
});

您可以使用 LayoutParams 的 height 参数将 progressBar 设置得更宽或更窄，但您可能需要调整-10偏移量。

造型

不幸的是，您可以看到进度条丑陋的灰色背景。要删除它，只需按 id 搜索背景并尝试隐藏它是行不通的。要删除背景，我必须创建与系统版本相同的 drawble 并删除背景项。

TL;DR：创建文件progress_horizontal_holo_no_background_light.xml并粘贴此可绘制对象：

<?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>

将适当的 .png 可绘制对象复制sdk/platforms/android-xx/data/res/drawable-xxx/到您的项目中，然后在您可以添加的代码中：

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

额外：不确定的进度条

KitKat 之前版本的不确定进度条非常丑陋和滞后。您可以下载名为ButteryProgressBar. 只需在谷歌上搜索它（我不能再发布任何链接，因为我是新来的：[），将类添加到您的项目中，您可以简单地用这段代码替换以前的 ProgressBar 并获得清晰的不确定进度条：

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

您可能还需要简化此代码：

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();
}

到这段代码：

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);

希望我有所帮助:)

于 2014-06-08T03:13:32.263 回答
25

从以下类扩展活动以在每个类的顶部（在 ActionBar 下方）有一个 ProgressBar，以及一个getProgressBar()方法：

父类：

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;
    }
}

布局（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>
于 2013-02-25T18:19:53.050 回答
7

这是现在可以使用SwipeRefreshLayout获得的本机行为。

你可以用 a 包裹你的可滚动视图，SwipeRefreshLayout然后你只需要监听onRefresh事件：

@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);
}

可以在此博客中找到一个不错且简单的教程。

于 2015-02-20T17:30:35.320 回答
4

我已经从这个线程以及 StackOverflow 上的其他线程编译了代码，并创建了一个可用于实现 ButteryProgessbar 以及“下拉刷新”的项目。https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

随意在您的应用程序中使用代码。

非常感谢你们。

于 2014-07-26T17:20:54.690 回答
3

请使用以下代码。只需在进度条中使用一种默认样式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>
于 2014-05-12T12:47:04.920 回答
0

好吧，我为我的一个宠物应用程序做了类似的事情，但不确定这是唯一的方法还是最好的方法，但它确实有效。

首先，使用叠加操作栏，然后将背景可绘制对象设置为“null”，以便叠加操作栏是透明的。

现在在您的活动布局中，将根视图的上边距设置为“操作栏高度”您可以这样做。

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

现在该操作不会隐藏您的任何活动内容。

您现在要做的下一件事是 - 在根视图顶部添加一个标题视图，其高度与操作栏相同。为其设置背景颜色。现在这将是您的操作栏的颜色，并且由于操作栏在此标题视图的顶部完美对齐。

现在，您可以轻松地在标题视图中放置一个进度条，并将其与标题视图的底部对齐。对用户来说，这看起来好像进度条在操作栏本身上，就像 chrome ..

于 2014-04-06T20:23:28.407 回答