一个简单到不行的loadingView加载控件小框架。

来源:互联网 发布:ug8.0数控车床编程 编辑:程序博客网 时间:2024/04/29 07:24

不管如何,都努力吧。微笑只是为了纪念下第一次。

效果,,想哭,这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>





0 0