开源UI类库的使用

Posted 2021-02-10 nangongyibin

PullToRefresh

特点:无侵入的下拉刷新，就是可用在ListView,ScrollView,GridView,ViewPager等所有能滑动的控件上，而且扩展性强，可以监听下拉进度，更改下拉和上拉的布局以及动画，github地址：https://github.com/chrisbanes/Android-PullToRefresh，其作者是Google官方android工程师ChrisBane

原理：

• PullToRefreshBase本身继承LinearLayout,在构造方法中add3个View,分别是刷新头布局，刷新脚布局，中间是refreshableView(由子类实现，子类实现的有ListView，GridView，ScrollView等所有可以滑动的布局)； 
• 在onInterceptTouchEvent方法中去判断是否应该拦截以及拖拽的方向，并通过isReadyForPull()方法判断是要拉出刷新布局还是让refreshableView本身滚动，该方法是抽象方法，由子类实现; 
• 在onTouchEvent方法中获取手指移动距离，并通过scrollTo方法滚动出刷新布局; 
• 将刷新布局抽象为LoadingLayout，并接收当前刷新布局滚动的比例，用以给上拉和下拉刷新动画提供接口，其目前实现类有RotateLoadingLayout和FlipLoadingLayout，即旋转箭头和翻转箭头效果，默认是使用RotateLoadingLayout作为刷新动画效果;

用法如下，此处以PullToRefreshListView举例:

        ptfgv.setMode(PullToRefreshBase.Mode.BOTH);
        GridView refreshableView = ptfgv.getRefreshableView();
        refreshableView.setNumColumns(3);
        ptfgv.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener2<GridView>() {
            @Override
            public void onPullDownToRefresh(PullToRefreshBase<GridView> refreshView) {
                loadData(true);
            }

            @Override
            public void onPullUpToRefresh(PullToRefreshBase<GridView> refreshView) {
                loadData(false);
            }
        });
        myAdapter = new MyAdapter();
        refreshableView.setAdapter(myAdapter);

 

pinned-section-listview

特点:让ListView的指定条目在滑动到顶部的时候固定在头部，github地址：https://github.com/beworker/pinned-section-listview

原理：

• 定义接口PinnedSectionListAdapter继承ListAdapter，并增加isItemViewTypePinned方法来判断当前是否是Section(即固定的选项)； 
• 我们所写的adapter要实现PinnedSectionListAdapter,并且按照自己的逻辑实现isItemViewTypePinned方法； 
• 定义PinnedSectionListView继承自ListView,设置onScrollListener,在onScroll方法中去判断当前firstVisiableItem是否是Section,如果是则通过dispatchDraw方法在顶部位置绘制当前Section的View，正好覆盖着firstVisiableItem的View,看起来就像是固定在头部一样;

用法如下:

只需将自己的Adapter实现PinnedSectionListAdapter，并实现isItemViewTypePinned方法，如下:

    private class MyAdapter extends BaseAdapter implements PinnedSectionListView.PinnedSectionListAdapter {

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public int getItemViewType(int position) {
            if (list.get(position) instanceof Category) {
                return 0;
            } else {
                return 1;
            }
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            int type = getItemViewType(position);
            TextView tv = null;
            if (type == 0) {
                if (convertView == null) {
                    tv = new TextView(getApplicationContext());
                    tv.setTextSize(18);
                    tv.setTextColor(Color.WHITE);
                    tv.setPadding(8, 8, 8, 8);
                    tv.setBackgroundColor(Color.parseColor("#000000"));
                } else {
                    tv = (TextView) convertView;
                }
                Category category = (Category) list.get(position);
                tv.setText(category.name);
            } else if (type == 1) {
                if (convertView == null) {
                    tv = new TextView(getApplicationContext());
                    tv.setTextSize(16);
                    tv.setTextColor(Color.BLACK);
                    tv.setPadding(6, 6, 6, 6);
                } else {
                    tv = (TextView) convertView;
                }
                Student category = (Student) list.get(position);
                tv.setText(category.name);
            }
            return tv;
        }

        @Override
        public int getViewTypeCount() {
            return 2;
        }

        @Override
        public boolean isItemViewTypePinned(int viewType) {
            if (viewType == 0) {
                return true;
            } else {
                return false;
            }
        }
    }

 

数据的准备如下，将列表数据和分类数据都添加到同一个集合：

    public void initData() {
        Category category = new Category("小学生");
        list.add(category);
        for (int i = 0; i < 10; i++) {
            list.add(new Student("小学生" + i));
        }
        list.add(new Category("中学生"));
        for (int i = 0; i < 20; i++) {
            list.add(new Student("中学生" + i));
        }
    }

 

PhotoView

一个让图片随着收缩放大移动的类库，使用简单，缩放流畅.目前大部分app的缩放效果都是使用这个，github地址：https://github.com/chrisbanes/PhotoView，其作者是Google官方Android工程师ChrisBane

原理：

• 对ImageView添加OnTouchListener和GestureDecetor用来检查触摸移动的距离，以及双击事件，多点触摸的距离， 
• 然后通过更改ImageView的Martrix来实现移动，缩放图片

用法如下：

单独使用ImageView的时候，使用PhotoView替换掉ImageView即可:

PhotoView mPhotoView = new PhotoView(this);

 

在ViewPager中使用的时候请使用HackyViewPager:

public class HackyViewPager extends ViewPager {

private boolean isLocked;

public HackyViewPager(Context context) {

    super(context);

    isLocked = false;

}

public HackyViewPager(Context context, AttributeSet attrs) {

    super(context, attrs);

    isLocked = false;

}

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

    if (!isLocked) {

        try {

            return super.onInterceptTouchEvent(ev);

        } catch (IllegalArgumentException e) {

            e.printStackTrace();

            return false;

        }

    }

    return false;

}

@Override

public boolean onTouchEvent(MotionEvent event) {

    return !isLocked && super.onTouchEvent(event);

}

public void toggleLock() {

    isLocked = !isLocked;

}

public void setLocked(boolean isLocked) {

    this.isLocked = isLocked;

}

public boolean isLocked() {

    return isLocked;

}

}

 

CutomShapeImageView

特点:可让你的ImageView自定义形状，包括但不限于圆形，矩形，三角形，以及各种不规则图形，github地址：https://github.com/MostafaGazar/CustomShapeImageView

原理：

BaseImageView在onDraw方法中去首先绘制src图片，再绘制遮罩图片(maskBitmap),需要注意的是绘制遮罩图片时候使用的Xfermode为PorterDuff.Mode.DST_IN，即在2图交集区域取目标图片的内容； 
遮罩图片通过getBitmap()方法获取，该方法由子类实现:CircleImageView的实现是返回一个圆形空白图片，RectangleImageView的实现是返回一个矩形空白图片，SvgImageView的实现是将svg格式的图片解析成bitmap;

SVG介绍：

全称为ScaleVectorGraphic,即可伸缩的矢量图; 
特点：体积小，不会失真，通过xml描述，所以可以直接被文本编辑器来修改和查看； 属于W3C标准之一; 
详情查看：http://blog.csdn.net/tianjian4592/article/details/44733123/

用法如下:

使用CircleImageView,只需给src指定底图就行:

    <com.meg7.widget.CircleImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_2" />

 

使用RectangleImageView,同样只需要指定src底图：

    <com.meg7.widget.RectangleImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_3" />

 

使用SvgImageView,需要给它指定一张svg格式的图片资源：

    <com.meg7.widget.SvgImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_4"
        app:svg_raw_resource="@raw/shape_star" />