美文网首页自定义控件常用收藏
ConstraintLayout实现物流详情效果

ConstraintLayout实现物流详情效果

作者: Alien28 | 来源:发表于2019-02-22 11:05 被阅读21次

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的左侧相对于父容器的左侧。

相关文章

网友评论

    本文标题:ConstraintLayout实现物流详情效果

    本文链接:https://www.haomeiwen.com/subject/yjmsyqtx.html