技术周报 Gif图片 LoadingView



这是在技术周报中看到的loading动画,实现的gif动画。

学习了该代码,感谢原创作者,感谢技术周报。

首先需要依赖两个第三方jar,分别是:

显示带模糊效果的DialogFragment 

compile 'fr.tvbarthel.blurdialogfragment:lib:2.1.5'
播放gif动画的ImageView 
compile 'pl.droidsonroids.gif:android-gif-drawable:1.1.+'
开始正式写代码:

继承BlurDialogFragment (显示带模糊效果的DialogFragment 

public class LoadingView extends BlurDialogFragment {
    private Dialog dialog;
    private GradientDrawable gd;
    private int mRadius = 10, tempRadius = 10; //半径
    private float mDownScaleFactor = 5.0f, tempDownScaleFactor = 5.0f;
    private boolean mDimming = true; //变暗,变淡
    private boolean mBlurredActionBar = false; // 模糊不清的bar
    private int cornerRadius = 30; //圆角半径
    private int backGroundColor = Color.parseColor("#001991EC"); // 背景颜色
    private GifImageView loadingView;
    private int id;

    public LoadingView() {
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        if (dialog == null) {
            dialog = new Dialog(getActivity(), R.style.loading_dialog);
            dialog.setContentView(R.layout.dialong_loading);
            dialog.setCanceledOnTouchOutside(true); // 点击dialog外面是否消失
            dialog.getWindow().setGravity(Gravity.CENTER); // 居中显示
            gd = new GradientDrawable();
            gd.setCornerRadius(cornerRadius);
            loadingView = (GifImageView) dialog.findViewById(R.id.loadingView);
            if (id == 0) {
                id = R.drawable.num0;
            }
            setBackGroundColor(BitmapUtil.getPixColor(BitmapFactory.decodeResource(getResources(), id)));
            loadingView.setImageResource(id);
            gd.setColor(backGroundColor);
            dialog.findViewById(R.id.mBackground).setBackground(gd);
        }
        return dialog;
    }

    private void setResource() {
        if (dialog == null) {
            return;
        }
        setBackGroundColor(BitmapUtil.getPixColor(BitmapFactory.decodeResource(getResources(), id)));
        loadingView.setImageResource(id);
        gd.setColor(backGroundColor);
        dialog.findViewById(R.id.mBackground).setBackground(gd);
    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        super.onDismiss(dialog);
        this.dialog = null;
    }

    public void setImageResource(int id) {
        this.id = id;
        setResource();
    }

    public void setBackgroundResource(int id) {
        this.id = id;
        setResource();
    }
    public GifImageView getmGifImageView() {
        return loadingView;
    }

    public void setBlurredActionBar(boolean mBlurredActionBar) {
        this.mBlurredActionBar = mBlurredActionBar;
    }

    // 设置Dialog背景
    public void setBackGroundColor(int backGroundColor) {
        this.backGroundColor = backGroundColor;
        gd.setColor(backGroundColor);
        dialog.findViewById(R.id.mBackground).setBackground(gd);
    }

    public void setRadius(int mRadius) {
        this.mRadius = mRadius;
    }

    public void setDownScaleFactor(float mDownScaleFactor) {
        this.mDownScaleFactor = mDownScaleFactor;
    }

    public void setDimming(boolean mDimming) {
        this.mDimming = mDimming;
    }

    @Override
    protected boolean isDimmingEnable() {
        return mDimming;
    }

    @Override
    protected boolean isActionBarBlurred() {
        return mBlurredActionBar;
    }

    @Override
    protected float getDownScaleFactor() {
        return mDownScaleFactor;
    }

    @Override
    protected int getBlurRadius() {
        return mRadius;
    }

    @Override
    protected boolean isDebugEnable() {
        return false;
    }
}

上面有用到BitmapUtil,代码如下:

public class BitmapUtil {
    public static int getPixColor(Bitmap bitmap) {
        return bitmap.getPixel(5, 5);
    }
}
style中的代码:

  <style name="loading_dialog"
        parent="@android:style/Theme.Holo.Light.Dialog"> <!--在系统Dialog样式基础上,相当于继承系统样式-->
       <item name="android:windowFrame">@null</item>  <!--Dialog的windowFragme框为无-->
        <item name="android:windowIsFloating">true</item> <!--是否浮现在Activity之上-->
        <item name="android:windowIsTranslucent">true</item> <!--Dialog是否为半透明-->
        <item name="android:windowNoTitle">true</item> <!--Dialog是否显示title-->
        <item name="android:background">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item> <!--Dialog背景-->
        <item name="android:backgroundDimAmount">0.6</item>
        <item name="android:backgroundDimEnabled">true</item> <!--Dialog背景是否模糊显示-->
    </style>

dialog的布局文件: 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mBackground"
android:layout_width="match_parent"
android:layout_height="match_parent">

<pl.droidsonroids.gif.GifImageView
    android:id="@+id/loadingView"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerInParent="true"
    android:layout_margin="10dp" />
</RelativeLayout>
MainActivitty的代码如下:
public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private MyRecyclerViewAdapter adapter;
    private List<String> datas;
    private LoadingView loadingView;
    private int[] gifs={R.drawable.num0,R.drawable.num1,R.drawable.num2,R.drawable.num3
    ,R.drawable.num4,R.drawable.num5,R.drawable.num6,R.drawable.num7,R.drawable.num8
    ,R.drawable.num9,R.drawable.num10,R.drawable.num11,R.drawable.num12,R.drawable.num13
    ,R.drawable.num14,R.drawable.num15,R.drawable.num16,R.drawable.num17,R.drawable.num18
    ,R.drawable.num19,R.drawable.num20,R.drawable.num21,R.drawable.num22,R.drawable.num23
    ,R.drawable.num_mengmeng};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        adapter = new MyRecyclerViewAdapter();
        datas = new ArrayList<>();
        initData();
        adapter.setData(datas);
        loadingView=new LoadingView();
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);
    }
private void initData(){
    for (int i = 1; i < gifs.length+1; i++) {
        datas.add("GifDialog: "+i);
    }
}
    public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
        private List<String> datas;

        public MyRecyclerViewAdapter() {
        }

        public void setData(List<String> datas) {
            this.datas = datas;
            notifyDataSetChanged();
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_myrecyclerview, null, false);
            return new MyViewHolder(view);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, final int position) {
            final String data = datas.get(position);
            holder.textView.setText(data);
            holder.textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    loadingView.setImageResource(gifs[position]);
                    loadingView.show(getFragmentManager(),data);
                }
            });
        }

        @Override
        public int getItemCount() {
            return datas != null && datas.size() > 0 ? datas.size() : 0;
        }

        class MyViewHolder extends RecyclerView.ViewHolder {
            private Button textView;

            public MyViewHolder(View itemView) {
                super(itemView);
                textView = (Button) itemView.findViewById(R.id.recyclerViewitem);
            }
        }
    }
}

其中最后一个gif图是我自己加上去的(看到这gif,我也是挺醉的。与上面的动画形成了鲜明的对比)

整个代码实现起来,基本没有什么难度。

再次感谢原创作者,感谢技术周报。

原创作者作品代码下载链接:

https://github.com/Rogero0o/GifLoadingView

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值