1. 程式人生 > >在android中使用逐幀動畫實現自定義progressbar元件

在android中使用逐幀動畫實現自定義progressbar元件

一 自定義progressbar
  <1>素材:逐幀圖片若干張(根據自己loading元件的特點製作)
  <2>定義每張圖片的顯示的順序及時間(定義幀動畫列表)
      在res/drawable目錄下,  建立一根標籤為“animation-list”的xml檔案,名稱為:myloading.xml
    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:drawable="@drawable/app_loading_001" android:duration="100"/>      
   <item android:drawable="@drawable/app_loading_002" android:duration="100"/>      
    <item android:drawable="@drawable/app_loading_003" android:duration="100"/>      
<item android:drawable="@drawable/app_loading_004" android:duration="100"/>      
<item android:drawable="@drawable/app_loading_005" android:duration="100"/>      
<item android:drawable="@drawable/app_loading_006" android:duration="100"/> 
<item android:drawable="@drawable/app_loading_007" android:duration="100"/>     
<item android:drawable="@drawable/app_loading_008" android:duration="100"/>     
<item android:drawable="@drawable/app_loading_009" android:duration="100"/>     
<item android:drawable="@drawable/app_loading_0010" android:duration="100"/>     
<item android:drawable="@drawable/app_loading_0011" android:duration="100"/>     
<item android:drawable="@drawable/app_loading_0012" android:duration="100"/>      
</animation-list>
   <3>定義progressbar佈局
   在res/layout目錄下建立一名稱為:progressbar_item.xml的檔案,具體內容如下:
   <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <ImageView
        android:id="@+id/myloading_image_id"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_marginLeft="50dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/myloading" />


    <TextView
        android:id="@+id/mylaodint_text_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dip"
        android:layout_marginLeft="18dip"
        android:text="正在載入,請稍後..."
        />
</LinearLayout>
  <4>在自定義ProgressBarItem,java類中載入progressbar_item.xml,並啟動動畫,
   具體內容如下:
package com.example.myprogressbar.progressbar;


import com.example.myprogressbar.R;


import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;


public class ProgressBarItem extends LinearLayout
{


    public ProgressBarItem(Context context)
    {
        super(context);
        init( context);
    }
    public ProgressBarItem(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init( context);
    }
    public ProgressBarItem(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init( context);
    }
    private void init(Context context)
    {
        LayoutInflater inflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View  progressBarItemView=(View)inflater.inflate(R.layout.progressbar_item, null);
        addView(progressBarItemView);
        ImageView progressImageView=(ImageView)this.findViewById(R.id.myloading_image_id);
        AnimationDrawable animationDrawable = (AnimationDrawable) progressImageView.getDrawable();
        animationDrawable.start();
    }
}
 二  使用自定義的progressbar元件
     <1>建立一Activity,及對應的佈局檔案:main_activity.xml
       <!---main_activity.xml--->
        <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"
    android:layout_margin="20dip"
    tools:context=".MainActivity" >


   <Button 
       android:id="@+id/begin_button_id"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="開始"
       />
 <Button 
       android:id="@+id/end_button_id"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/begin_button_id"
       android:layout_marginLeft="15dip"
       android:text="結束"
       />
 <com.example.myprogressbar.progressbar.ProgressBarItem
     android:id="@+id/myloading_item_id"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="20dip"
       android:layout_centerHorizontal="true"
       android:layout_below="@id/end_button_id"
       android:visibility="invisible"
     />
</RelativeLayout>
 //---activity檔名稱為:MainActivity
package com.example.myprogressbar;


import com.example.myprogressbar.progressbar.ProgressBarItem;


import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;


public class MainActivity extends Activity
{


    ProgressBarItem progressBar;
    Button startButton;
    Button endButton;
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        progressBar=(ProgressBarItem)this.findViewById(R.id.myloading_item_id);
        startButton=(Button)this.findViewById(R.id.begin_button_id);
        endButton=(Button)this.findViewById(R.id.end_button_id);
        
        startButton.setOnClickListener(ocl);
        endButton.setOnClickListener(ocl);
    }
    private View.OnClickListener ocl=new View.OnClickListener()
    {


        @Override
        public void onClick(View v)
        {
            switch(v.getId())
            {
                case R.id.begin_button_id:
                    progressBar.setVisibility(View.VISIBLE);
                    break;
                case R.id.end_button_id:
                    progressBar.setVisibility(View.GONE);
                    break;
            }
            
        }
        
    };
}

執行上面的程式,可以發現:1當“開始”按鈕按下時,自定義loading顯示,並執行。 2 當“結束”按鈕按下時,自定義loading消失。

三原始碼下載地址:http://download.csdn.net/detail/swiftwoft/4958207