在android中使用逐幀動畫實現自定義progressbar元件
阿新 • • 發佈:2019-02-06
一 自定義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" >
<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>定義每張圖片的顯示的順序及時間(定義幀動畫列表)
在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>
在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