开源UI类库的使用

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" />

原文地址:https://www.cnblogs.com/nangongyibin/p/10421686.html

时间: 2024-10-10 11:19:37

开源UI类库的使用的相关文章

Android 图标上面添加提醒使用开源UI类库 Viewbadger

Viewbadger 1.BadgeView主要是继承了TextView,所以实际上就是一个TextView,底层放了一个label,可以自定义背景图,自定义背景颜色,是否显示,显示进入的动画效果以及显示的位置等等 2.BadgeView是一个GitHub开源的项目,下载地址是:https://github.com/jgilfelt/android-viewbadger 3.这个开源项目引用的方法很简单把android-viewbadger.jar引入到项目中就可以直接使用了,它提供的Demo已

Android 图标上面添加提醒(二)使用开源UI类库 Viewbadger

版权声明:本文为博主原创文章,未经博主允许不得转载. 上一篇讲到用canvas进行绘制得到对应最终的bitmap. 在实际应用中,我们除了给图标添加数字外,也有可能加一些红色方块之类的图标作为新功能的提醒. 那么有没有什么方法,很方便地给图标添加提醒icon或者数字呢? 有的,还是得借助于开源项目ViewBadger,这个是github上的地址: https://github.com/jgilfelt/android-viewbadger 还是先看下效果图: 其用法非常简单: 首先是添加数字:

开源分享:C# Winform UI类库,目前有窗体及TrackBar等几个控件

现在跟大家分享一个我原创的Winform UI方面的类库,该类库目前拥有GMForm窗体类,以及GMVScrollBar,GMHScrollBar,GMTrackBar,GMProgressBar,GMRollingBar共5个控件,下面先看看窗体及控件的效果图. 1. 类库实现的Chrome风格的多标签浏览器效果如下: 2. 运行时多主题切换示例 3. 控件运行效果 GMForm窗体类是通过拦截Windows消息,然后重写OnPaint()方法来实现的,控件则是直接继承Control类,用GD

[转]非常实用的15款开源PHP类库

源文件:http://www.csdn.net/article/2013-10-09/2817123-PHP-Libraries 英文原文:https://codegeekz.com/useful-php-libraries-and-classes-for-developers/ 1.Requests Requests是一个用PHP编写的HTTP库,遵循ISC开源协议,托管在GitHub上.Requests取代了Python HTTP/1.1以外的一切工作———让你与Web服务可以无缝的结合.

c# ASP.Net 使用开源免费类库操作Excel

主要找到以下类库: MyXls(http://sourceforge.net/projects/myxls/) Koogra(http://sourceforge.net/projects/koogra/) ExcelLibrary(http://code.google.com/p/excellibrary/) ExcelPackage(http://excelpackage.codeplex.com/) EPPlus(http://epplus.codeplex.com/) LinqToExc

15款开源PHP类库

PHP库给开发者提供了一个标准接口,它帮助开发者在PHP里充分利用面向对象编程.这些库为特定类型的内置功能提供了一个标准的API,允许类可以与PHP引擎进行无缝的交互.此外,开发者使用这些类库还可以简化工作流程,提供工作效率. 下面就一起来看看这些非常实用且免费的类库吧,希望它们能助你一臂之力. 1.Requests Requests是一个用PHP编写的HTTP库,遵循ISC开源协议,托管在GitHub上.Requests取代了Python HTTP/1.1以外的一切工作———让你与Web服务可

非常实用的15款开源PHP类库

PHP库给开发者提供了一个标准接口,它帮助开发者在PHP里充分利用面向对象编程.这些库为特定类型的内置功能提供了一个标准的API,允许类可以与PHP引擎进行无缝的交互.此外,开发者使用这些类库还可以简化工作流程,提供工作效率. 下面就一起来看看这些非常实用且免费的类库吧,希望它们能助你一臂之力. 1.Requests Requests是一个用PHP编写的HTTP库,遵循ISC开源协议,托管在GitHub上.Requests取代了Python HTTP/1.1以外的一切工作———让你与Web服务可

JQuery.UI类库AutoComplete 调用WebService进行模糊查询

1.介绍jQuery.UI中autocomplete参数介绍. 此语法引用于: http://www.jb51.net/article/24219.htm 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显

【转载】VC++中的图像类型转换--使用开源CxImage类库

一.CxImage类库简介 这只是翻译了CxImage开源项目主页上的部分简介及简单使用. CxImage类库是一个优秀的图像操作类库.它可以快捷地存取.显示.转换各种图像.有的读者可能说,有那么多优秀的图形库,如 OpenIL,FreeImage,PaintLib等等,它们可谓是功能强大,齐全,没必要用其它的类库.但我要说,这些类库基本上没有免费的,使用这些类库,你要被这样那样的许可协议所束缚.在这点上,CxImage类库是完全免费的.另外,在使用上述类库时,你会遇到重重麻烦.因为它们大部分是