Android自定義控件 漂亮的圖片多選控件

漂亮的圖片多選控件


對(duì)比了很多圖片多選的控件讨盒,感覺都不太適合自己,靈活度較低禀苦,往往需要對(duì)源碼做大量的修改遂鹊,自己對(duì)其進(jìn)行了簡單的實(shí)現(xiàn),來更好的適應(yīng)多變的環(huán)境慧邮,本文暫時(shí)不講原理和實(shí)現(xiàn)误澳,之后會(huì)詳細(xì)講解秦躯,首先來講解一下控件的使用。

Gradle

repositories { 
    maven { url "https://jitpack.io" }
}
dependencies {
    compile 'com.github.sd6352051:android-image-picker:v1.0.1'
}

如何使用

Step 0: 添加權(quán)限

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Step 2: 添加控件的根布局

提供一個(gè)ViewGroup id 可以隨意定義倡缠,之后綁定時(shí)需要用到

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/gallery_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>      

Step 3: 在你的activity中調(diào)用此方法attachFragment(R.id.gallery_root)

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        attachFragment(R.id.gallery_root);
    }

Step 4: 實(shí)現(xiàn)接口

  @Override
    public Configuration getConfiguration() {
        //返回控件配置
        Configuration cfg=new Configuration.Builder()
                .build();
        return cfg;
    }

    @Override
    public List<PhotoEntry> getSelectPhotos() {
        //返回當(dāng)前已經(jīng)選中的圖片 沒有是返回null
        return mSelectedPhotos;
    }

    @Override
    public void onSelectedCountChanged(int count) {
        //這個(gè)方法將在你圖選擇發(fā)生變化時(shí)調(diào)用 
        // count:當(dāng)前被選中圖像數(shù)量
    }

    @Override
    public void onAlbumChanged(String name) {
        //這個(gè)方法將在相冊(cè)選擇發(fā)生變化時(shí)調(diào)用
        //name:當(dāng)前選中的相冊(cè)名稱
    }

    @Override
    public void onTakePhoto(PhotoEntry entry) {
        //這個(gè)方法將在你拍照后調(diào)用
        //entry:返回拍照后的圖片信息
    }

    @Override
    public void onChoosePhotos(List<PhotoEntry> entries) {
        //這個(gè)方法將在你調(diào)用 sendPhotos() 方法后調(diào)用
        //entries:返回你選中的圖片信息
    }

    @Override
    public void onPhotoClick(PhotoEntry entry) {
        //這個(gè)方法將在你點(diǎn)擊圖像時(shí)調(diào)用铁瞒,如果configuration hasPreview(false)時(shí) 將不回調(diào)此方法
        //entry: 返回當(dāng)前點(diǎn)擊的圖像信息
    }

Step 5: 其他方法

openAlbum(): 打開相冊(cè)彈窗

sendPhotos(): 這個(gè)方法將會(huì)被調(diào)用 onChoosePhotos(List<PhotoEntry> entries)

配置項(xiàng)

默認(rèn)配置

Configuration cfg=new Configuration.Builder()
                //是否包含相機(jī)按鈕
                .hasCamera(true)
                //圖片選中后是否包含一個(gè)浮層
                .hasShade(true)
                //是否包含圖像預(yù)覽功能慧耍,為false時(shí)點(diǎn)擊圖像將執(zhí)行反選效果丐谋,true則會(huì)調(diào)用onPhotoClick方法
                .hasPreview(true)
                //GridView間隔
                .setSpaceSize(4)
                //圖像最大寬度
                .setPhotoMaxWidth(120)
                //Checkbox 背景色
                .setCheckBoxColor(0xFF3F51B5)
                //相冊(cè)彈出默認(rèn)高度
                .setDialogHeight(Configuration.DIALOG_HALF)
                //相冊(cè)模式  DIALOG_GRID  網(wǎng)格形式  DIALOG_LIST 列表形式
                .setDialogMode(Configuration.DIALOG_GRID)
                //圖像最大選中
                .setMaximum(9)
                //圖像達(dá)到最大選中時(shí)的提示
                .setTip(null)
                //相冊(cè)標(biāo)題
                .setAblumsTitle(null)
                .build();

詳細(xì)

該控件只提供了基礎(chǔ)的圖片多選功能号俐,我可以在自己的activity中通過attachFragment(R.id.gallery_root);來完成綁定 即可顯示圖片選擇控件,
通過調(diào)用openAlbum()方法來打開相冊(cè)踪危,通過我們實(shí)現(xiàn)的一系列回調(diào)方法來獲取需要的大多數(shù)據(jù)猪落,當(dāng)圖片選擇完成后調(diào)用sendPhotos()方法即可在onChoosePhotos方法中獲取到我們選擇的詳細(xì)圖片信息,獲取到需要的數(shù)據(jù)后即可通過 activityonActivityResult 或者 eventbus 及類似控件來傳遞數(shù)據(jù) ,下面介紹一下實(shí)現(xiàn)的回調(diào)接口的作用蓝仲。

  • 1 getConfiguration : 獲取配置信息袱结,可以高度的定義控件的屬性途凫,上面有詳細(xì)講到每個(gè)屬性的作用。
  • 2 getSelectPhotos: 當(dāng)前已經(jīng)選中的圖片棚饵,例如我們第一次選擇了3張掩完,但我們還要繼續(xù)選擇且蓬,下次選擇就需要攜帶上一次選中的3張圖片的信息。
  • 3 onSelectedCountChanged:當(dāng)被選中的圖像數(shù)量發(fā)生改變將調(diào)用此方法诈胜,大部分情況我們的界面上可能需要顯示當(dāng)前選中的數(shù)量豹障,可以在此做跟新
  • 4 onAlbumChanged: 當(dāng)相冊(cè)名稱發(fā)生變化將調(diào)用次方法,如果你的界面需要此信息焦匈,可以在此獲取
  • 5 onTakePhoto: 當(dāng)拍照完成后會(huì)調(diào)用次方法先紫,可以在此獲取的剛拍的照片信息笔诵,例如我們通常會(huì)在此關(guān)閉當(dāng)前activiy,傳遞圖像信息等。
  • 6 onChoosePhotos:此回調(diào)需要手動(dòng)調(diào)用sendPhotos觸發(fā),將得到當(dāng)前選中的所有圖片信息狸膏,例如通常會(huì)在此關(guān)閉當(dāng)前圖片選中activity消略,傳遞信息到需要的地方
  • 7 onPhotoClick:此回調(diào)會(huì)受 配置項(xiàng)中hasPreview 影響个粱,為false時(shí)將不執(zhí)行此回調(diào)蚣旱,通常我們會(huì)增加圖片的瀏覽功能可以使用photoview或其他控件,當(dāng)點(diǎn)擊圖像彰触,就可以在此接口中獲取點(diǎn)擊圖像的信息。

可以通過配置項(xiàng)來充分的達(dá)到理想的效果况毅,例如通過setDialogMode(Configuration.DIALOG_GRID or Configuration.DIALOG_LIST) 來改變相冊(cè)集的布局方式

查看示例代碼

下載示例應(yīng)用

Github 歡迎 star follow

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末分蓖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子俭茧,更是在濱河造成了極大的恐慌咆疗,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件母债,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡尝抖,警方通過查閱死者的電腦和手機(jī)毡们,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昧辽,“玉大人衙熔,你說我怎么就攤上這事〗淋瘢” “怎么了红氯?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咕痛。 經(jīng)常有香客問我痢甘,道長,這世上最難降的妖魔是什么茉贡? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任塞栅,我火速辦了婚禮,結(jié)果婚禮上腔丧,老公的妹妹穿的比我還像新娘放椰。我一直安慰自己作烟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布砾医。 她就那樣靜靜地躺著拿撩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪如蚜。 梳的紋絲不亂的頭發(fā)上绷雏,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音怖亭,去河邊找鬼涎显。 笑死,一個(gè)胖子當(dāng)著我的面吹牛兴猩,可吹牛的內(nèi)容都是我干的期吓。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼倾芝,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼讨勤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起晨另,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤潭千,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后借尿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刨晴,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年路翻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狈癞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡茂契,死狀恐怖蝶桶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掉冶,我是刑警寧澤真竖,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站厌小,受9級(jí)特大地震影響恢共,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜召锈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一旁振、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦拐袜、人聲如沸吉嚣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尝哆。三九已至,卻和暖如春甜攀,著一層夾襖步出監(jiān)牢的瞬間秋泄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國打工规阀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恒序,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓谁撼,卻偏偏與公主長得像歧胁,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子厉碟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容