不管如何,都努力吧。只是为了纪念下第一次。
效果,,想哭,这gif转换软件醉了,失真严重
基本框架类定义了一些公用方法来修改该控件的外观,其中方法如下:
setInitView(View view, LayoutParams layoutParams):设置初始布局,不能为null
setRefreshView(View view, LayoutParams layoutParams):设置需要更新的布局,可以为null
startAppearAnimation():开始显示布局动画
startDisappearAnimation():开始布局消失动画
refreshView():刷新布局
setViewSize(int width,int Height):设置布局大小,如果设置了布局的大小,会变为圆角边框,默认覆盖全屏幕。
setViewColor(int colorString):设置loadingView颜色,传入颜色是在xml里面定义的颜色id,默认透明黑色。
setViewPadding(int left,int top,int right,int bottom):设置loading view的内距离,默认都为20。
setAppearDurationMillis(int appearDurationMillis):设置显示loadingview动画持续时间,默认300毫秒。
setDisappearDurationMillis(int disappearDurationMillis):设置loadingview消失动画持续时间,默认300毫秒。
<span style="font-size:14px;">import android.content.Context;
import android.graphics.drawable.GradientDrawable;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.widget.RelativeLayout;
/**
* Created by tangjiarao on 16/8/31.
*/
public class BaseLoadingView extends RelativeLayout {
private Context context;
/**
* 布局属性
*/
private LayoutParams mParams;
/**
* loadingView默认高度
*/
private int viewHeight = ViewGroup.LayoutParams.MATCH_PARENT;
/**
* loadingView默认宽度
*/
private int viewWidth = ViewGroup.LayoutParams.MATCH_PARENT;
/**
* loadingView默认颜色
*/
private int baseView_bg =R.color.baseLoadingView_bg;
/**
* loadingView默认圆角
*/
private int baseView_radius =15;
/**
* loadingView默认padding
*/
private int baseView_paddingLeft =20;
private int baseView_paddingTop =20;
private int baseView_paddingRight =20;
private int baseView_paddingBottom =20;
/**
* LoadingView 出现动画和消失动画
*/
private AlphaAnimation disappearAnimation,appearAnimation;
/**
* 设置出现动画、消失动画默认时间
*/
private int appearDurationMillis =300;
private int disappearDurationMillis =300;
/**
* 储存初始化view及其params
*/
private View initView;
private LayoutParams initViewParams=null;
/**
* 储存初始化refreshView及其params
*/
private View refreshView;
private LayoutParams refreshViewParams=null;
/**
* 后增加view容器
*/
private RelativeLayout relativeLayout;
/**
* 每次结束loadingview后,记录relativeLayout,删除其内部对initView和refreshview的关联,解决bug
*/
private RelativeLayout lastLayout=null;
/**
* 构造函数一
* @param context
*/
public BaseLoadingView(Context context){
super(context);
this.context=context;
initViews();
}
/**
* 构造函数二
* @param context
* @param initView loading首次展现页面
* @param refreshView 后展示页面
*/
public BaseLoadingView(Context context,View initView,View refreshView){
super(context);
this.initView=initView;
this.refreshView=refreshView;
this.context=context;
initViews();
}
/**
* 初始化渐变动画
*/
private void initViews() {
appearAnimation = new AlphaAnimation(0, 1);
disappearAnimation = new AlphaAnimation(1, 0);
}
/**
* 设置布局参数
*/
protected void setConfigure(){
//为loadingView设置布局参数,这里覆盖整个屏幕
mParams = new LayoutParams(viewWidth,viewHeight);
mParams.addRule(RelativeLayout.CENTER_IN_PARENT);
setLayoutParams(mParams);
//设置padding
setPadding(baseView_paddingLeft,baseView_paddingTop,baseView_paddingRight,baseView_paddingBottom);
//为loadingView设置背景颜色、圆角
setBackgroundResource(R.drawable.base_loadview_bg);
GradientDrawable myGrad = (GradientDrawable)getBackground();
myGrad.setColor(getResources().getColor(baseView_bg));
myGrad.setCornerRadius(baseView_radius);
//如果布满整个屏幕,则不设置圆角
if (viewHeight==ViewGroup.LayoutParams.MATCH_PARENT
&&viewWidth==ViewGroup.LayoutParams.MATCH_PARENT){
myGrad.setCornerRadius(0);
}
//设置动画时间
appearAnimation.setDuration(appearDurationMillis);
disappearAnimation.setDuration(disappearDurationMillis);
//新建一个RelativeLayout布局用来装载布局文件
relativeLayout =new RelativeLayout(context);
//设置relativeLayout布局
LayoutParams mParams = new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
mParams.addRule(RelativeLayout.CENTER_IN_PARENT);
addView(relativeLayout,mParams);
}
/**
* 增加view
* @param view
* @param layoutParams
*/
private void addInnerViews(View view, LayoutParams layoutParams){
if (layoutParams==null)
relativeLayout.addView(view);
else
relativeLayout.addView(view, layoutParams);
}
/**
* 设置初始化布局
* @param view 加载的view
* @param layoutParams 加载规则,没有制null
*/
public void setInitView(View view, LayoutParams layoutParams){
this.initView =view;
this.initViewParams=layoutParams;
}
/**
* 设置刷新布局
* @param view
* @param layoutParams
*/
public void setRefreshView(View view, LayoutParams layoutParams){
this.refreshView =view;
this.refreshViewParams=layoutParams;
}
/**
* 开始出现动画
*/
public void startAppearAnimation(){
//清空上一次relativelayout布局
if (lastLayout!=null)
lastLayout.removeAllViews();
//配置LoadingView布局
setConfigure();
//加载初始化view
addInnerViews(initView, initViewParams);
super.startAnimation(appearAnimation);
}
/**
* 刷新布局
*/
public void refreshView(){
relativeLayout.removeAllViews();
addInnerViews(refreshView, refreshViewParams);
}
/**
* 开始消失动画
*/
public void startDisappearAnimation(){
super.startAnimation(disappearAnimation);
lastLayout =relativeLayout;
}
/**
* 设置布局大小
* @param width
* @param Height
*/
public void setViewSize(int width,int Height){
if (width==0&&Height==0){
this.viewWidth =ViewGroup.LayoutParams.WRAP_CONTENT;
this.viewHeight =ViewGroup.LayoutParams.WRAP_CONTENT;
return;
}
this.viewWidth =width;
this.viewHeight =Height;
}
/**
* 设置背景颜色
* @param colorString
*/
public void setViewColor(int colorString){
this.baseView_bg =colorString;
}
/**
* 设置padding
* @param left
* @param top
* @param right
* @param bottom
*/
public void setViewPadding(int left,int top,int right,int bottom){
this.baseView_paddingLeft =left;
this.baseView_paddingTop =top;
this.baseView_paddingRight = right;
this.baseView_paddingBottom =bottom;
}
/**
* 设置动画出现持续时间
* @param appearDurationMillis
*/
public void setAppearDurationMillis(int appearDurationMillis) {
this.appearDurationMillis = appearDurationMillis;
}
/**
* 设置动画消失持续时间
* @param disappearDurationMillis
*/
public void setDisappearDurationMillis(int disappearDurationMillis) {
this.disappearDurationMillis = disappearDurationMillis;
}
/**
* 返回动画实例,给调用者获取动画的监听
* @return
*/
public AlphaAnimation getAppearAnimation() {
return appearAnimation;
}
/**
* 返回动画实例,给调用者获取动画的监听
* @return
*/
public AlphaAnimation getDisappearAnimation() {
return disappearAnimation;
}
}</span>
1.加载该控件的view需要是RelativeLayout或者FrameLayout布局。
<span style="font-size:14px;"><?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:id="@+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="tplusr.loadingview.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml加载1" />
<Button
android:id="@+id/bt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xml加载2" />
<Button
android:id="@+id/bt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="code加载1" />
<Button
android:id="@+id/bt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="code加载2" />
</LinearLayout>
</RelativeLayout></span>
2.创建BaseLoadingView子类
在子类里面设置loading view的相关外观方法,但是我留到Activity里面设置了。最重要就是要为其设置初始布局还有更新布局(可选)。这两个布局通过xml来定义:
<span style="font-size:14px;">import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;
import tplusr.library.BaseLoadingView;
/**
* Created by tangjiarao on 16/9/1.
* 使用xml布局文件设置LoadingView样式
*/
public class XmlLoadingView extends BaseLoadingView {
//帧动画
private AnimationDrawable AniDraw;
private Context context;
//loadImageview
private ImageView loadImageView;
LayoutInflater flater ;
private Button b1 , b2;
public XmlLoadingView(Context context) {
super(context);
this.context=context;
flater= LayoutInflater.from(context);
setInitView();
setReFreshView();
setListener();
}
/**
* 设置开始加载时的界面
*/
private void setInitView(){
View view = flater.inflate(R.layout.init_view, null);
loadImageView=(ImageView)view.findViewById(R.id.loadimage);
loadImageView.setBackgroundResource(R.drawable.load_animation);
AniDraw = (AnimationDrawable) loadImageView.getBackground();
super.setInitView(view, null);
}
/**
* 设置更新的界面
*/
private void setReFreshView(){
View view = flater.inflate(R.layout.refresh_view, null);
super.setRefreshView(view, null);
b1 =(Button)view.findViewById(R.id.bt1);
b2 =(Button)view.findViewById(R.id.bt2);
}
/**
* 获取回调
*/
public void setListener(){
super.getDisappearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
AniDraw.stop();
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
super.getAppearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
AniDraw.start();
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
public void setOnClickListener(OnClickListener onClickListener){
b1.setOnClickListener(onClickListener);
b2.setOnClickListener(onClickListener);
}
}
</span>
init_view.xml
<span style="font-size:14px;"><?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">
<ImageView
android:id="@+id/loadimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/loadtext"
android:layout_below="@+id/loadimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="正在加载更多.."
android:layout_centerHorizontal="true"/>
</RelativeLayout></span>
refresh_view.xml
<span style="font-size:14px;"><?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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/bigTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:text="加载完成"
android:textSize="15dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="vertical">
<Button
android:id="@+id/bt1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@drawable/btn_selector"
android:text="选择1"
android:textColor="#FFF"
android:textSize="12dp"
/>
<Button
android:id="@+id/bt2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:background="@drawable/btn_selector"
android:text="选择2"
android:textColor="#FFF"
android:textSize="12dp"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout></span>
当然你也可以用代码来写这个布局:
<span style="font-size:14px;">import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.AnimationDrawable;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import tplusr.library.BaseLoadingView;
/**
* Created by tangjiarao on 16/7/15.
*
* 默认加载view
*/
public class CodeLoadingView extends BaseLoadingView {
//帧动画
private AnimationDrawable AniDraw;
private Context context;
//loadImageview
private ImageView loadImageView;
//加载图标
private int loadImage=R.drawable.load_animation;
private Button bt;
public CodeLoadingView(Context context) {
super(context);
this.context =context;
setInitView();
setReFreshView();
setListener();
}
/**
* 设置开始加载时的界面
*/
public void setInitView(){
//设置relativeLayout布局
LayoutParams mParams = new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
mParams.addRule(RelativeLayout.CENTER_IN_PARENT);
//加载过程中的图标
loadImageView = new ImageView(context);
//loadImage设置背景
loadImageView.setBackgroundResource(loadImage);
AniDraw = (AnimationDrawable) loadImageView.getBackground();
super.setInitView(loadImageView,mParams);
}
/**
* 获取回调
* 这里需要监听动画完成,然后停止图片转动。
*/
public void setListener() {
super.getDisappearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
AniDraw.stop();
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
super.getAppearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
AniDraw.start();
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
public void setOnClickListener(OnClickListener onClickListener){
bt.setOnClickListener(onClickListener);
}
/**
* 设置更新的界面
*/
public void setReFreshView(){
LayoutParams mParams = new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
mParams.addRule(RelativeLayout.CENTER_IN_PARENT);
bt =new Button(context);
bt.setText("选择");
bt.setTextColor(Color.WHITE);
bt.setBackgroundResource(R.drawable.btn_selector);
super.setRefreshView(bt, mParams);
}
}</span>
3.在Activity调用通过contentLayout的add方法来增加该控件,主要有4小步:
<span style="font-size:14px;">package tplusr.loadingview;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private XmlLoadingView xmlLoadingView;
private CodeLoadingView codeLoadingView;
private RelativeLayout contentLayout;
private Button bt1,bt2,bt3,bt4;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
/**
* 初始化
*/
public void initViews(){
contentLayout = (RelativeLayout)findViewById(R.id.contentLayout);
codeLoadingView=new CodeLoadingView(MainActivity.this);
xmlLoadingView =new XmlLoadingView(MainActivity.this);
bt1=(Button)findViewById(R.id.bt1);
bt2=(Button)findViewById(R.id.bt2);
bt3=(Button)findViewById(R.id.bt3);
bt4=(Button)findViewById(R.id.bt4);
bt1.setOnClickListener(this);
bt2.setOnClickListener(this);
bt3.setOnClickListener(this);
bt4.setOnClickListener(this);
/**
* 动画消失时要处理的事情
*/
xmlLoadingView.getDisappearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
bt1.setVisibility(View.VISIBLE);
bt2.setVisibility(View.VISIBLE);
bt3.setVisibility(View.VISIBLE);
bt4.setVisibility(View.VISIBLE);
contentLayout.removeView(xmlLoadingView);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
codeLoadingView.getDisappearAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
bt1.setVisibility(View.VISIBLE);
bt2.setVisibility(View.VISIBLE);
bt3.setVisibility(View.VISIBLE);
bt4.setVisibility(View.VISIBLE);
contentLayout.removeView(codeLoadingView);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
/**
* 模拟延迟加载
* @param flag
*/
public void loading(final int flag){
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
Message msg = new Message();
msg.what=flag;
mHandler.sendMessage(msg);
}
}).start();
}
/**
* 点击事件
* @param v
*/
public void onClick(View v) {
bt1.setVisibility(View.INVISIBLE);
bt2.setVisibility(View.INVISIBLE);
bt3.setVisibility(View.INVISIBLE);
bt4.setVisibility(View.INVISIBLE);
switch (v.getId()){
case R.id.bt1:
xmlLoadingView.setViewSize(250, 150);
xmlLoadingView.setViewColor(R.color.colorAccent);
xmlLoadingView.startAppearAnimation();
contentLayout.addView(xmlLoadingView);
loading(1);
break;
case R.id.bt2:
xmlLoadingView.setViewSize(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
xmlLoadingView.setViewColor(R.color.baseLoadingView_bg);
//1.开始布局显示动画
xmlLoadingView.startAppearAnimation();
//2.增加该控件
contentLayout.addView(xmlLoadingView);
loading(2);
break;
case R.id.bt3:
xmlLoadingView.setViewSize(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
codeLoadingView.startAppearAnimation();
contentLayout.addView(codeLoadingView);
loading(3);
break;
case R.id.bt4:
codeLoadingView.setViewSize(250, 200);
codeLoadingView.startAppearAnimation();
contentLayout.addView(codeLoadingView);
loading(4);
break;
}
}
private Handler mHandler=new Handler(){
public void handleMessage(Message msg) {
if (msg.what==1){
xmlLoadingView.startDisappearAnimation();
}
else if (msg.what==2){
//为refresh布局的按钮增加监听
xmlLoadingView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
if (view.getId() == R.id.bt1) {
Toast toast = Toast.makeText(MainActivity.this, "选择1", Toast.LENGTH_SHORT);
toast.show();
//4.开始布局消失动画
xmlLoadingView.startDisappearAnimation();
} else {
Toast toast = Toast.makeText(MainActivity.this, "选择2", Toast.LENGTH_SHORT);
toast.show();
xmlLoadingView.startDisappearAnimation();
}
}
});
//3.刷新布局
xmlLoadingView.refreshView();
}
else if (msg.what==3){
codeLoadingView.startDisappearAnimation();
}
else {
codeLoadingView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast toast = Toast.makeText(MainActivity.this, "选择", Toast.LENGTH_SHORT);
toast.show();
codeLoadingView.startDisappearAnimation();
}
});
codeLoadingView.refreshView();
}
}
};
}
</span>