回到顶部

1. 晒单评价

回到顶部

1.1 点击页面跳转的实现

【说明】布局会使用自定义控件；

【点击事件的处理】

【效果】

回到顶部

1.2 自定义评价订单的布局实现

<?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:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tb_shop_cart"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center">

        <android.support.v7.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="评价晒单"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/top_tv_comment_commit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="20dp"
            android:text="提交"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/img_order_comment"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp" />

        <TextView
            android:id="@+id/tv_comment_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/img_order_comment"
            android:text="评分"
            android:textColor="#323232" />

        <com.flj.latte.ui.widget.StarLayout
            android:id="@+id/custom_star_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/tv_comment_title"
            android:layout_toRightOf="@id/img_order_comment" />

    </RelativeLayout>

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_order_comment"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="@android:color/white"
        android:gravity="top|left"
        android:hint="写下评论"
        android:padding="10dp" />

    <com.flj.latte.ui.widget.AutoPhotoLayout
        android:id="@+id/custom_auto_photo_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:icon_size="10sp"
        app:item_margin="3"
        app:line_count="5"
        app:max_count="5" />

</LinearLayout>

回到顶部

1.3 星星布局的实现

package com.flj.latte.ui.widget;

import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.LinearLayoutCompat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;

import com.flj.latte.ui.R;
import com.joanzapata.iconify.widget.IconTextView;

import java.util.ArrayList;


public class StarLayout extends LinearLayoutCompat implements View.OnClickListener {

    private static final CharSequence ICON_UN_SELECT = "{fa-star-o}";  //空心图标
    private static final CharSequence ICON_SELECTED = "{fa-star}";  //实心图标
    private static final int STAR_TOTAL_COUNT = 5;  //星星的数量
    private static final ArrayList<IconTextView> STARS = new ArrayList<>();

    public StarLayout(Context context) {
        this(context, null);
    }

    public StarLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initStarIcon();
    }
    //初始化星星
    private void initStarIcon() {
        for (int i = 0; i < STAR_TOTAL_COUNT; i++) {
            final IconTextView star = new IconTextView(getContext());
            star.setGravity(Gravity.CENTER);
            final LayoutParams lp =
                    new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                            ViewGroup.LayoutParams.MATCH_PARENT);
            lp.weight = 1;
            star.setLayoutParams(lp);
            star.setText(ICON_UN_SELECT);
            star.setTag(R.id.star_count, i);
            star.setTag(R.id.star_is_select, false);  //默认没有选中
            star.setOnClickListener(this);
            STARS.add(star); //创建的星星放到布局中；
            this.addView(star); //加到布局中；
        }
    }

    public int getStarCount() {
        int count = 0;
        for (int i = 0; i < STAR_TOTAL_COUNT; i++) {
            final IconTextView star = STARS.get(i);
            final boolean isSelect = (boolean) star.getTag(R.id.star_is_select);
            if (isSelect) {
                count++;
            }
        }
        return count;
    }

    private void selectStar(int count) {
        for (int i = 0; i <= count; i++) {
            if (i <= count) {
                final IconTextView star = STARS.get(i);
                star.setText(ICON_SELECTED);
                star.setTextColor(Color.RED);
                star.setTag(R.id.star_is_select, true);
            }
        }
    }

    private void unSelectStar(int count) {
        for (int i = 0; i < STAR_TOTAL_COUNT; i++) {
            if (i >= count) {
                final IconTextView star = STARS.get(i);
                star.setText(ICON_UN_SELECT);
                star.setTextColor(Color.GRAY);
                star.setTag(R.id.star_is_select, false);
            }
        }
    }

    @Override
    public void onClick(View v) {
        final IconTextView star = (IconTextView) v;
        //获取第几个星星
        final int count = (int) star.getTag(R.id.star_count);
        //获取点击状态
        final boolean isSelect = (boolean) star.getTag(R.id.star_is_select);
        if (!isSelect) {
            selectStar(count);
        } else {
            unSelectStar(count);
        }
    }
}

【效果】1-评价星星点击选择的效果.gif

回到顶部

2. 仿微信自动多图及删除控件

回到顶部

2.1 属性值及控件的定义

【属性值的定义】

【使用属性值】

【为加号增加包边】

【加号按钮的设置和布局】

回到顶部

2.2 图片初始化方法onMearsure()方法

package com.flj.latte.ui.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.net.Uri;
import android.support.v7.app.AlertDialog;
import android.support.v7.widget.AppCompatImageView;
import android.support.v7.widget.LinearLayoutCompat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.AlphaAnimation;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.request.RequestOptions;
import com.flj.latte.delegates.LatteDelegate;
import com.flj.latte.ui.R;
import com.joanzapata.iconify.widget.IconTextView;

import java.util.ArrayList;

public final class AutoPhotoLayout extends LinearLayoutCompat {

    private int mCurrentNum = 0;  //首先判断是第几张图片
    private final int mMaxNum;   //最大容许多少张图片；
    private final int mMaxLineNum;  //一行图片的数量；
    private IconTextView mIconAdd = null;  //增加图片的按钮，是一张图片；
    private LayoutParams mParams = null;  //公共的一些属性值；

    /**
     * 【效果】如果添加了图片，要删除图片，则会弹出dialog，删除之后“加号按钮”会自动向前移动；
     */
    //要删除的图片ID
    private int mDeleteId = 0;
    private AppCompatImageView mTargetImageVew = null; //选中的图片；
    private final int mImageMargin; //图片的间距
    private LatteDelegate mDelegate = null;  //对图片的操作
    private ArrayList<View> mLineViews = null;  //将每行增加的图片存在arraylist中；
    private AlertDialog mTargetDialog = null;  //删除图片的确认框；
    private static final String ICON_TEXT = "{fa-plus}";  //加号图标；
    private final float mIconSize;  //加号图标的大小；
    //存储所有的View；存储方式是一行一行存储的；如果有两行就存储两行所有的View；
    private final ArrayList<ArrayList<View>> ALL_VIEWS = new ArrayList<>();
    private final ArrayList<Integer> LINE_HEIGHTS = new ArrayList<>(); //存储每一个行的高度；



    //防止多次的测量和布局过程
    private boolean mIsOnceInitOnMeasure = false;
    private boolean mHasInitOnLayout = false;

    private static final RequestOptions OPTIONS = new RequestOptions()
            .centerCrop()
            .diskCacheStrategy(DiskCacheStrategy.NONE);

    public AutoPhotoLayout(Context context) {
        this(context, null);
    }

    public AutoPhotoLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AutoPhotoLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //从定义的attr.xml中将值取出；
        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.camera_flow_layout);
        mMaxNum = typedArray.getInt(R.styleable.camera_flow_layout_max_count, 1);
        mMaxLineNum = typedArray.getInt(R.styleable.camera_flow_layout_line_count, 3);  //一行中什么都没有传递，则默认值是3个“加号”
        mImageMargin = typedArray.getInt(R.styleable.camera_flow_layout_item_margin, 0); //无图片上传，则默认没有间隙；
        mIconSize = typedArray.getDimension(R.styleable.camera_flow_layout_icon_size, 20); //无图片，则默认是20的大小；
        typedArray.recycle(); //回收typedArray，防止内存泄露；
    }

    public final void setDelegate(LatteDelegate delegate) {
        this.mDelegate = delegate;
    }

    public final void onCropTarget(Uri uri) {
        createNewImageView();
        Glide.with(mDelegate)
                .load(uri)
                .apply(OPTIONS)
                .into(mTargetImageVew);
    }162 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int sizeWith = MeasureSpec.getSize(widthMeasureSpec);
        final int modeWith = MeasureSpec.getMode(widthMeasureSpec);
        final int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        final int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
        //wrap_content
        int width = 0;
        int height = 0;
        //记录每一行的宽度与高度
        int lineWith = 0;
        int lineHeight = 0;
        //得到内部元素个数
        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            final View child = getChildAt(i);
            //测量子View的宽和高
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            //的搭配LayoutParams
            final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            //子View占据的宽度
            final int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
            //子View占据的高度
            final int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
            //开始换行
            if (lineWith + childWidth > sizeWith - getPaddingLeft() - getPaddingRight()) {
                //对比得到最大宽度
                width = Math.max(width, lineWith);
                //重置lineWidth
                lineWith = childWidth;
                height += lineHeight;
                lineHeight = childHeight;
            } else {
                //未换行
                //叠加行宽
                lineWith += childWidth;
                //得到当前最大的高度
                lineHeight = Math.max(lineHeight, childHeight);
            }
            //最后一个子控件
            if (i == cCount - 1) {
                width = Math.max(lineWith, width);
                //判断是否超过最大拍照限制
                height += lineHeight;
            }
        }
        setMeasuredDimension(
                modeWith == MeasureSpec.EXACTLY ? sizeWith : width + getPaddingLeft() + getPaddingRight(),
                modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom()
        );
        //设置一行所有图片的宽高
        final int imageSideLen = sizeWith / mMaxLineNum;
        //只初始化一次
        if (!mIsOnceInitOnMeasure) {
            mParams = new LayoutParams(imageSideLen, imageSideLen);
            mIsOnceInitOnMeasure = true;
        }
    }

回到顶部

2.3 【设置避免重复测量的onMeasure()】

 

【设置boolean值】

回到顶部

2.4  onLayout()方法的书写

 【需要防止多次布局】

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        ALL_VIEWS.clear();  //清楚掉所有的之前的尺寸和参数；
        LINE_HEIGHTS.clear();
        // 当前ViewGroup的宽度 声明需要使用的变量
        final int width = getWidth();
        int lineWidth = 0;
        int lineHeight = 0;
        if (!mHasInitOnLayout) {
            mLineViews = new ArrayList<>();
            mHasInitOnLayout = true;
        }
        final int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            final View child = getChildAt(i);
            final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            final int childWith = child.getMeasuredWidth();
            final int childHeight = child.getMeasuredHeight();
            //如果需要换行
            if (childWith + lineWidth + lp.leftMargin + lp.rightMargin >
                    width - getPaddingLeft() - getPaddingRight()) {
                //记录lineHeight
                LINE_HEIGHTS.add(lineHeight);
                //记录当前一行的Views
                ALL_VIEWS.add(mLineViews);
                //重置宽和高
                lineWidth = 0;
                lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
                //重置View集合
                mLineViews.clear();
            }
            lineWidth += childWith + lp.leftMargin + lp.rightMargin;
            lineHeight = Math.max(lineHeight, lineHeight + lp.topMargin + lp.bottomMargin);
            mLineViews.add(child);
        }
        //处理最后一行
        LINE_HEIGHTS.add(lineHeight);
        ALL_VIEWS.add(mLineViews);
        //设置子View位置
        int left = getPaddingLeft();
        int top = getPaddingTop();
        //行数
        final int lineNum = ALL_VIEWS.size();
        for (int i = 0; i < lineNum; i++) {
            //当前行所有的View
            mLineViews = ALL_VIEWS.get(i);
            lineHeight = LINE_HEIGHTS.get(i);
            final int size = mLineViews.size();
            for (int j = 0; j < size; j++) {
                final View child = mLineViews.get(j);
                //判断child的状态
                if (child.getVisibility() == GONE) {
                    continue;
                }
                final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
                //设置子View的边距
                final int lc = left + lp.leftMargin;
                final int tc = top + lp.topMargin;
                final int rc = lc + child.getMeasuredWidth() - mImageMargin;
                final int bc = tc + child.getMeasuredHeight();
                //为子View进行布局
                child.layout(lc, tc, rc, bc);
                left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
            }
            left = getPaddingLeft();
            top += lineHeight;
        }
        mIconAdd.setLayoutParams(mParams);
        mHasInitOnLayout = false;
    }

回到顶部

3. 对加号增加图片事件的响应

回到顶部

3.1 增加图片

【创建图片和对图片的剪裁】

 

【效果】可以增加两种图片，但是不能删除；

回到顶部

 3.2 增加对图片的删除功能

 【删除图片的对话框的布局】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@android:color/transparent"
    android:orientation="vertical"
    android:paddingBottom="10dp">

    <Button
        android:id="@+id/dialog_image_clicked_btn_delete"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/btn_border_takephoto"
        android:gravity="center"
        android:text="删除"
        android:textColor="#323232" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center" />


    <Button
        android:id="@+id/dialog_image_clicked_btn_undetermined"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/btn_border_nativephoto"
        android:text="待定"
        android:textColor="#323232" />

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center" />

    <Button
        android:id="@+id/dialog_image_clicked_btn_cancel"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/btn_border"
        android:text="取消"
        android:textColor="#323232" />

</LinearLayout>

 

    private void createNewImageView() {
        mTargetImageVew = new AppCompatImageView(getContext());
        mTargetImageVew.setId(mCurrentNum);
        mTargetImageVew.setLayoutParams(mParams);
        mTargetImageVew.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //获取要删除的图片ID
                mDeleteId = v.getId();
                mTargetDialog.show();
                final Window window = mTargetDialog.getWindow();
                if (window != null) {
                    window.setContentView(R.layout.dialog_image_click_panel);
                    window.setGravity(Gravity.BOTTOM);
                    window.setWindowAnimations(R.style.anim_panel_up_from_bottom);
                    window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
                    final WindowManager.LayoutParams params = window.getAttributes();
                    params.width = WindowManager.LayoutParams.MATCH_PARENT;
                    params.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
                    params.dimAmount = 0.5f;
                    window.setAttributes(params);
                    window.findViewById(R.id.dialog_image_clicked_btn_delete) //删除按钮的事件
                            .setOnClickListener(new OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    //得到要删除的图片
                                    final AppCompatImageView deleteImageViwe =
                                            (AppCompatImageView) findViewById(mDeleteId);
                                    //设置图片逐渐消失的动画
                                    final AlphaAnimation animation = new AlphaAnimation(1, 0);
                                    animation.setDuration(500);
                                    animation.setRepeatCount(0);
                                    animation.setFillAfter(true);
                                    animation.setStartOffset(0);
                                    deleteImageViwe.setAnimation(animation);
                                    animation.start();
                                    AutoPhotoLayout.this.removeView(deleteImageViwe);
                                    mCurrentNum -= 1;
                                    //当数目达到上限时隐藏添加按钮，不足时显示
                                    if (mCurrentNum < mMaxNum) {
                                        mIconAdd.setVisibility(VISIBLE);
                                    }
                                    mTargetDialog.cancel();
                                }
                            });
                    window.findViewById(R.id.dialog_image_clicked_btn_undetermined)
                            .setOnClickListener(new OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    mTargetDialog.cancel();
                                }
                            });
                    window.findViewById(R.id.dialog_image_clicked_btn_cancel) //取消按钮的事件
                            .setOnClickListener(new OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    mTargetDialog.cancel();
                                }
                            });
                }
            }
        });
        //添加子View的时候传入位置
        this.addView(mTargetImageVew, mCurrentNum);
        mCurrentNum++;
        //当添加数目大于mMaxNum时，自动隐藏添加按钮
        if (mCurrentNum >= mMaxNum) {
            mIconAdd.setVisibility(View.GONE);
        }
    }