Android Design - ConstraintLayout 布局

之前都是使用 RelativeLayout（后面简称RL） 和 LinearLayout（后面简称LL） 进行页面布局，再复杂难搞的 UI 也能搞定（此处不讨论那些需要自定义的UI）。但是都知道一个问题，那就是 UI 越复杂，需要嵌套的层级越多，这样带来结果就是在渲染页面时，会消耗大量的资源，严重的时候甚至会出现丢帧现象，所以卡顿就出现了。ConstraintLayout（后面简称CL）出现之后，就可以大量减少 UI 层级嵌套，处理的好，可以做到0嵌套。

先上图，整个文档都围绕这个图片来展开：

ConstraintLayout.jpeg

  1. 引入依赖（以下两种方式，视 Gradle 版本自己选择）：
compile  'com.android.support.constraint:constraint-layout:1.1.2'
// 老版本 Gradle，用上面的；新版本选用下面的
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
  1. 在做具体需求之前，需要先说明一下，在 CL 布局中 match_parent这个值用 0dp来替代，后面例子会用到，不再做解释；

  2. 需求来了，做一个 Banner，Banner的宽度填满屏幕宽度，高度为宽度的4/1，在之前我们都是在 Java 代码中动态去获取屏幕宽度，然后将计算出来的高度值动态设置给 Banner。但是在 CL 布局中不必那么麻烦，只需一句代码就搞定。


    Banner.jpeg
  • 先看完整代码：
<TextView
    android:id="@+id/tv_banner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#765"
    android:gravity="center"
    android:text="I'am a Banner"
    app:layout_constraintDimensionRatio="H,4:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />
  • 首先我们通过约束条件
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

让Banner在宽度上填充了屏幕宽度，然后通过设置 app:layout_constraintDimensionRatio="H,4:1" 将高度设置为宽度的4/1 ，同样的还有

app:layout_constraintDimensionRatio="4:1" <!-- 效果和例子中一样，可看做是它的简写 -->
app:layout_constraintDimensionRatio="W,4:1" <!-- 设置高宽比为 4:1 -->
  1. 上面提到的约束条件还有
app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBaseline_toBaselineOf

  1. 接下来，btn2 在 btn1 的右侧，并且 btn2 在右侧剩余空间的中间：


    btn1 2.jpeg

    先看完整代码：

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn1"
    android:textAllCaps="false" />

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn2"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn1"
    app:layout_constraintRight_toRightOf="parent" />
  • 重点看 btn2 中的
app:layout_constraintLeft_toRightOf="@+id/btn1"
app:layout_constraintRight_toRightOf="parent"
  • 这两个约束条件就像两个弹力相同的橡皮筋，同时对 btn2 作用，而btn2 的宽度为内容包裹，所以 btn2 被居中放置了；

  • 那么我们如果设置了 btn2 的宽度会怎样呢？这里存在两种情况，如果设置的宽度小于右侧剩余的宽度，那效果和上面的一样；如果大于会怎么呢？那就出现了 btn3 和 btn4 的情况了。


    btn3 4.jpeg
  1. btn4 设置了宽度，并且这个宽度大于 btn3 右侧的宽度，所以 btn3 就被覆盖了一部分，同时 btn4 右侧一部分也超出了屏幕。看代码：
<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn3"
    android:textAllCaps="false"/>

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn4"
    android:layout_width="350dp"
    android:layout_height="wrap_content"
    android:text="btn4"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn3"
    app:layout_constraintRight_toRightOf="parent" />

  • 那么如果想让 btn4 将剩余的空间占满呢？


    btn5 6.jpeg
  1. 那就是 btn5 和 btn6 的关系了，看代码：
<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn5"
    android:textAllCaps="false" />

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="btn6"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn5"
    app:layout_constraintRight_toRightOf="parent" />
  • 不难看出，就是讲 btn6 的宽度设置为了 0dp，所以它就占据了剩余的空间。

  • 那如果想要均分呢？


    tab1 2 3.jpeg
  1. 接着看 tab1 tab2 tab3 的关系，源码：
<TextView
    android:id="@+id/tv_tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab2" />

<TextView
    android:id="@+id/tv_tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab3"/>

<TextView
    android:id="@+id/tv_tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
    app:layout_constraintRight_toRightOf="parent" />
  • 首先设置这3个 tab 的宽度为 0dp ，然后分别设置它们之间相互的约束
<!-- tab1 -->
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv_tab2"

<!-- tab2 -->
app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
app:layout_constraintRight_toLeftOf="@+id/tv_tab3"

<!-- tab3 -->
app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
app:layout_constraintRight_toRightOf="parent"

  • 要是按比例分配又该怎么做呢？


    tab4 5 6.jpeg
  1. tab4 : tab5 : tab6 的宽度之比为 2:1:1，这就要用到 app:layout_constraintHorizontal_weight 属性了，看源码：
<TextView
    android:id="@+id/tv_tab4"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginTop="10dp"
    android:background="#FFEBEE"
    android:gravity="center"
    android:text="Tab4"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab5" />

<TextView
    android:id="@+id/tv_tab5"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#FFCDD2"
    android:gravity="center"
    android:text="Tab5"
    app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab4"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab6" />

<TextView
    android:id="@+id/tv_tab6"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#EF9A9A"
    android:gravity="center"
    android:text="Tab6"
    app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab5"
    app:layout_constraintRight_toRightOf="parent" />
  • 在8中平分的代码基础上，添加
<!-- tab4 -->
app:layout_constraintHorizontal_weight="2"

<!-- tab5 -->
app:layout_constraintHorizontal_weight="1"

<!-- tab6 -->
app:layout_constraintHorizontal_weight="1"
  • 如果设置了宽度，又会怎样呢？
  1. 设置了宽度，那么它们就会出现 tab10 tab11 tab12 的情况，即每个 tab 之间的空间一样大小，同时第一个和最后一个距离父组件的空间也一样大小。

  • 如果去掉与父控件之间的空间呢？


    tab7 8 9.jpeg
  1. 这需要用到另一个新的属性 app:layout_constraintHorizontal_chainStyle ，它有三个取值，分别是
spread_inside
spread
packed

分别对应 tab7 tab8 tab9、tab10 tab11 tab12、tab13 tab14 tab15 的情况，也可以看出，这个属性的默认值就是 spread

tab10 11 12.jpeg
tab13 14 15.jpeg
  1. 直到这里，貌似 RL 和 LL 能够实现的布局，CL 都已经完成了，但是还有一个属性也要讲一下
app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias
  • 这两个属相分别设置子控件距离父控件右侧和底部距离的百分比，当都为 0 时，子组件在父组件的左上角；当都为 1 时，则在右下角。
  • 使用时注意加入下面四行代码：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

最后，共享一下完整的代码吧(#.#)

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="I'am a Banner"
        app:layout_constraintDimensionRatio="H,4:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/tv_banner" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn2"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_banner" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn3"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn4"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="btn4"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn5"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btn3" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn6"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn3" />


    <TextView
        android:id="@+id/tv_tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#f67"
        android:gravity="center"
        android:text="Tab1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab2"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#A67"
        android:gravity="center"
        android:text="Tab2"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab3"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#767"
        android:gravity="center"
        android:text="Tab3"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab4"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#FFEBEE"
        android:gravity="center"
        android:text="Tab4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab5"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab1" />

    <TextView
        android:id="@+id/tv_tab5"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#FFCDD2"
        android:gravity="center"
        android:text="Tab5"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab4"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab6" />

    <TextView
        android:id="@+id/tv_tab6"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#EF9A9A"
        android:gravity="center"
        android:text="Tab6"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab5"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab7"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#01579B"
        android:gravity="center"
        android:text="Tab7"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab8"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab4" />

    <TextView
        android:id="@+id/tv_tab8"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#29B6F6"
        android:gravity="center"
        android:text="Tab8"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab7"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab7"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab9" />

    <TextView
        android:id="@+id/tv_tab9"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#B3E5FC"
        android:gravity="center"
        android:text="Tab9"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab7"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab8"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab10"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#FFCCBC"
        android:gravity="center"
        android:text="Tab10"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab11"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab7" />

    <TextView
        android:id="@+id/tv_tab11"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#FF7043"
        android:gravity="center"
        android:text="Tab11"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab10"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab10"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab12" />

    <TextView
        android:id="@+id/tv_tab12"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#BF360C"
        android:gravity="center"
        android:text="Tab12"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab10"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab11"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab13"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#006064"
        android:gravity="center"
        android:text="Tab13"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab14"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab10" />

    <TextView
        android:id="@+id/tv_tab14"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#26C6DA"
        android:gravity="center"
        android:text="Tab14"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab13"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab13"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab15" />

    <TextView
        android:id="@+id/tv_tab15"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#B2EBF2"
        android:gravity="center"
        android:text="Tab15"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab13"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab14"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#ff639b"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.95"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.95" />
</android.support.constraint.ConstraintLayout>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,458评论 4赞 363
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,454评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,171评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,062评论 0赞 207
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,440评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,661评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,906评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,609评论 0赞 200
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,379评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1赞 261
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,409评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,072评论 3赞 237
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2赞 270

推荐阅读更多精彩内容