ConstraintLayout實現(xiàn)物流詳情效果

ConstraintLayout實現(xiàn)跟隨其他控件動態(tài)線高度效果，效果圖：

1550803499(1).png

物流信息不固定所以這里使用的RecyclerView實現(xiàn)動態(tài)顯示酝润，Activity 布局代碼：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
            android:paddingTop="50dp"
            android:paddingBottom="50dp"
            android:background="#fff"
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

代碼使用的Kotlin（不得不說代碼簡潔了很多）：


        rv.layoutManager=LinearLayoutManager(this)
        rv.adapter=MyAdapter(this)

Adapter：


import android.content.Context
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.item_logistics_detail.view.*

class MyAdapter(private val mContext: Context) : RecyclerView.Adapter<MyAdapter.MyViewHolder>() {

    override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): MyViewHolder {
        val view = LayoutInflater.from(mContext).inflate(R.layout.item_logistics_detail, viewGroup, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(myViewHolder: MyViewHolder, i: Int) {
        myViewHolder.itemView.item_logistics_detail_ysh_tv.text=(i+1).toString()
        when(i){
            1->{
                myViewHolder.itemView.item_logistics_detail_start_receive_address_text_view.text="中華人民共和國新疆維吾爾自治區(qū) \n伊犁哈薩克自治州塔城地區(qū)和布克賽爾蒙古自治縣和什托洛蓋鎮(zhèn)西特木恩哈布其克村"
            }
            3->{
                myViewHolder.itemView.item_logistics_line_v.visibility=View.GONE
                myViewHolder.itemView.item_logistics_detail_start_receive_address_text_view.text="已收貨"
            }
        }
    }

    override fun getItemCount(): Int {
        return 4
    }

    inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

之后就是最主要的item的布局代碼：


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                             android:layout_width="match_parent"
                                             android:layout_height="wrap_content"
                                             xmlns:app="http://schemas.android.com/apk/res-auto"
                                             android:background="#fff">

    <TextView
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/item_logistics_detail_start_date_text_view"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="right"
            android:text="09-12"
            android:textColor="#A2A8B6"
            android:textSize="12sp"/>

    <TextView
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/item_logistics_detail_start_date_text_view"
            android:id="@+id/item_logistics_detail_start_time_text_view"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/item_logistics_detail_start_date_text_view"
            android:gravity="right"
            android:text="07:20"
            android:textColor="#A2A8B6"
            android:textSize="10sp"/>

    <TextView
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:id="@+id/item_logistics_detail_start_receive_address_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="98dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="3dp"
            android:paddingBottom="15dp"
            android:text="已到達xx市xx區(qū)xx路xxx號xx大廈xx樓..............................haha"
            android:textColor="#A2A8B6"
            android:textSize="14sp"/>
    <TextView
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:textColor="#fff"
            android:gravity="center"
            android:text="1"
            android:textSize="14sp"
            android:src="@mipmap/ic_launcher_round"
            android:id="@+id/item_logistics_detail_ysh_tv"
            android:background="@drawable/shape_oval_999999"
            android:layout_marginLeft="61dp"
            android:layout_width="24dp"
            android:layout_height="24dp"/>
    <View
            android:id="@+id/item_logistics_hint_line_v"
            android:background="#fff"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="match_parent"
            android:layout_height="1px"/>
    <View
            android:id="@+id/item_logistics_line_v"
            app:layout_constraintTop_toBottomOf="@id/item_logistics_detail_ysh_tv"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@id/item_logistics_hint_line_v"
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_marginLeft="73dp"
            android:background="@color/colorPrimary"/>


</android.support.constraint.ConstraintLayout>

注：

 app:layout_constraintLeft_toLeftOf="parent" 

app:layout_constraintTop_toBottomOf="@id/item_logistics_detail_ysh_tv"

這些屬性可以直接通過字面解讀蓉坎，constraintLeft指當(dāng)前的view的那個方向陕悬，toLeftOf相對于"parent" 或者其他view位置所在的方向灌诅，第一個可以解讀為這個view的左側(cè)相對于父容器的左側(cè)践磅。