[Android]LoadingImageView

画像をWeb上から取得してImageViewに表示する場合に、
ロード中が分かるようにしたくてViewを作ってみました。

ロード中...

→

ロード後

プロジェクト一式はGumroadから購入できます。


メインとなるビューです。

 
public class LoadingImageView extends RelativeLayout {

 private Context mContext;
 private ImageView mImageView;
 ProgressBar mProgressBar;
 
    public LoadingImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  
  this.mContext = context;
  
  LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
  setLayoutParams(layoutParams);
  
  this.mImageView = new ImageView(context);
  this.mImageView.setLayoutParams(layoutParams);
  this.mImageView.setScaleType(ScaleType.CENTER_CROP);
  
  layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  layoutParams.addRule(CENTER_IN_PARENT);
  this.mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleLarge);
  this.mProgressBar.setLayoutParams(layoutParams);
//  this.mProgressBar.setVisibility(View.GONE);
  
  addView(this.mImageView);
  addView(this.mProgressBar);
 }

使い方は、 MainActivity.class

setContentView(R.layout.main);
loadingImageView = (LoadingImageView)findViewById(R.id.loadingImageView);
  
// Set ImageView default image
loadingImageView.init(R.drawable.init);

initはしてもしなくてもよいです。 ロード前の画像を設定したい場合のみ使います。
 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="wrap_content"
    android:layout_height="wrap_content"
 >
 <Button 
  android:id="@+id/button"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="load image"
     />
 <com.sample.android.LoadingImageView.LoadingImageView
  android:id="@+id/loadingImageView"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     />
</LinearLayout>

 
String imageUrl = "http:// ～～～.jpg";
loadingImageView.loadImage(imageUrl);

loadImage()にURLアドレスを渡すと画像を取得します。
取得完了したら、画像表示してプログレスバーを非表示にします。