Program Club

작업 표시 줄 아래의 ProgressBar

proclub 2020. 10. 12. 08:20
반응형

작업 표시 줄 아래의 ProgressBar


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

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

Android 용 Chrome 스크린 샷

이와 같은 액션 바를 만들고 싶습니다. Action Bar 바로 아래에 페이지로드에 따라 채워지는 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의 대답은 진행률 표시 줄을 콘텐츠 영역에 배치하고 실제 콘텐츠에서 공간을 '훔쳐'예상치 못한 결과를 초래할 수 있습니다.

이 구현의 샘플 스크린 샷 :

진행 표시 줄

ProgressBarIndeterminate

암호

이 코드를 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>

I have compiled code from this thread as well as other threads on StackOverflow and created a project that can be used to implement ButteryProgessbar as well as "pull down to refresh". https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

Feel free to use the code in your application.

A big thanks to you guys.


Please use below code. just use one default style in progress bar as 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>

Well , I did something similar for one of my pet apps and am not sure if that's the only way or the best way to do it , but it definitely works.

To begin with , use an overlay action bar and then set the background drawable to "null" so that the overlay action bar is transparent.

Now in you activity layout , set the top margin for your root view to "actionbar height" You can do it like this.

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

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

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

이제 머리글보기에 진행률 표시 줄을 쉽게 배치하고 머리글보기의 맨 아래에 정렬 할 수 있습니다. 사용자에게는 진행 표시 줄이 마치 chrome과 같이 작업 표시 줄 자체에있는 것처럼 보일 것입니다 ..

참고 URL : https://stackoverflow.com/questions/13934010/progressbar-under-action-bar

반응형