작업 표시 줄 아래의 ProgressBar

질문 요약 : 어떻게 만들 수는 ProgressBar내부에 통합 된 ActionBar크롬 앱에처럼?

세부 정보 : Chrome에서이 스크린 샷을보십시오.

이와 같은 액션 바를 만들고 싶습니다. 작업 표시 줄 바로 아래에는 페이지로드에 따라 채워지는 ProgressBar가 있습니다. 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);
}

그러나이 코드는 다음과 같이 진행률 표시 줄이 작업 표시 줄 위에 표시 되도록합니다.

그렇다면 Chrome 앱 에서처럼 작업 표시 줄 아래에 ProgressBar를 표시하려면 어떻게해야합니까?

이것은 이제 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);
}

멋지고 간단한 튜토리얼은 이 블로그 에서 찾을 수 있습니다 .

위의 대답에 완전히 만족하지 않았기 때문에 추가 조사를 직접 수행했습니다.

그들이 사용한 트릭은 뷰 계층 구조에서 상위 뷰를 검색하고 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의 높이 인수를 사용하여 progressBar를 더 넓게 또는 더 좁게 설정할 수 있지만 -10오프셋 을 조정해야 할 수도 있습니다 .

스타일링

불행히도 진행률 표시 줄의 추악한 회색 배경을 볼 수 있습니다. 제거하려면 ID로 배경을 검색하고 숨기려고하면 작동하지 않습니다. 배경을 제거하려면 시스템 버전과 동일한 드로 블을 만들고 배경 항목을 제거해야했습니다.

요약 : 파일 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>

sdk/platforms/android-xx/data/res/drawable-xxx/프로젝트 에서 적절한 .png 드로어 블을 복사 한 다음 코드에서 추가 할 수 있습니다.

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

추가 : 불확실한 진행률 표시 줄

불확실한 진행률 표시 줄의 Pre-KitKat 버전은 매우 추하고 느립니다. 라는 새 부드러운 progressBar를 다운로드 할 수 있습니다 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);

내가 도왔 으면 좋겠어 :)

다음 클래스에서 활동을 확장하여 각각의 상단 (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>

이 스레드와 StackOverflow의 다른 스레드에서 코드를 컴파일하고 ButteryProgessbar를 구현하고 "풀다운하여 새로 고침"을 구현하는 데 사용할 수있는 프로젝트를 만들었습니다. https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

애플리케이션에서 코드를 자유롭게 사용하십시오.

여러분 감사합니다.

아래 코드를 사용하십시오. 진행률 표시 줄에서 기본 스타일 하나만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>

글쎄, 나는 내 애완 동물 앱 중 하나에 대해 비슷한 작업을 수행했으며 그것이 유일한 방법인지 또는 최선의 방법인지 확실하지 않지만 확실히 작동합니다.

로 시작하려면 오버레이 작업 표시 줄을 사용한 다음 오버레이 작업 표시 줄이 투명하도록 배경 드로어 블을 "null"로 설정합니다.

이제 활동 레이아웃에서 루트 뷰의 상단 여백을 "액션 바 높이"로 설정합니다. 이렇게 할 수 있습니다.

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

이제 작업은 활동 내용을 숨기지 않습니다.

다음으로해야 할 일은 루트 뷰 위에 액션 바와 같은 높이로 헤더 뷰를 추가하는 것입니다. 배경색을 설정하십시오. 이것은 이제 작업 표시 줄의 색상이되며 작업 표시 줄이이 헤더보기의 상단에 완벽하게 정렬되기 때문입니다.

이제 헤더보기에 진행률 표시 줄을 쉽게 배치하고 헤더보기 하단에 정렬 할 수 있습니다. 사용자에게 이것은 마치 chrome과 같이 진행 표시 줄이 작업 표시 줄 자체에있는 것처럼 보일 것입니다 ..