码迷,mamicode.com
首页 > 其他好文 > 详细

仿招商银行载入loading效果

时间:2017-07-12 15:29:22      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:data   led   ble   htm   als   off   mode   ext   疑问   

在招商银行android手机app中。有例如以下图所看到的的loading载入效果:

技术分享


实现这个效果还是比較简单,就是自己定义dialog,设置自己想要的布局。然后设置旋转动画。

主要步骤:

1,写布局文件

2,设置dialog的主题

3,自己定义dialog继承 自Dialog

4,设置旋转动画

5。使用

第一步:编写dialog_merchantbank.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"> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:layout_centerInParent="true"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"> <ImageView android:id="@+id/iv_loading_bg" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerInParent="true" android:src="@drawable/loading_bg" /> <ImageView android:id="@+id/iv_loading_roll" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerInParent="true" android:src="@drawable/loading_roll" /> </RelativeLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="登录中,请稍后..."/> </LinearLayout> </RelativeLayout>


第二步:编写主题样式

    <style name="common_dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/white</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
第三步:自己定义MerchantBankDialog继承自Dialog

/**
 * 仿招商银行loading dialog
 */
public class MerchantBankDialog extends Dialog{

    private Context mContext;
    private static MerchantBankDialog dialog;

    public MerchantBankDialog(Context context) {
        super(context);
        mContext = context;
    }

    public MerchantBankDialog(Context context, int themeResId) {
        super(context, themeResId);
        mContext = context;
    }

    public static MerchantBankDialog createDialog(Context context){
        //1设置样式
        dialog = new MerchantBankDialog(context,R.style.common_dialog);
        //2设置布局
        dialog.setContentView(R.layout.dialog_merchantbank);
        dialog.getWindow().getAttributes().gravity = Gravity.CENTER;
        dialog.setCanceledOnTouchOutside(false);
        //dialog.setCancelable(false);// 不能够用“返回键”取消
        return dialog;
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hasFocus && dialog !=null){
            //3载入旋转动画
            ImageView iv_loading_roll = (ImageView) dialog.findViewById(R.id.iv_loading_roll);
            Animation loadingAnim = AnimationUtils.loadAnimation(
                    mContext, R.anim.rotate_loading);
            iv_loading_roll.startAnimation(loadingAnim);
        }
    }
}

第四步:编写旋转动画xml文件,rotate_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false" >
    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="restart"
        android:startOffset="-1"
        android:toDegrees="+360" />
</set>

第五步:点击显示loading提示框

<span style="white-space:pre">	</span>btn_openzhaohangloading.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MerchantBankDialog dialog = MerchantBankDialog.createDialog(MainActivity.this);
                dialog.show();
            }
        });

至此。基本功能已实现。如有疑问欢迎留言或加群讨论:196615382,如需源代码,点击下载

。。




仿招商银行载入loading效果

标签:data   led   ble   htm   als   off   mode   ext   疑问   

原文地址:http://www.cnblogs.com/llguanli/p/7155014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!