开源框架PullToRefresh、PinnedHeaderListView、PhotoView、CustomShapeImageView

最新推荐文章于 2024-03-15 18:22:56 发布

xiaohao_880

最新推荐文章于 2024-03-15 18:22:56 发布

阅读量392

点赞数

分类专栏： Android基础知识文章标签：开源框架

本文链接：https://blog.csdn.net/qq_36166266/article/details/78028906

版权

Android基础知识专栏收录该内容

32 篇文章 0 订阅

订阅专栏

常用开源UI类库的使用

PullToRefresh：强大的下拉刷新库，作者是ChrisBane
PinnedHeaderListView：优秀的条目分割顶部固定效果
PhotoView：强大的图片跟随手势进行缩放移动的类库，作者是ChrisBane
CustomShapeImageView：强大的自定义形状的ImageView
MPAndroidChart：强大的图表用于数据统计展示的类库

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举例:

 refreshListView = (PullToRefreshListView) View.inflate(this, R.layout.activity_ptr_listview, null);
//1.设置刷新模式，可选有：只上拉，只下拉，两边都可以拉，禁用刷新(即都不可以拉),默认只有下拉刷新
refreshListView.setMode(Mode.BOTH);//设置两边都可以拉
setContentView(refreshListView);
for (int i = 0; i < 15; i++) {
    list.add(i+"碗牛肉面");
}
//2.获取refreshableView来设置数据，此处的实现是ListView
ListView listView = refreshListView.getRefreshableView();
adapter = new MyAdapter(this, list);
listView.setAdapter(adapter);
//3.设置刷新监听
refreshListView.setOnRefreshListener(new OnRefreshListener<ListView>() {
    @Override
    public void onRefresh(PullToRefreshBase<ListView> refreshView) {
        requestData(refreshListView.getCurrentMode()==Mode.PULL_FROM_END);
    }
});
//4.设置滚动到最后一个条目的监听
refreshListView.setOnLastItemVisibleListener(new OnLastItemVisibleListener() {
    @Override
    public void onLastItemVisible() {
        //do something
    }
});

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方法，如下:

class MyAdapter extends BaseAdapter implements PinnedSectionListAdapter{
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public Object getItem(int position) {
        return null;
      }
    @Override
    public long getItemId(int position) {
        return 0;
     }
    //定义条目类型
    private final int ITEM_NORMAL = 0;//普通数据条目
    private final int ITEM_SECTION = 1;//需要固定的Section条目
    /**
     * 总共2种条目类型，一种是分类条目，一种是普通的数据条目
     */
    @Override
    public int getViewTypeCount() {
        return 2;
    }
    @Override
    public int getItemViewType(int position) {
        BaseBean baseBean = list.get(position);
        if(baseBean instanceof Person){
            return ITEM_NORMAL;
        }else {
            return ITEM_SECTION;
        }
    }
    /**
     * 此处借助于itemViewType来判断是否是需要固定的条目;
     * 所以必须实现另外2个方法，就是getViewTypeCount和getItemViewType,
     * 只有viewType是ITEM_SCTION的才需要固定
     */
    @Override
    public boolean isItemViewTypePinned(int viewType) {
        return viewType==ITEM_SECTION;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView textView = new TextView(MainActivity.this);
        textView.setTextColor(Color.DKGRAY);
        textView.setPadding(15, 15, 15, 15);
        //根据条目类型来返回条目View,并且设置对应的数据
        int itemViewType = getItemViewType(position);
        switch (itemViewType) {
        case ITEM_NORMAL:
            textView.setBackgroundColor(Color.WHITE);
            Person person = (Person) list.get(position);
            textView.setText(person.getName());
            break;
        case ITEM_SECTION:
            textView.setBackgroundColor(Color.parseColor("#ff99cc00"));
            SectionItem sectionItem = (SectionItem) list.get(position);
            textView.setText(sectionItem.getSectionName());
            break;
        }
        return textView;
    } }

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

 // 准备数据
// 添加小学生分类数据
list.add(new StuCategory("小学生"));
// 初始化小学生数据
for (int i = 0; i < 12; i++) {
    list.add(new Stu("小学生 - " + i));
}
// 添加初中生分类数据
list.add(new StuCategory("初中生"));
// 初始化初中学生数据
for (int i = 0; i < 12; i++) {
    list.add(new Stu("初中生 - " + i));
}
// 添加高中生分类数据
list.add(new StuCategory("高中生"));
// 初始化高中学生数据
for (int i = 0; i < 12; i++) {
    list.add(new Stu("高中生 - " + i));
}

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

对ImageView添加OnTouchListener和GestureDecetor用来检查触摸移动的距离，以及双击事件，多点触摸的距离，
然后通过更改ImageView的Martrix来实现移动，缩放图片
用法如下：
单独使用ImageView的时候，使用PhotoView替换掉ImageView即可
(我们自己如果对imageView进行缩放可以调用setScaleX（）方法，但是我们缩放的是整个控件的大小，人家是缩放的图片大小)

uk.co.senab.photoview.PhotoView
在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:layout_marginLeft="16dp"
        android:src="@drawable/sample_2"
        android:scaleType="centerCrop">

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

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

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

//在res包下创建raw文件夹，raw其它文件都可以放，（自己可以用SvgDeveloperKeygen生成简单的svg文件，然后放到ras文件夹中）
<com.meg7.widget.SvgImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginLeft="16dp"
        android:src="@drawable/sample_4"
        app:svg_raw_resource="@raw/shape_star"
        android:scaleType="centerCrop" />

xiaohao_880

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开源框架PullToRefresh、PinnedHeaderListView、PhotoView、CustomShapeImageView

常用开源UI类库的使用PullToRefresh：强大的下拉刷新库，作者是ChrisBanePinnedHeaderListView：优秀的条目分割顶部固定效果PhotoView：强大的图片跟随手势进行缩放移动的类库，作者是ChrisBaneCustomShapeImageView：强大的自定义形状的ImageView
复制链接

扫一扫