美文网首页自定义控件常用收藏
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