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

    xiaoxiao2022-06-24  37

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

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

    转载请注明原文地址: https://ju.6miu.com/read-1123777.html

    最新回复(0)