先看看別的 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>