全部產品
Search
文件中心

Mobile Platform as a Service:表徵圖組件

更新時間:Aug 07, 2024

AUIconView 為 iconfont 向量圖控制項,可以同時實現 TextView 及 ImageView 的功能。

iconfont 表徵圖控制項(可當做 TextView 來使用)實際是通過 TextView 的 TTF 字型檔,定義特殊的 Unicode 碼對應一類表徵圖字型。也就是說,iconfont 相當於是載入了一個字型,一個字型對應了多個表徵圖,每個圖片有一個 Unicode 碼。

每個 iconfont 集合實際就是一個 TTF 字型檔,因此可以載入多個 TTF 字型檔。每個 TTF 字型檔有一個名稱,預設 AntUI 的 TTF 字型檔名稱為 auiconfont。

效果圖

表徵圖資源

資源 ID

對應的樣本名稱

com.alipay.mobile.antui.R.string.iconfont_more

更多

com.alipay.mobile.antui.R.string.iconfont_cancel

取消

com.alipay.mobile.antui.R.string.iconfont_voice

語音

com.alipay.mobile.antui.R.string.iconfont_collect_money

收款

com.alipay.mobile.antui.R.string.iconfont_back

返回

com.alipay.mobile.antui.R.string.iconfont_user_setting

使用者佈建

com.alipay.mobile.antui.R.string.iconfont_user

使用者

com.alipay.mobile.antui.R.string.iconfont_add

添加

com.alipay.mobile.antui.R.string.iconfont_praise

點贊

com.alipay.mobile.antui.R.string.iconfont_map

地圖

com.alipay.mobile.antui.R.string.iconfont_checked

勾選

com.alipay.mobile.antui.R.string.iconfont_notice

公告

com.alipay.mobile.antui.R.string.iconfont_add_user

添加使用者

com.alipay.mobile.antui.R.string.iconfont_comment

評論

com.alipay.mobile.antui.R.string.iconfont_selected

選擇

com.alipay.mobile.antui.R.string.iconfont_bill

賬單

com.alipay.mobile.antui.R.string.iconfont_pulldown

下拉

com.alipay.mobile.antui.R.string.iconfont_scan

掃描

com.alipay.mobile.antui.R.string.iconfont_list

列表

com.alipay.mobile.antui.R.string.iconfont_delete

刪除

com.alipay.mobile.antui.R.string.iconfont_share

分享

com.alipay.mobile.antui.R.string.iconfont_search

搜尋

com.alipay.mobile.antui.R.string.iconfont_complain

投訴

com.alipay.mobile.antui.R.string.iconfont_qrcode

二維碼

com.alipay.mobile.antui.R.string.iconfont_unchecked

取消勾選

com.alipay.mobile.antui.R.string.iconfont_right_arrow

右箭頭

com.alipay.mobile.antui.R.string.iconfont_help

協助

com.alipay.mobile.antui.R.string.iconfont_group_chat

群聊

com.alipay.mobile.antui.R.string.iconfont_contacts

連絡人

com.alipay.mobile.antui.R.string.iconfont_setting

設定

com.alipay.mobile.antui.R.string.iconfont_phone_book

通訊錄

com.alipay.mobile.antui.R.string.iconfont_phone_contact

手機連絡人

介面說明

    /**
     * 設定圖片資源 ID
     * @param resId
     * @return
     */
    @Override
    public AUIconView setImageResource(int resId) {
        if (resId == 0) {
            return this;
        }
        clearView();
        initImageView();
        imageView.setImageResource(resId);
        this.addView(imageView);
        return this;
    }

    /**
     * 設定圖片資源 drawable
     * @param drawable
     * @return
     */
    @Override
    public IconfontInterface setImageDrawable(Drawable drawable)

    /**
     * 設定 iconfont 顏色
     * @param color
     * @return
     */
    public AUIconView setIconfontColor(int color) 

    /**
     * 設定 iconfont 顏色 ColorStateList
     * @param color
     * @return
     */
    public AUIconView setIconfontColorStates(ColorStateList color)


    /**
     * 設定 view 的大小,單位 px
     *
     * @param size
     */
    public AUIconView setIconfontSize(float size)


    /**
     * 設定 view 的 iconfont 資源或文本
     * @param text
     * @return
     */
    @Override
    public AUIconView setIconfontUnicode(String text)

程式碼範例

  • 設定表徵圖的資訊:

    AUIconView iconView = (AUIconView) convertView.findViewById(R.id.icon_view);
    iconView.setIconfontUnicode(iconUnicode);
    
    //例如 
    //iconView.setIconfontUnicode(getResources().getString(com.alipay.mobile.antui.R.string.iconfont_phone_contact));
  • 設定表徵圖的顏色:

    <com.alipay.mobile.antui.iconfont.AUIconView
            android:id="@+id/icon_view"
            android:layout_width="@dimen/size"
            android:layout_height="@dimen/size"
            app:iconfontColor="@com.alipay.mobile.antui:color/AU_COLOR_APP_GREEN"
            app:iconfontUnicode="@com.alipay.mobile.antui:string/iconfont_back"/>
    
    //or:
    iconView.setIconfontColor(color)
    iconView.setIconfontColorStates(colorStateList)