2011-01-23 48 views
26

Có khả năng hiển thị thanh tiến trình quay trong một nút không? ví dụ: làm nền có thể vẽ được?Thanh tiến trình Android trong nút

+0

Tôi tạo lớp của riêng mình cho nó trông giống như một nút đơn giản hơn và sạch hơn và bạn không cần phải tạo một quá trình không đồng bộ – ademar111190

+0

Tôi cũng là một giải pháp khác: Chỉ cần tạo Framelayout và đẩy Textview và một thanh tiến trình vào nó. Sau đó đặt onClickListener thành FrameLayout. Điều này sẽ giúp bạn linh hoạt hơn khi tạo bố cục :) – Fabian

Trả lời

26

Có.

Bạn có thể tạo AnimationDrawable, như được mô tả here và sau đó sử dụng thẻ drawableLeft (ví dụ) trong XML của nút của bạn. như vậy:

<Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/your_background_drawable_resource" 
     android:drawableLeft="@drawable/your_animation_drawable_resource" 
     android:text="@string/your_text_res"> 
</Button> 
+0

Thx! Cái này làm việc tốt cho tôi! – Fabian

3

tôi đã thực hiện một mẫu mã như dưới đây .. Tôi hy vọng rằng mã của tôi giúp bạn :)

[main.xml]

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center" 
    > 

    <Button 
     android:id="@+id/wheel_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/icon_spin_animation" 
     /> 
</LinearLayout> 

[icon_spin_animation.xml]

<?xml version="1.0" encoding="utf-8"?> 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/selected" android:oneshot="false"> 

    <item android:drawable="@drawable/wheel_db_update01" android:duration="50"/> 
    <item android:drawable="@drawable/wheel_db_update02" android:duration="50"/> 
    <item android:drawable="@drawable/wheel_db_update03" android:duration="50"/> 
    <item android:drawable="@drawable/wheel_db_update04" android:duration="50"/> 
    <item android:drawable="@drawable/wheel_db_update05" android:duration="50"/> 
    <item android:drawable="@drawable/wheel_db_update06" android:duration="50"/> 

</animation-list> 

[Hoạt động Mã]

public class ProgressOnTheButtonActivity extends Activity implements OnClickListener { 
    /** Called when the activity is first created. */ 
    AnimationDrawable mFrameAnimation = null; 

    boolean mbUpdating = false; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     Button btnWheel = (Button)findViewById(R.id.wheel_button); 
     btnWheel.setOnClickListener(this); 

     mFrameAnimation = (AnimationDrawable) btnWheel.getBackground(); 
    } 

    public void onClick(View v) { 
     if(v.getId() == R.id.wheel_button) { 
      if(!mbUpdating) { 
       mbUpdating = true; 
       new AsyncTaskForUpdateDB().execute(""); 
      } 
     } 

    } 

    private class AsyncTaskForUpdateDB extends AsyncTask<String, Integer, ResultOfAsyncTask> {  

     @Override 
     protected void onPreExecute() { 

      mFrameAnimation.start(); 
      super.onPreExecute(); 
     } 

     @Override 
     protected ResultOfAsyncTask doInBackground(String... strData) { 
      ResultOfAsyncTask result = new ResultOfAsyncTask(); 

      try { 
       Thread.sleep(5000); 
      } catch (InterruptedException e) { 
       e.printStackTrace(); 
      } 

      return result; 
     } 

     @Override 
     protected void onPostExecute(ResultOfAsyncTask result) { 
      mFrameAnimation.stop(); 
      mbUpdating = false; 
     } 

     @Override 
     protected void onCancelled() { 
      mFrameAnimation.stop(); 
      mbUpdating = false; 
      super.onCancelled(); 
     } 

     @Override 
     protected void onProgressUpdate(Integer... progress) { 
     } 
    } 

    private class ResultOfAsyncTask { 
     int iErrorCode = 0; 
    } 
} 
1

Một lựa chọn khác là sử dụng tiện lợi Spezi-Views, nó chứa một ProgressButton đó là khá dễ dàng để sử dụng:

<de.halfreal.spezi.views.ProgressButton 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Press me" 
     app:selectedText="I am loaded" 
     app:unselectedText="Press me again" 
     app:loadingDrawable="@drawable/spinner" 
     /> 

và trong mã:

... 
//show a rotation spinner, and no text (or the loading text) 
progressButton.enableLoadingState(); 

//show no animation, but the selected/ unselected text 
progressButton.disableLoadingState(); 
... 
+0

Cảm ơn thông tin này .... Điều này rất dễ dàng và đơn giản để sử dụng :) – Devrath

16

Có ... Chỉ cần quấn quanh cả nút và progressBar bên trong Bố cục tương đối, giống như vậy ...

<?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" 
    android:weightSum="1"> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal"> 

     <ProgressBar 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/progressBar" 
      android:layout_gravity="right" 
      android:layout_alignTop="@+id/btnConnect" 
      android:layout_alignRight="@+id/btnConnect" 
      android:layout_alignEnd="@+id/btnConnect" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Connect" 
      android:id="@+id/btnConnect" 
      android:layout_gravity="center_horizontal" 
      android:layout_marginTop="30dp" 
      android:width="200dp" 
      android:focusable="false" 
      android:focusableInTouchMode="false" /> 
    </RelativeLayout> 

    <TextView 
     android:id="@+id/txtConnectStatus" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/btnConnect" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:text="Status : Not connected" 
     android:textSize="12dp" 
     android:layout_gravity="center_horizontal" /> 

    <LinearLayout 
     android:orientation="vertical" 

Muốn đăng hình ảnh mẫu, nhưng tôi chưa có đủ danh tiếng ...;)

+0

Tôi thực sự thích phương pháp này tốt hơn khi bạn giành quyền kiểm soát nhiều hơn trong việc ẩn thanh tiến trình bằng hoạt ảnh. –

+0

Bây giờ bạn có thể đăng hình ảnh. – XoXo

1

Để thực hiện tác vụ drawable Animatable, bạn cần mở rộng lớp Button và gọi Animatable.start() để có thể rút. Tôi đã thực hiện một thực hiện cho việc này:

package com.example.yourapplication; 

import android.content.Context; 
import android.graphics.drawable.Animatable; 
import android.graphics.drawable.Drawable; 
import android.support.v7.widget.AppCompatButton; 
import android.util.AttributeSet; 

public class AnimateCompoundDrawableButton extends AppCompatButton { 

    public AnimateCompoundDrawableButton(Context context) { 
     super(context); 
    } 

    public AnimateCompoundDrawableButton(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public AnimateCompoundDrawableButton(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @Override 
    public void setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) { 
     super.setCompoundDrawables(left, top, right, bottom); 

     startIfAnimatable(left); 
     startIfAnimatable(top); 
     startIfAnimatable(right); 
     startIfAnimatable(bottom); 
    } 

    @Override 
    public void setCompoundDrawablesRelative(Drawable start, Drawable top, Drawable end, Drawable bottom) { 
     super.setCompoundDrawablesRelative(start, top, end, bottom); 

     startIfAnimatable(start); 
     startIfAnimatable(top); 
     startIfAnimatable(end); 
     startIfAnimatable(bottom); 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     super.onAttachedToWindow(); 

     // Makes a copy of the array, however we cannot do this otherwise. 
     for (Drawable drawable : getCompoundDrawables()) { 
      startIfAnimatable(drawable); 
     } 
    } 

    @Override 
    protected void onDetachedFromWindow() { 
     super.onDetachedFromWindow(); 

     // Makes a copy, however we cannot do this otherwise. 
     for (Drawable drawable : getCompoundDrawables()) { 
      stopIfAnimatable(drawable); 
     } 
    } 

    private void startIfAnimatable(Drawable drawable) { 
     if (drawable instanceof Animatable) { 
      ((Animatable) drawable).start(); 
     } 
    } 

    private void stopIfAnimatable(Drawable drawable) { 
     if (drawable instanceof Animatable) { 
      ((Animatable) drawable).stop(); 
     } 
    } 
} 
13

Tôi đã có cùng một vấn đề, vì vậy tôi đã tạo ra một nút chuyên dụng cho việc này: LoadingProgressButton

Bao gồm các nút như thế này:

<br.com.simplepass.loading_button_lib.CircularProgressButton 
android:id="@+id/btn_id" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/circular_border_shape" 
    app:spinning_bar_width="4dp" <!-- Optional --> 
    app:spinning_bar_color="#FFF" <!-- Optional --> 
    app:spinning_bar_padding="6dp" <!-- Optional --> 

Và sử dụng nó như sau:

CircularProgressButton btn = (CircularProgressButton) findViewById(R.id.btn_id) 
      btn.startAnimation(); 
       [do some async task. When it finishes] 

       //You can choose the color and the image after the loading is finished 
       btn.doneLoagingAnimation(fillColor, bitmap); 
       [or just revert de animation] 
       btn.revertAnimation(); 

enter image description here

Các vấn đề liên quan