2. 程式人生 > >自定義實現微信通訊錄效果View

自定義實現微信通訊錄效果View

阿新 • • 發佈：2019-01-30

歡迎訪問我的個人獨立部落格 ittiger.cn，原創文章，未經允許不得隨意轉載。

前言

在使用App過程中，經常會有使用到聯絡人或城市列表的場景，其實這兩種效果是一樣的，都是右邊有個索引列表，點選索引列表可跳轉到指定字母開頭的聯絡人或城市上去，同時向上滑動過程中頭部會有個顯示當前聯絡人首字母的介面固定不動。下面我以微信通訊錄的效果作為例子，介紹我是如何實現一個這樣效果自定義View的思路和過程。

實現效果

思路分析

既然要高仿實現微信通訊錄的效果，那我們來先看看微信通訊錄的效果
圖片名稱

微信通訊錄效果分析

通過對微信通訊的效果進行分析之後，得出如下幾點：
1. 通訊錄展示分為兩部分：
2. 主體：聯絡人列表
3. 索引條：右邊字母索引條
2. 主體聯絡人列表又分為三部分：
3. 聯絡人姓名和頭像展示
4. 根據聯絡人姓名的首字母進行分組，每組開頭都會顯示組名稱(首字母)，並按字母順序排序
5. 列表開頭的四個選單，可以看成是一個特殊組資料，但是無組名稱展示
3. 索引條中的內容與聯絡人列表中的所有組字母一樣，同時點選索引條中的字母會將列表定位到當前字母所代表的聯絡人組，因此索引條的每個字母會與該字母所代表聯絡人組的位置有個一一對應關係
4. 點選索引條中的↑

會定位到列表頭部的四個選單上，因此可以將↑與四個選單作為一組對應關係，只是該選單組無組名稱
5. 點選索引條的某個字母時，列表中間會有該字母的提示顯示
5. 列表向上滑動時當前組的組名稱固定在列表頭部顯示不動，直到下一組組名稱滑動到頂部時，原來固定不動的組名稱檢視開始往上滑出，下一組組名稱頂替上去

實現思路分析

  1. 既然要展示聯絡人列表，所以我採用RecyclerView
  2. 滑動過程中頂部會有個檢視固定不動，而RecyclerView滑動時不可能有子檢視固定不動，因此我採用一個獨立的檢視View來作為這個固定不動的頂部檢視顯示組名稱，在滑動過程中控制該View的顯示和隱藏及其內容的變化，顯然這個時候就需要父檢視將RecyclerView
    和這個頭部檢視View包裝起來
  3. 索引條因為是一個字母索引列表，因此我採用自定義View來繪製這些字母，在繪製過程中每個字母在索引條中要水平居中，而當列表頭部有固定顯示某個組名稱(字母)時，索引條中對應的字母會有一個紅色的圓作為該字母的背景，同時字母在圓中居中顯示
  4. 點選索引條的字母時，列表中間出現的字母提示也採用一個獨立的View顯示，並將該View放到與RecyclerView所處的同一父檢視。
  5. 索引條中的每個字母都需要與列表中對應組所在的位置索引有個一一對應的關係
  6. 因為微信通訊錄中頂部的四個選單與其他聯絡人具有不同的行為和展示方式，因此最終實現的View需要支援自定義顯示不同的頭部檢視及對應的索引字母

實現細節

下面我介紹下我在實現過程中的一些要點

資料處理

使用者資料

一般應用在實現過程中，拿到的只有具體的聯絡人資料，而沒有聯絡人對應的首字母，如果說我們自定義的View需要開發者將聯絡人對應的首字母也傳進來，那這個自定義View寫的也太lower了，對開發者太不友好了。因此我們最終實現的View所需要的資料就是開發者能拿到的聯絡人資料即可，這樣的話就需要我們在實現View的過程中將開發者傳遞過來的聯絡人資料進行處理，然後得到我們在RecyclerView中展示的實際資料(聯絡人+字母索引)。

既然要對聯絡人資料進行處理得到該聯絡人的首字母，所以我定義了一個實體介面，所有的聯絡人資料實體必須實現這個介面以便告知我們需要對那個資料欄位進行處理得到其索引首字母，具體介面如下：

public interface BaseEntity {
    /**
     * 要索引的欄位資料資訊，例如聯絡人中對姓名進行索引，則此處返回姓名欄位值
     * @return
     */
    String getIndexField();
}

展示資料

列表在展示過程中有兩種型別資料，一種是聯絡人資料，一種是聯絡人所在組的組名稱(索引值)，所以最終在RecyclerView中進行展示時使用使用者資料實體BaseEntity是無法達到這種展示效果的，因此我定義了一個RecyclerView實際展示資料的實體類，如下：

public class IndexStickyEntity<T> {
    /**
     * 當前資料項的型別，自動轉換賦值
     */
    private int mItemType = ItemType.ITEM_TYPE_CONTENT;
    /**
     * 當前資料的索引值，自動轉換賦值(索引條中顯示的文字)
     */
    private String mIndexValue;
    /**
     * 索引檢視顯示的索引名稱（組名稱）
     */
    private String mIndexName;
    /**
     * 原始資料，使用者實際展示的資料,用於檢視的繫結
     * 當次值為null時，則表示此實體代表一個Index資料
     * T extends BaseEntity
     */
    private T mOriginalData;
    /**
     * 當前資料項的拼音
     */
    private String mPinYin;

    ...  setter & getter
}

public class ItemType {
    /**
     * 列表中普通資料項型別，例如聯絡人列表中的：聯絡人資訊項
     */
    public static final int ITEM_TYPE_CONTENT = 1000000;
    /**
     * 列表中索引項型別，例如聯絡人列表中的：A,B,C...等索引資料
     */
    public static final int ITEM_TYPE_INDEX = 2000000;

    /**
     * 列表中增加頭部索引資料(如自定義的常用聯絡人)
     */
    public static final int ITEM_TYPE_INDEX_HEADER = 3000000;
    /**
     * 列表中增加底部索引資料
     */
    public static final int ITEM_TYPE_INDEX_FOOTER = 4000000;
}

使用者資料 –>展示資料

在拿到使用者的聯絡人資料後，進行轉換處理得到真實展示資料，實現如下，程式碼中註釋比較清晰，就不一一解釋其實現邏輯了：

public class ConvertHelper {
    /**
     * 轉換過程中，如果待索引欄位資訊為非字母串，則將其索引值設為：#
     */
    public static final String INDEX_SPECIAL = "#";

    public static class ConvertResult<T> {
        //轉換後得到的實際展示資料列表，包括聯絡人資料+組名稱資料(索引名稱)
        private List<IndexStickyEntity<T>> mIndexStickyEntities = new ArrayList<>();
        //索引條中展示的資料列表
        private List<String> mIndexValueList = new ArrayList<>();
        //索引條中展示資料與對應組在列表中位置索引的一一對映
        private Map<String, Integer> mIndexValuePositionMap = new HashMap<>();

        public List<IndexStickyEntity<T>> getIndexStickyEntities() {

            return mIndexStickyEntities;
        }

        public List<String> getIndexValueList() {

            return mIndexValueList;
        }

        public Map<String, Integer> getIndexValuePositionMap() {

            return mIndexValuePositionMap;
        }
    }

    //拿到資料後呼叫此方法進行資料轉換處理
    public static <T extends BaseEntity> ConvertResult<T> transfer(List<T> list) {

        ConvertResult<T> convertResult = new ConvertResult<T>();
        //使用TreeMap自動按照Key(字母索引值)進行排序
        TreeMap<String, List<IndexStickyEntity<T>>> treeMap = new TreeMap<>(ComparatorFactory.indexValueComparator());
        for(int i = 0; i < list.size(); i++) {
            IndexStickyEntity<T> entity = originalEntityToIndexEntity(list.get(i));

            if(treeMap.containsKey(entity.getIndexValue())) {//Map中已存在此索引值
                treeMap.get(entity.getIndexValue()).add(entity);
            } else {
                List<IndexStickyEntity<T>> indexStickyEntities = new ArrayList<>();
                indexStickyEntities.add(entity);
                treeMap.put(entity.getIndexValue(), indexStickyEntities);
            }
        }
        for(String indexValue : treeMap.keySet()) {
            //建立組名稱展示資料實體
            IndexStickyEntity<T> indexValueEntity = createIndexEntity(indexValue, indexValue);

            //將索引值新增到索引值列表中
            convertResult.getIndexValueList().add(indexValue);
            //按順序將索引實體新增到列表中
            convertResult.getIndexStickyEntities().add(indexValueEntity);
            //將索引值與索引值在結果列表中的位置進行對映
            convertResult.getIndexValuePositionMap().put(indexValue, convertResult.getIndexStickyEntities().size() - 1);

            //得到當前索引值下的索引資料實體
            List<IndexStickyEntity<T>> indexStickyEntities = treeMap.get(indexValue);
            //對資料實體按自然進行排序
            Collections.sort(indexStickyEntities, ComparatorFactory.<T>indexEntityComparator());
            //將排序後的實體列表按順序加入到結果列表中
            convertResult.getIndexStickyEntities().addAll(indexStickyEntities);
        }

        return convertResult;
    }

    /**
     * 原始資料轉換成展示的索引資料
     * @param originalEntity
     * @param <T>
     * @return
     */
    public static <T extends BaseEntity> IndexStickyEntity<T> originalEntityToIndexEntity(T originalEntity) {

        IndexStickyEntity<T> entity = new IndexStickyEntity<>();
        T item = originalEntity;
        String indexFieldName = item.getIndexField();
        String pinyin = PinYinHelper.getPingYin(indexFieldName);
        String indexValue;
        if(PinYinHelper.isLetter(pinyin)) {//首字元是否為字母
            indexValue = pinyin.substring(0, 1).toUpperCase();
        } else {//非字母以#代替
            indexValue = INDEX_SPECIAL;
        }
        entity.setPinYin(pinyin);
        entity.setOriginalData(item);
        entity.setIndexValue(indexValue);
        entity.setIndexName(indexValue);
        return entity;
    }

    /**
     * 根據索引值建立索引實體物件
     * @param indexValue
     * @param <T>
     * @return
     */
    public static <T extends BaseEntity> IndexStickyEntity<T> createIndexEntity(String indexValue, String indexName) {

        //根據索引值建立索引實體物件
        IndexStickyEntity<T> indexValueEntity = new IndexStickyEntity<>();
        indexValueEntity.setIndexValue(indexValue);
        indexValueEntity.setPinYin(indexValue);
        indexValueEntity.setIndexName(indexName);
        indexValueEntity.setItemType(ItemType.ITEM_TYPE_INDEX);
        return indexValueEntity;
    }
}

SideBar實現

SideBar繪製

  1. 初始化SideBar相關繪製引數
  2. 根據索引列表計算SideBar的實際高度，並得到SideBar的最終高度
  3. 根據SideBar高度計算其每項的高度
  4. 繪製所有的索引值到檢視上，並根據選中情況繪製當前選項的圓形背景

關鍵程式碼如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int height = MeasureSpec.getSize(heightMeasureSpec);
    if (mValueList.size() > 0) {
        //計算SideBar的實際高度
        mCalViewHeight = (int) (((mValueList.size() - 1) * mTextPaint.getTextSize() + mFocusTextPaint.getTextSize()) + (mValueList.size() + 1) * mTextSpace);
    }

    if (mCalViewHeight > height) {//實際高度超過可用高度
        mCalViewHeight = height;
    }

    super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(mCalViewHeight, MeasureSpec.EXACTLY));
}

@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);
    if(mValueList.size() == 0) {
        return;
    }
    //計算每項的高度
    mItemHeight = ((float) getHeight()) / mValueList.size();

    float radius = Math.min(getWidth() / 2, mItemHeight / 2);//選中狀態時圓形背景半徑
    for(int i = 0; i < mValueList.size(); i++) {
        if(mSelectPosition == i) {
            //計算文字垂直居中的基準線
            float baseline = mItemHeight / 2 + (mFocusTextPaint.getFontMetrics().descent - mFocusTextPaint.getFontMetrics().ascent) / 2 - mFocusTextPaint.getFontMetrics().descent;
            canvas.drawCircle(getWidth() / 2, mItemHeight / 2 + mItemHeight * i, radius, mFocusTextBgPaint);
            canvas.drawText(mValueList.get(i), getWidth() / 2, baseline + mItemHeight * i, mFocusTextPaint);
        } else {
            float baseline = mItemHeight / 2 + (mTextPaint.getFontMetrics().descent - mTextPaint.getFontMetrics().ascent) / 2 - mTextPaint.getFontMetrics().descent;
            canvas.drawText(mValueList.get(i), getWidth() / 2, baseline + mItemHeight * i, mTextPaint);
        }
    }
}

點選SideBar選中

SideBar繪製成功後，在使用過程中還有一個重要的場景需要實現，那就是我們點選SideBar的時候要知道我們當前點選的是SideBar中的哪個選項，具體實現思路是這樣的：根據當前觸控的y座標(其實是相對於檢視座標系)和每個選項的高度計算當前觸控點在哪個選項內，具體實現程式碼如下：

@Override
public boolean onTouch(View v, MotionEvent event) {

    int touchPosition = getPositionForPointY(event.getY());
    if(touchPosition < 0 || touchPosition >= mValueList.size()) {
        return true;
    }
    if(mOnSideBarTouchListener != null) {
        //此介面監聽主要用於列表跳轉到對應的組
        mOnSideBarTouchListener.onSideBarTouch(v, event, touchPosition);
    }
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            if(touchPosition != mSelectPosition) {
                setSelectPosition(touchPosition);//設定選中
            }
            break;
    }
    return true;
}

/**
 * 根據點選的y座標計算得到當前選中的是哪個選項
 * @param pointY
 * @return      沒選中則返回-1
 */
private int getPositionForPointY(float pointY) {

    if(mValueList.size() <= 0) {
        return -1;
    }
    //根據手按下的縱座標與每個選項的高度計算當前所在項的索引
    int position = (int) (pointY / mItemHeight);
    if(position < 0) {
        position = 0;
    } else if(position > mValueList.size() - 1) {
        position = mValueList.size() - 1;
    }
    return position;
}

點選SideBar某項時跳轉列表到對應組

@Override
public void onSideBarTouch(View v, MotionEvent event, int touchPosition) {

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            if(touchPosition != mSideBar.getSelectPosition()) {
                if(touchPosition == 0) {
                    mLinearLayoutManager.scrollToPosition(0);
                } else {
                    int recyclerViewPosition = getScrollPositionBySideBarSelectPosition(touchPosition);
                    mLinearLayoutManager.scrollToPositionWithOffset(recyclerViewPosition, 0);
                }
            }
            break;
    }
}

固定頭部檢視處理

頭部顯示邏輯

  1. 因為固定不動的頭部檢視(暫且叫做mStickyHeaderView其檢視實現與組名稱檢視完全一樣)是在RecyclerView的上面，所以當其顯示時會遮蓋掉RecyclerView的第一個可見項。——這個點很重要
  2. 獲取RecyclerView的第一個可見項的實體資料IndexStickyEntity
    1. 如果當前資料的組名稱為空，則不顯示頭部檢視mStickyHeaderView，要注意的是前面我在轉換資料的時候會給所有普通聯絡人實體物件都會設定組名稱(如果存在)
    2. 如果當前資料的組名稱不為空，則顯示頭部檢視mStickyHeaderView並同時更新其顯示內容
  3. 滾動過程中獲取RecyclerView列表中的第二個可見項的實體資料IndexStickyEntity，比如叫做：secondVisibleEntity
    1. 如果secondVisibleEntity.getItemType() == ItemType.ITEM_TYPE_INDEX,即為組名稱檢視(索引檢視)，此時說明第二組資料已經滾動上來了，需要將固定在頭部的mStickyHeaderView檢視隨著滾動操作慢慢的滑出介面變成不可見，同時secondVisibleEntity則會慢慢滾動到mStickyHeaderView原來所在的位置，此時在介面上看著就像是第二組的組名稱檢視慢慢的替換了固定在頂部的mStickyHeaderView
    2. 如果secondVisibleEntity.getItemType() != ItemType.ITEM_TYPE_INDEX則需要將mStickyHeaderView恢復到初始位置。因為當secondVisibleEntity滾動到mStickyHeaderView原來所在的位置後，此時第一個可見項變成了secondVisibleEntity，而此時的第二個可見項則變成了普通的聯絡人檢視比如叫mContactView，而此時列表還會繼續往上滾動，隨著滾動secondVisibleEntity會慢慢的變成不可見，而mStickyHeaderView已經滑出介面不可見了，所以當secondVisibleEntity.getItemType() != ItemType.ITEM_TYPE_INDEX則需要將mStickyHeaderView恢復到初始位置顯示新的組名稱。
  4. 列表滾動過程中還需要根據第一個可見項的索引值更新索引條SideBar的選中項

滾動時頭部顯示邏輯實現

class RecyclerViewScrollListener extends RecyclerView.OnScrollListener {

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {

        super.onScrolled(recyclerView, dx, dy);
        int firstVisiblePosition = mLinearLayoutManager.findFirstVisibleItemPosition();
        if(firstVisiblePosition < 0 || firstVisiblePosition >= mAdapter.getItemCount()) {
            return;
        }
        IndexStickyEntity entity = mAdapter.getItem(firstVisiblePosition);
        mSideBar.setSelectPosition(mSideBar.getPosition(entity.getIndexValue()));
        if(TextUtils.isEmpty(entity.getIndexName()) && mStickyHeaderView.itemView.getVisibility() == VISIBLE) {
            //如果當前第一個可見項的索引值為空，則當前項可能是普通檢視，非索引檢視，因此此時需要將mStickyHeaderView進行隱藏
            mStickyIndexValue = null;
            mStickyHeaderView.itemView.setVisibility(INVISIBLE);
        } else {//第一個可見項為索引檢視，則需要顯示頭部固定的索引提示檢視
            showStickyHeaderView(entity.getIndexName(), firstVisiblePosition);
        }

        if(firstVisiblePosition + 1 >= mAdapter.getItemCount()) {
            return;
        }
        //獲取第二個可見項實體物件
        IndexStickyEntity secondVisibleEntity = mAdapter.getItem(firstVisiblePosition + 1);
        if(secondVisibleEntity.getItemType() == ItemType.ITEM_TYPE_INDEX) {
            //第二個可見項是索引值檢視
            View secondVisibleItemView = mLinearLayoutManager.findViewByPosition(firstVisiblePosition + 1);
            if(secondVisibleItemView.getTop() <= mStickyHeaderView.itemView.getHeight() && mStickyIndexValue != null) {
                //當secondVisibleItemView距頂部的距離 <= mStickyHeaderView的高度時，mStickyHeaderView開始往上滑出
                mStickyHeaderView.itemView.setTranslationY(secondVisibleItemView.getTop() - mStickyHeaderView.itemView.getHeight());
            }
        } else {
            //第二個可見項不是索引值檢視
            if(mStickyHeaderView.itemView.getTranslationY() != 0) {//有偏移
                mStickyHeaderView.itemView.setTranslationY(0);
            }
        }
    }
}

喜歡的同學歡迎Star和fork

write by laohu
2016年12月31日

相關推薦

自定義實現微信通訊錄效果View

歡迎訪問我的個人獨立部落格 ittiger.cn，原創文章，未經允許不得隨意轉載。 前言 在使用App過程中，經常會有使用到聯絡人或城市列表的場景，其實這兩種效果是一樣的，都是右邊有個索引列表，點選索引列表可跳轉到指定字母開頭的聯絡人或城市上去，同時

Android快速索引：實現微信通訊錄效果

最近在練習自定義view，找了一些資料，模仿了一下微信通訊錄的實現效果，首先看一下效果圖： 記錄下來當做筆記以備後用。 第一步：是繪製26個字母的view： 在每個構造方法中呼叫下面的init()方法實現畫筆的初始化 private void i

RecyclerView利用ItemDecoration實現頭部懸停效果【類似微信通訊錄效果】

對於RecyclerView的ItemDecoration相信大家都不會陌生，因為RecyclerView並不像ListView那樣自帶分割線，所以我們需要繼承ItemDecoration去手動繪製分割線。本篇文章主要是利用ItemDecoration的特性來繪

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫 文件 https://phonycode.github.io/wuss-weapp 掃碼體驗 使用微信掃一掃體驗小程式元件示例 演示圖片 快速上手 在開始使用 Wuss We

自定義仿微信九張圖片選擇展示庫

簡介 現在眾多App中都會有發表圖文的功能，在編輯圖文的時候會有多圖的展示效果。下面就給大家分享一下最近專案中用到的一款自定義出來的一個庫。 思路講解 該庫是在fragment中，使用RecyclerView進行編寫。利用RecyclerView的一些特性

偶然實現微信轟炸效果，改造python定時發微信訊息原始碼！

敘述 在一次偶然的情況下錄製了一個用VB指令碼實現QQ訊息轟炸的視訊，然後發在抖音上爆了。很多想學習的網友在問我如何實現微信上出現同樣的效果，偶然情況下我昨天看到了一篇關於微信定時發訊息的文章，是Python實現的！ 我只是稍微改了一下原始碼，就實現了

原生JS實現微信通訊錄

原生JS實現微信通訊錄 最近工作當中再一次遇到要實現一個車輛列表，要求能夠像微信通訊錄一樣，實現右側滑動，點選功能，並且滑動過程中，能夠有提示。原來用jquery實現過一次，為了精簡程式碼，現在用原生的實現一次。想必工作中大家都能用上，所以就臨時謝了一個小案例，分享給大家。本案例重在分享

Android 自定義仿微信網路載入彈出框

額,沒有餓了麼的動畫效果好看,但是,特別適用,拿來就用! 看一下效果圖 圖片素材 好了,其實很簡單,就是一個自定義Dialog的控制元件而已 1. 自定義view的style樣式

原 微信分享自定義樣式&微信分享給朋友自定義圖文資訊

下圖為效果圖：上圖為沒有設定得樣式，下圖是設定樣式分享後的效果，差距甚遠。 做的過程也遇到了一些問題，我會在博文最下方標明. 下面是我的程式碼： <!DOCTYPE html> <html lang="en"> <head>

自定義View實現微信主頁漸變效果

直入主題，先看圖 下面看實現原理： 1.先是佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andro

【Android 仿微信通訊錄 導航分組列表-下】自定義View為RecyclerView打造右側索引導航欄IndexBar

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 一 概述 在上篇文章（http://blog.csdn.net/zxt0601/article/details/52355199）裡，我們用ItemDecoration為Recy

[GitHub開源]Android自定義View實現微信打飛機遊戲

之前寫了很多自定義View理論方面的文章，具體可以參見《Android中自定義View、ViewGroup理論基礎詳解》 。 理論指導實踐，本博文演示瞭如何通過自定義View實現微信打飛機遊戲。 全

Vue 項目實現微信分享的自定義分享鏈接問題解決

情況 錯誤 目的 是個 找問題 自定義分享 當前頁 不用 appid 前言： 　　前兩天在做微信公眾號裏的項目的時候有一個需求是在 vue 項目中實現微信分享，然後在自定義分享鏈接的時候出了一些問題，分享出去的自定義鏈接（鏈接中攜帶參數）總是會直接跳到項目首頁，而且是玄學跳

使用JS-SDK自定義微信分享效果

之前做的一個h5頁面，按照需求得分享到朋友圈he好友，預設分享連結的標題he內容以及圖示都是微信預設的，下面是一個大神進行自定義的分享連結的程式碼，看到了記錄下： 前言 剛進入一家新公司，接到的第一個任務就是需要需要自定義微信分享的效果（自定義縮圖，標題，摘要），一開始真是一臉懵逼，在網上搜

實現微信自定義分享網頁（java）

前言 網頁實現微信分享功能，這個其實在百度上是有很多例子的，而且寫得也都還不錯。不過我這個跟他們的不大一樣。一般的部落格會將分享需要的微信憑證這些寫進一個專案中，本專案獲取，本專案實現分享功能。而我是獲取微信憑證是單獨的一個專案，這樣一個服務號的獲取的微信憑證，可以提供給很多個專案使用，

詳細實現微信輸入框效果（textView自適應文字高度）

前言 最近會不斷推出一些輪子，這次寫了一個控制元件，類似微信輸入框，評論View,隨著文字增加，textView自增長高度， 如果喜歡我的文章，可以關注我微博:吖了個崢,也可以來小碼哥，瞭解下我們的iOS培訓課程。後續還會更新更多內容,有任何問題，歡迎簡書留言崢吖。。。 Dem

TP5 實現微信網頁自定義分享

荊軻刺秦王 文章部分借鑑於：https://www.cnblogs.com/sunshineliulu/p/8034286.html 在實際操作中還有一些需要注意的問題： 1.登入微信公眾平臺，設定—公眾號設定—功能設定裡，填寫『JS介面安全域名』。填寫的域名須通過ICP備案的驗證，

[Android例項] 自定義控制元件一百行程式碼實現微信朋友圈九宮格圖片顯示

package com.weixinninegridlayout;import android.content.Context;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android

Android--(13)--Android自定義實現actionbar實現微信標題欄

昨天看了下actionbar的使用,今天來實現自定義的標題欄實現 在android的開發中有時我們需要更個性化的標題欄，而不僅僅是系統預定義的圖示加軟體名，同時有時候我們需要在標題欄中實現更多功能，如新增按鈕響應使用者點選。這就要求我們實現自定義標題欄。下面以

手把手教你實現微信小程式中的自定義元件

前言 之前做小程式開發的時候，對於開發來說比較頭疼的莫過於自定義元件了，當時官方對這方面的文件也只是寥寥幾句，一筆帶過而已，所以寫起來真的是非常非常痛苦！！ 好在微信小程式的庫從 1.6.3 開始，官方對於自定義元件這一塊有了比較大的變動，首先比較明顯的感覺就是文件