Android视图交换容器,应用于发布动态,意见反馈等场景,还有抖动效果,拿走不谢!

       上次发布了 MultiPhotoContainer 多图选择容器 ，仅仅是针对需要多图的情景，如果能把编辑 交换的逻辑剥离出来，开发者只用关心业务逻辑岂不是很完美，当然这种业务逻辑并不常见，但是一旦有这种需求，UI交换编辑这一块绝对会让人头疼，肯定是一大堆的代码堆上去，让人比较蛋疼，为了一个页面浪费开发者半天时间，实在是在浪费生命啊！所以花时间把这一块做完善，交换，删除，手指弹起整个的交互体验比较好，而且可以自定义样式，非常的方便。现在来介绍如何配置和使用吧！

 

1.首先引用aar，相当于把exchangeutils导入，在build.gradle里添加

   

repositories {
    flatDir {
        dirs'libs'
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile(name:'exchangeutils', ext:'aar')
}

 

 

 

 

2.使用，这里还是以多图的情景来讲述，先上几张效果图

 

 

 

实现：

1）布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:text="这是一个交换容器，凡是有交换编辑场景的都可以用哦" />

    <com.hilo.multi.exchange.BaseDragLayer
        android:id="@+id/base_draglayer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false">

        <com.hilo.multi.exchange.BaseExchangeContainer
            android:id="@+id/base_viewgroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clipChildren="false"
            app:multi_colomns="5"
            app:multi_show_addicon="true"
            app:multi_size="@dimen/base_exchange_size">

        </com.hilo.multi.exchange.BaseExchangeContainer>
    </com.hilo.multi.exchange.BaseDragLayer>

</LinearLayout>

 

2）初始化View

 

  baseDragLayer = (BaseDragLayer) findViewById(R.id.base_draglayer);
        base_viewgroup = (BaseExchangeContainer) findViewById(R.id.base_viewgroup);
        base_viewgroup.setup(baseDragLayer);
        base_viewgroup.setLayoutType(BaseExchangeContainer.LayoutType.LayoutType_Vertical);//布局是垂直的网格布局，可以是横向的布局
        base_viewgroup.setExchangeListener(exchangeListener);
        base_viewgroup.setMaxItems(16);//最多16个Item

 

 

3）实现的交换接口

 

 

 //实现交换接口
    BaseExchangeContainer.ExchangeListener exchangeListener = new BaseExchangeContainer.ExchangeListener<String>() {
        //点击加号按钮
        @Override
        public void onAddIconClick(int maxItems) {
            MultiImageSelector selector = MultiImageSelector.create(ApiDemoActivity.this);
            selector.showCamera(true);
            selector.count(maxItems);
            selector.multi();
            selector.start(ApiDemoActivity.this);
        }

        //点击
        @Override
        public void onItemClick(int position) {
            //浏览
            Intent imageBrowserActivityIntent = new Intent();
            ArrayList<String> list = new ArrayList<>(base_viewgroup.getDataList());
            for(Object object:base_viewgroup.getDataList()){
            }
            Bundle bundleForFragment = new Bundle();
            bundleForFragment.putInt(ImageBrowserFragment.POSITION, position);
            bundleForFragment.putSerializable(ImageBrowserFragment.IMAGE_URL, list);
            imageBrowserActivityIntent.setClass(ApiDemoActivity.this,
                    ImageBrowserActivity.class);

            imageBrowserActivityIntent.putExtras(bundleForFragment);
            startActivity(imageBrowserActivityIntent);
        }

        //初始化Items，可以是null
        @Override
        public ArrayList<Pair<String, View>> onCreateItems() {
            ArrayList<Pair<String, View>> pairs = new ArrayList<>();
            ArrayList<String> paths = new ArrayList<>();
//            paths.add("/storage/emulated/0/MultiPhoto/1471505225004.jpg");
//            paths.add("/storage/emulated/0/MultiPhoto/1471505225150.jpg");
//            paths.add("/storage/emulated/0/MultiPhoto/1471505225223.jpg");
            for (String path : paths) {
                Pair<String, View> pair = addPair(path);
                pairs.add(pair);
            }
            return pairs;
        }
    };

4） 按返回键，删除按钮消失

 @Override
    public void onBackPressed() {
        if (base_viewgroup.isAnimation) {
            base_viewgroup.stopAnimation();
        } else {
            super.onBackPressed();
        }
    }

5）样式理解

 

<declare-styleable name="BaseExchangeContainer">
        <!-- 图片显示垂直间距 -->
        <attr name="multi_vertical_margin" format="dimension" />
        <!-- 图片显示水平间距 -->
        <attr name="multi_horizontal_margin" format="dimension" />
        <!-- 相对于屏幕左边距 -->
        <attr name="multi_page_margin_left" format="dimension" />
        <!-- 相对于屏幕右边距 -->
        <attr name="multi_page_margin_right" format="dimension" />
        <!-- 图片显示最大个数，默认9个 -->
        <attr name="multi_count" format="integer" />
        <!-- 图片显示列数，默认5列 -->
        <attr name="multi_colomns" format="integer" />
        <!-- 图片显示大小，可自动适配，确保显示全 -->
        <attr name="multi_size" format="dimension" />
        <!-- 图片显示圆角半径 -->
        <attr name="multi_radius" format="dimension" />
        <!-- 删除按钮替换资源ID -->
        <attr name="multi_delete_resId" format="reference" />
        <!-- 增加按钮替换资源ID -->
        <attr name="multi_add_resId" format="reference" />
        <!-- 是否显示加号按钮 -->
        <attr name="multi_show_addicon" format="boolean" />
    </declare-styleable>

 

 

 

 

 

 

OK，是不是比较简单呢？下面来看下自定义样式

资源链接：

http://download.csdn.net/detail/rocketlong/9611474

 

，可