您的位置:首页 > 移动开发 > Android开发

Dialog加载页面动画(Loding.....加载等待)三种方式

2016-12-22 14:30 429 查看
方式一:帧动画切换效果(几张图片切换)

1.drawable 下创建资源(多张图片~根据自己需要)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/a"
android:duration="150"/>
<item
android:drawable="@drawable/b"
android:duration="150"/>
<item
android:drawable="@drawable/c"
android:duration="150"/>
</animation-list>


2.mydialog.xml(普通布局)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/loadingIv"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="@drawable/s"/>
<TextView
android:id="@+id/loadingTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/loadingIv"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:text="加载中...."
android:textColor="#fff"
android:textSize="15dp"/>
</RelativeLayout>


3.MyDialog类:

public class MyDialog extends ProgressDialog{
private AnimationDrawable mAnimation;
private ImageView mImageView;
private TextView mTextView;
private String loadingTip;
private int resid;
/**
*
* @param context 上下文对象
* @param content 显示文字提示信息内容
* @param id 动画id
*/
public MyDialog(Context context, String content, int resid) {
super(context);
this.loadingTip = content;
this.resid = resid;
//点击提示框外面是否取消提示框
setCanceledOnTouchOutside(false);
//点击返回键是否取消提示框
setCancelable(false);
setIndeterminate(true);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dialog);
mTextView = (TextView) findViewById(R.id.loadingTv);
mImageView = (ImageView) findViewById(R.id.loadingIv);
mImageView.setBackgroundResource(resid);
// 通过ImageView对象拿到背景显示的AnimationDrawable
mAnimation = (AnimationDrawable) mImageView.getBackground();
mImageView.post(new Runnable() {
@Override
public void run() {
mAnimation.start();
}
});
mTextView.setText(loadingTip);
}
}
//最后在activity中进行调用,这样就完成了一个自定义的dialog提示框


4.需要dialog的Activity写下方法,调用即可

public void showMyDialog() {
dialog = new MyDialog(this, "正在加载中", R.drawable.s);
dialog.show();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
dialog.dismiss();
}
}, 5000);
}
方式二:圆形彩球旋转效果

1.建类 EaseInOutCubicInterpolator(复制)

public class EaseInOutCubicInterpolator implements TimeInterpolator{
@Override
public float getInterpolation(float input) {
if ((input *= 2) < 1.0f) {
return 0.5f * input * input * input;
}
input -= 2;
return 0.5f * input * input * input + 1;
}
}


2.建menu文件夹,建xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item android:id="@+id/action_settings"
android:title="Settings"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>


3.values下dimens.xml中添加

<dimen name="default_circle_view_size">200dp</dimen>


4.values下建attrs

<?xml version="1.0" encoding="utf-8"?>
<resources> <declare-styleable name="CircleProgress">
<attr name="color1" format="reference|color"/>
<attr name="color2" format="reference|color"/>
<attr name="color3" format="reference|color"/>
</declare-styleable>
</resources>


5.自定义view,复制

public class CircleProgress extends View {
private static final int RED = 0xFFE5282C;
private static final int YELLOW = 0xFF1F909A;
private static final int BLUE = 0xFFFC9E12;
private static final int COLOR_NUM = 3;
private int[] COLORS;
private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator();

private final double DEGREE = Math.PI / 180;
private Paint mPaint;
private int mViewSize;
private int mPointRadius;
private long mStartTime;
private long mPlayTime;
private boolean mStartAnim = false;
private Point mCenter = new Point();

private ArcPoint[] mArcPoint;
private static final int POINT_NUM = 15;
private static final int DELTA_ANGLE = 360 / POINT_NUM;
private long mDuration = 3600;

public CircleProgress(Context context) {
super(context);
init(null, 0);
}

public CircleProgress(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}

public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}

private void init(AttributeSet attrs, int defStyle) {
mArcPoint = new ArcPoint[POINT_NUM];

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);

TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
a.recycle();

COLORS = new int[]{color1, color2, color3};
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
int width = getDefaultSize(defaultSize, widthMeasureSpec);
int height = getDefaultSize(defaultSize, heightMeasureSpec);
mViewSize = Math.min(width, height);
setMeasuredDimension(mViewSize, mViewSize);
mCenter.set(mViewSize / 2, mViewSize / 2);

calPoints(1.0f);
}

@Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.translate(mCenter.x, mCenter.y);

float factor = getFactor();
canvas.rotate(36 * factor);
float x, y;
for (int i = 0; i < POINT_NUM; ++i) {
mPaint.setColor(mArcPoint[i].color);
float itemFactor = getItemFactor(i, factor);
x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
canvas.drawCircle(x, y, mPointRadius, mPaint);
}

canvas.restore();

if (mStartAnim) {
postInvalidate();
}
}

private void calPoints(float factor) {
int radius = (int) (mViewSize / 3 * factor);
mPointRadius = radius / 12;

for (int i = 0; i < POINT_NUM; ++i) {
float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i);

ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
mArcPoint[i] = point;
}
}

private float getFactor() {
if (mStartAnim) {
mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
}
float factor = mPlayTime / (float) mDuration;
return factor % 1f;
}

private float getItemFactor(int index, float factor) {
float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
if (itemFactor < 0f) {
itemFactor = 0f;
} else if (itemFactor > 1f) {
itemFactor = 1f;
}
return mInterpolator.getInterpolation(itemFactor);
}

public void startAnim() {
mPlayTime = mPlayTime % mDuration;
mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
mStartAnim = true;
postInvalidate();
}

public void reset() {
stopAnim();
mPlayTime = 0;
postInvalidate();

}

public void stopAnim() {
mStartAnim = false;
}

public void setInterpolator(TimeInterpolator interpolator) {
mInterpolator = interpolator;
}

public void setDuration(long duration) {
mDuration = duration;
}

public void setRadius(float factor) {
stopAnim();
calPoints(factor);
startAnim();
}

static class ArcPoint {
float x;
float y;
int color;

ArcPoint(float x, float y, int color) {
this.x = x;
this.y = y;
this.color = color;
}
}
}


6.写类MyProgressDialog extends ProgressDialog,对应布局main_dialog.xml

public class MyProgressDialog extends ProgressDialog{
protected CircleProgress mProgress;
protected TextView mLoadingTv;
//private AnimationDrawable mAnimation;

public MyProgressDialog(Context context) {
super(context);
//点击提示框外面是否取消提示框
setCanceledOnTouchOutside(false);
//点击返回键是否取消提示框
setCancelable(false);
setIndeterminate(true);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_dialog);
initView();
//弹出dialog
mProgress.post(new Runnable() {
@Override
public void run() {
mProgress.startAnim();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getOwnerActivity().getMenuInflater().inflate(R.menu.main_menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
private void initView() {
mProgress = (CircleProgress)findViewById(R.id.progress);
mLoadingTv = (TextView)findViewById(R.id.loadingTv);
}
}


7.布局main_dialog.xml(用自定义view)

<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:circleprogress="http://schemas.android.com/apk/res-auto"
tools:context="a1113duoji.qf.com.loding.MainActivity">
<a1113duoji.qf.com.loding.CircleProgress
android:id="@+id/progress"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
circleprogress:color1="@android:color/holo_red_light"
circleprogress:color2="@android:color/holo_green_light"
circleprogress:color3="@android:color/holo_blue_light"/>

<TextView
android:id="@+id/loadingTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/progress"
android:layout_alignStart="@+id/progress"
android:layout_below="@+id/progress"
android:text="正在加载中.."
android:textSize="15sp"/>
</RelativeLayout>


8.需要效果的Activity 写入下方法调用

public void showMyDialog() {
MyProgressDialog    dialog = new MyProgressDialog(this);//=============上下文
dialog.show();
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
dialog.dismiss();
}
}, 5000);//================动画的时间
}


效果图如下(此图来自于:https://github.com/Fichardu/CircleProgress)



方式三:几个图片上下跳动效果

1.导包

compile 'com.github.zzz40500:android-shapeLoadingView:1.0.3.2'


//弹出小框需添加下面的

repositories {
        maven {
            url "https://jitpack.io"
        }

    }

2.建menu文件夹,建xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/action_settings" android:title="@string/action_settings"
android:orderInCategory="100" app:showAsAction="never" />
</menu>


3.string 资源需添加

<resources>
<string name="action_settings">Settings</string>
</resources>


4.mydialog.xml 布局中

<com.mingle.widget.LoadingView
android:id="@+id/loadView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="50dp"
app:loadingText="加载中..."/>


5.MyDialog 类(复制不变)

public class MyDialog extends ProgressDialog {
protected LoadingView mLoadView;
public MyDialog(Context context) {
super(context);
//点击提示框外面是否取消提示框
setCanceledOnTouchOutside(false);
//点击返回键是否取消提示框
setCancelable(false);
setIndeterminate(true);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.dia);
mLoadView = (LoadingView) findViewById(R.id.loadView);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
//        getMenuInflater().inflate(R.menu.menu_view_demo, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}


6.需要dialog的Activity,写此方法,oncreate下调用

public void showMyDialog() {
mMyDialog = new MyDialog(this);
mMyDialog.show();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
mMyDialog.dismiss();
}
}, 5000);
}


效果图如下(此图来自于:https://github.com/zzz40500/android-shapeLoadingView)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android