1. 程式人生 > >一個簡單的可控的頭像列表疊加控件

一個簡單的可控的頭像列表疊加控件

con null class rec 處理 bare ali interface lis

一個簡單的可控的頭像列表疊加控件

需求:評論/點贊頭像橫向排列,第N個疊加在第N+1個上面,並且N小於一個固定的數
分析:1、假設N=4;頭像列表最多顯示4個,不足4個,有幾個顯示幾個;2、頭像第N個疊加在第N+1個上面,無法使用margin負數實現(疊加順序不對)

技術分享圖片


1、控件實現代碼
要點:控件可以橫向滑動,繼承HorizontalScrollView;創建RelativeLayout存放頭像集合;

public class SDAvatarListLayout extends HorizontalScrollView {
    private Context context;
    /**
* 存放創建的最大的ImageView集合 */ private List<SDCircleImageView> imageViewList; /** * 默認圖片大小 */ private int imageSize = Math.round(SDTransitionUtil.dp2px(50)); /** * 默認圖片數量 */ private int imageMaxCount = 6; /** * 默認圖片偏移百分比 0~1 */ private float
imageOffset = 0.3f; public SDAvatarListLayout(Context context) { this(context, null); } public SDAvatarListLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SDAvatarListLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr); this.context = context; TypedArray ta = getResources().obtainAttributes(attrs, R.styleable.SDAvatarListLayout); imageMaxCount = ta.getInt(R.styleable.SDAvatarListLayout_image_max_count, imageMaxCount); imageSize = (int) ta.getDimension(R.styleable.SDAvatarListLayout_image_size, imageSize); imageOffset = ta.getFloat(R.styleable.SDAvatarListLayout_image_offset, imageOffset); imageOffset = imageOffset > 1 ? 1 : imageOffset; init(); ta.recycle(); } private void init() { setHorizontalScrollBarEnabled(false); RelativeLayout relativeLayout = new RelativeLayout(context); int offset = imageSize - (int) (imageSize * imageOffset); imageViewList = new ArrayList<>(imageMaxCount); for (int i = 0; i < imageMaxCount; i++) { SDCircleImageView imageView = new SDCircleImageView(context); imageView.setId(imageView.hashCode() + i); imageView.setBorderColor(Color.WHITE); imageView.setBorderWidth(Math.round(SDTransitionUtil.dp2px(1))); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(imageSize, imageSize); params.addRule(ALIGN_PARENT_LEFT); params.setMargins((imageMaxCount - i - 1) * offset, 0, 0, 0); relativeLayout.addView(imageView, params); imageViewList.add(imageView); } relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); this.addView(relativeLayout); } public void setAvatarListListener(ShowAvatarListener listener) { hideAllImageView(); listener.showImageView(imageViewList); } public void setAvatarListListener(List<Integer> drawableList) { if (drawableList == null) { return; } hideAllImageView(); int i = imageMaxCount - 1; for (int url : drawableList) { imageViewList.get(i).setImageResource(url); imageViewList.get(i).setVisibility(VISIBLE); if (i == 0) { break; } --i; } } private void hideAllImageView() { for (SDCircleImageView head : imageViewList) { head.setVisibility(View.GONE); } } public interface ShowAvatarListener { void showImageView(List<SDCircleImageView> imageViewList); } }

2、自定義屬性

<declare-styleable name="SDAvatarListLayout">
        <!--創建的最大ImageView數量-->
        <attr name="image_max_count" format="integer" />
        <!--創建的ImageView的大小-->
        <attr name="image_size" format="dimension" />
        <!--要疊加的ImageView偏移量-->
        <attr name="image_offset" format="float" />
    </declare-styleable>

3、使用

final List<Integer> imageDatas = new ArrayList<>();
        imageDatas.add(R.drawable.ic_launcher_background);
        imageDatas.add(R.drawable.meinv);
        imageDatas.add(R.drawable.meinv);
        imageDatas.add(R.drawable.meinv);
        //加載本地資源
        avatarLayout1.setAvatarListListener(imageDatas);
        //順序加載圖片使用任意框架加載
        avatarLayout2.setAvatarListListener(new SDAvatarListLayout.ShowAvatarListener() {
            @Override
            public void showImageView(List<SDCircleImageView> imageViewList) {
                //創建的ImageView的數量
                int imageSize = imageViewList.size();
                //實際需要顯示的圖片的數量
                int realDataSize = imageDatas.size();
                int mul = imageSize - realDataSize;
                for (int i = 0; i < imageSize; i++) {
                    if (i >= mul) {//6
                        //可以替換為網絡圖片處理
                        imageViewList.get(i).setImageResource(imageDatas.get(realDataSize - (i - mul) - 1));
                        imageViewList.get(i).setVisibility(View.VISIBLE);
                    } else {
                        imageViewList.get(i).setVisibility(View.GONE);
                    }
                }
            }
        });
        //逆序加載圖片使用任意框架加載
        avatarLayout3.setAvatarListListener(new SDAvatarListLayout.ShowAvatarListener() {
            @Override
            public void showImageView(List<SDCircleImageView> imageViewList) {
                //創建的ImageView的數量
                int imageSize = imageViewList.size();
                //實際需要顯示的圖片的數量
                int realDataSize = imageDatas.size();
                int mul = imageSize - realDataSize;
                for (int i = 0; i < imageSize; i++) {
                    if (i >= mul) {//6
                        //可以替換為網絡圖片處理
                        imageViewList.get(i).setImageResource(imageDatas.get(i - mul));
                        imageViewList.get(i).setVisibility(View.VISIBLE);
                    } else {
                        imageViewList.get(i).setVisibility(View.GONE);
                    }
                }
            }
        });



一個簡單的可控的頭像列表疊加控件