自定義View CommentsView 評論蓋樓效果

先看看別的 app 的效果是如何:


Screenshot_20170210-160033-floor-jiandan.png

再看看 demo 的效果:


Screenshot_20170210-160033-floor-demo.png

開始代碼吧

首先我想的是用 LinearLayout 去實現,達到層級少,然后一樓到最后一樓依次排序這樣進行.最后發現在處理背景時不好弄了.然后就改為 FrameLayout去實現,其實思路也很簡單,從一樓 A + padding 0 ,二樓 B + A 的padding + 細微調整, 三樓 在上一樓的基礎上疊加.** 需要注意的是 一樓的布局最小,最后樓層的 布局最大,所以應該倒序放入 FrameLayout 中,否則會產生遮擋.**最終實現視覺上的差異化,蓋樓就形成了.

關鍵代碼片段解讀

**1. 在 TextView 繪制前得到 其高度 **

    /**
     * 在繪制之前,測量 TextView 的高度
     * @param context  上下文
     * @param text 內容
     * @param textSize sp
     * @param deviceWidth TextView 所在容器的寬度[重要]
     * @param typeface 加粗等等樣式
     * @param padding 內間距
     * @return TextView 的高度
     */
    public int getHeight(Context context, CharSequence text, int textSize, int deviceWidth, Typeface typeface, int padding) {
        TextView textView = new TextView(context);
        textView.setPadding(padding,padding,padding,padding);
        textView.setTypeface(typeface);
        textView.setText(text, TextView.BufferType.SPANNABLE);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize);
        int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(deviceWidth, View.MeasureSpec.AT_MOST);
        int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        textView.measure(widthMeasureSpec, heightMeasureSpec);
        return textView.getMeasuredHeight();
    }

其他的代碼還是直接看源碼吧,主要是計算 View之間的間距.

**2. CommentsView **

public class CommentsView extends FrameLayout{
    private @ColorInt int mFloorBackgroundColor = Color.WHITE;// 樓層背景
    private int mFloorPadding = 0; //樓層疊加時,上左右的padding
    private @DrawableRes int mFloorBackgroundDrawableRes;

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

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

    public CommentsView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initParams();
    }

    private void initParams() {
        mFloorPadding = DisplayUtil.dp2px(getContext(),3);
        mFloorBackgroundDrawableRes = R.drawable.shape_comment_background;
        setBackgroundColor(mFloorBackgroundColor);
    }

    /**
     * 樓層
     * @param floorComments 1,2,3...依次排序
     */
    public void setFloors(List<CommentBean> floorComments){
        if (floorComments ==null || floorComments.size()<=0)return;
        int size = floorComments.size();
        int lastHeight = 0;
        ArrayList<Pair<View,FrameLayout.LayoutParams>> allView = new ArrayList<>();
        int almost = DisplayUtil.dp2px(getContext(), 32);
        for (int i = 0; i < size; i++) {
            LayoutParams floorLayoutParams = getFloorLayoutParams(size, i);
            CommentBean commentBean = floorComments.get(i);
            CommentItemView itemView =new CommentItemView(getContext());
            itemView.setTitle(commentBean.getName());
            itemView.setContent(commentBean.getContent());
//          每次的padding 都在累加,并且要減去相鄰層級間的間距
            int paddingTop = lastHeight + mFloorPadding * i;
            Log.e("test","top: "+paddingTop);
            itemView.setPadding(0,paddingTop,0,0);
//            模仿 煎蛋蓋樓
//            if (i == size -1 ){
//                itemView.setBackgroundColor(mFloorBackgroundColor);
//            }else {
//                itemView.setBackgroundResource(mFloorBackgroundDrawableRes);
//            }
//            demo 演示
            itemView.setBackgroundResource(mFloorBackgroundDrawableRes);
            allView.add(new Pair<View, LayoutParams>(itemView,floorLayoutParams));
            int alx1 = getHeight(getContext(),commentBean.getName(),12,getCurrentWidth(size,i),Typeface.DEFAULT,0);
            int alx2 = getHeight(getContext(),commentBean.getContent(),14,getCurrentWidth(size,i),Typeface.DEFAULT,0);
            Log.e("test","i: "+i +" alx1: "+alx1 +"  alx2: "+alx2+" almost: "+almost) ;
            lastHeight =lastHeight + alx1 +alx2+ almost;
            Log.e("test","lastHeight: "+lastHeight) ;
        }
        for (int i = allView.size() - 1; i >= 0; i--) {// 倒序添加
            Pair<View, LayoutParams> viewLayoutParamsPair = allView.get(i);
            this.addView(viewLayoutParamsPair.first,viewLayoutParamsPair.second);
        }
    }

    /**
     * 在繪制之前,測量 TextView 的高度
     * @param context  上下文
     * @param text 內容
     * @param textSize sp
     * @param deviceWidth TextView 所在容器的寬度[重要]
     * @param typeface 加粗等等樣式
     * @param padding 內間距
     * @return TextView 的高度
     */
    public int getHeight(Context context, CharSequence text, int textSize, int deviceWidth, Typeface typeface, int padding) {
        TextView textView = new TextView(context);
        textView.setPadding(padding,padding,padding,padding);
        textView.setTypeface(typeface);
        textView.setText(text, TextView.BufferType.SPANNABLE);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize);
        int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(deviceWidth, View.MeasureSpec.AT_MOST);
        int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        textView.measure(widthMeasureSpec, heightMeasureSpec);
        return textView.getMeasuredHeight();
    }

    private int getCurrentWidth(int size,int order){
        int width = DisplayUtil.getWindowPixels(getContext()).first;
        width -= DisplayUtil.dp2px(getContext(),16) *2;//手動計算
        int totalPadding = (size - order) * mFloorPadding;
        return width - totalPadding;
    }

    private FrameLayout.LayoutParams getFloorLayoutParams(int size , int order){
        FrameLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        int totalPadding = (size -1 - order) * mFloorPadding;
        params.setMargins(totalPadding,totalPadding,totalPadding,0);
        return params;
    }
}

3. CommentItemView 輔助子類

public class CommentItemView extends LinearLayout{

    private TextView tvTitle;
    private TextView tvContent;

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

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

    public CommentItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(LinearLayout.VERTICAL);
        LayoutInflater.from(context).inflate(R.layout.layout_item_comment,this);

        tvTitle = (TextView) findViewById(R.id.tv_title);
        tvContent = (TextView) findViewById(R.id.tv_content);

    }

    public TextView getTitle(){
        return tvTitle;
    }
    public TextView getContent(){
        return tvContent;
    }

    public void setTitle(CharSequence title){
        tvTitle.setText(title);
    }
    public void setContent(CharSequence content){
        tvContent.setText(content);
    }

}

其 R.layout.layout_item_comment

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
    android:padding="@dimen/md_small_margin"
    >
    //md_small_margin --> 8dp
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_color_deep"
        android:textSize="12sp"
        android:lines="1"
        android:ellipsize="end"
        />
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/md_small_margin"
        android:layout_marginTop="@dimen/md_small_margin"
        android:textSize="14sp"
        />

</LinearLayout>

4. CommentBean 輔助bean

public class CommentBean {
    private String name;
    private String content;

    public CommentBean(String name, String content) {
        this.name = name;
        this.content = content;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

5. Activity 代碼

public class TestActivity extends AppCompatActivity {

    @BindView(R.id.tv_show)
    TextView tvShow;
    @BindView(R.id.activity_test)
    LinearLayout activityTest;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        ButterKnife.bind(this);
        addCommentsView();
    }

    private void addCommentsView() {
        CommentsView commentsView = new CommentsView(this);
        ArrayList<CommentBean> comments = new ArrayList<>();
        comments.add(new CommentBean("一級", "你根本不是司機,我應該是上了假車,快放我下車!!!"));
        comments.add(new CommentBean("二級", "我是司機,滴滴,開車了,目的地----秋明山!!!"));
        comments.add(new CommentBean("三級", "污污污~~~老司機,帶帶我~~~"));
        comments.add(new CommentBean("四級", "我仿佛錯過了什么!"));
        comments.add(new CommentBean("五級", "我就不信那個小學生會把我的臉按在鍵盤上,哈哈哈是獨立地位哦就dsjiodjsojssddnldfiegnbiof大街上看到dsijdoijsd史蒂文sdn"));
        commentsView.setFloors(comments);

        activityTest.addView(commentsView,LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT);
    }

}

最后附加 Activity 的布局;

<LinearLayout
    android:id="@+id/activity_test"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.didikee.cnbetareader.test.TestActivity">

    <TextView
        android:id="@+id/tv_show"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:textSize="16sp"
        android:gravity="center"
        android:text="評論樓層"/>

</LinearLayout>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容