ConstraintLayout实现物流详情效果
2019-02-22 本文已影响21人
Alien28
ConstraintLayout实现跟随其他控件动态线高度效果,效果图:
1550803499(1).png
物流信息不固定所以这里使用的RecyclerView实现动态显示,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="中华人民共和国新疆维吾尔自治区 \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区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指当前的view的那个方向,toLeftOf相对于"parent" 或者其他view位置所在的方向,第一个可以解读为这个view的左侧相对于父容器的左侧。