1

我想使ConstraintLayout用相对和线性布局替换常规布局,但我有一些问题需要在卡片视图中垂直居中两个视图。使用约束布局的垂直中心多视图

下面的布局文件是我想要替换的当前布局。

enter image description here

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="@dimen/main_button_side_margin" 
    android:layout_marginStart="@dimen/main_button_side_margin" 
    android:layout_marginTop="@dimen/main_button_top_margin" 
    android:paddingBottom="2dp" 
    android:paddingLeft="1dp" 
    android:paddingRight="1dp" 
    android:paddingTop="2dp"> 

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/select_language_button" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:foreground="?android:attr/selectableItemBackground" 
     card_view:cardBackgroundColor="@android:color/transparent" 
     card_view:cardCornerRadius="0dp" 
     card_view:cardElevation="0dp"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@drawable/language_stroke" 
      android:minHeight="80dp"> 

      <ImageView 
       android:id="@+id/img_language" 
       android:layout_width="@dimen/main_button_size" 
       android:layout_height="@dimen/main_button_size" 
       android:layout_centerVertical="true" 
       android:layout_marginLeft="@dimen/main_button_icon_margin" 
       android:layout_marginStart="@dimen/main_button_icon_margin" 
       android:src="@drawable/ic_language_white_48dp" 
       android:tint="@color/language_color" /> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginEnd="@dimen/menu_text_margin" 
       android:layout_marginLeft="@dimen/menu_text_margin" 
       android:layout_marginRight="@dimen/menu_text_margin" 
       android:layout_marginStart="@dimen/menu_text_margin" 
       android:layout_toEndOf="@id/img_language" 
       android:layout_centerVertical="true" 
       android:orientation="vertical"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginBottom="@dimen/main_button_text_title_margin" 
        android:text="Text" /> 

       <TextView 
        android:fontFamily="sec-roboto-light" 
        android:gravity="start" 
        android:id="@+id/language_desc" 
        android:text="description" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" /> 
      </LinearLayout> 
     </RelativeLayout> 
    </android.support.v7.widget.CardView> 
</FrameLayout> 

我现在的结果是以下:

enter image description here

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


    <android.support.v7.widget.CardView 
     android:id="@+id/select_language_button" 
     android:layout_width="0dp" 
     android:layout_height="80dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:foreground="?android:attr/selectableItemBackground" 
     app:cardBackgroundColor="@android:color/transparent" 
     app:cardCornerRadius="0dp" 
     app:cardElevation="0dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/language_stroke"> 

      <TextView 
       android:id="@+id/textView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="0dp" 
       android:text="desc" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="@+id/textView1" 
       app:layout_constraintTop_toBottomOf="@+id/textView1" /> 

      <TextView 
       android:id="@+id/textView1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="8dp" 
       android:text="Text" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toRightOf="@+id/img_language" 
       app:layout_constraintTop_toTopOf="parent" /> 

      <ImageView 
       android:id="@+id/img_language" 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:layout_marginBottom="8dp" 
       android:layout_marginLeft="12dp" 
       android:layout_marginStart="12dp" 
       android:layout_marginTop="8dp" 
       android:src="@drawable/ic_language_white_48dp" 
       android:tint="@color/language_color" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintTop_toTopOf="parent" /> 
     </android.support.constraint.ConstraintLayout> 
    </android.support.v7.widget.CardView> 

</android.support.constraint.ConstraintLayout> 

的问题是中心的TextView + textView1内cardview。我只获取textView居中和textView1下面。

我已经尝试过“垂直打包”,然后“垂直居中”,但我没有得到LinearLayout(持有两个textsview)在cardview内部的android:layout_centerVertical =“true”时获得的结果。

我想用可视化编辑器来改变xml。

我知道实现它的方式是使用链,但我无法在cardview中使用布局编辑。

有人可以帮助一些截图/屏幕录像机?

回答

0

是的,你必须使用垂直包装链为你的textView和textView1中心他们在你的CardView。

要添加链布局编辑器,你应该选择这两个TextView的和textView1,上右键单击,选择“垂直居中”

Adding chain in Layout Editor

要改变链的风格包装,你应该轻按“链”图标,直到包装风格选择

Change chain style in Layout Editor

Build a Responsive UI with ConstraintLayout - Control linear groups with a chain包含展示如何在布局编辑器中添加链和改变其风格的视频。针对你的具体情况

XML布局:

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

    <android.support.v7.widget.CardView 
     android:id="@+id/select_language_button" 
     android:layout_width="0dp" 
     android:layout_height="80dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:foreground="?android:attr/selectableItemBackground" 
     app:cardBackgroundColor="@android:color/transparent" 
     app:cardCornerRadius="0dp" 
     app:cardElevation="0dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/language_stroke"> 

      <TextView 
       android:id="@+id/textView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="0dp" 
       android:text="desc" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="@+id/textView1" 
       app:layout_constraintTop_toBottomOf="@+id/textView1" /> 

      <TextView 
       android:id="@+id/textView1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="8dp" 
       android:text="Text" 
       app:layout_constraintBottom_toTopOf="@+id/textView" 
       app:layout_constraintLeft_toRightOf="@+id/img_language" 
       app:layout_constraintTop_toTopOf="parent" 
       app:layout_constraintVertical_chainStyle="packed" /> 

      <ImageView 
       android:id="@+id/img_language" 
       android:layout_width="32dp" 
       android:layout_height="32dp" 
       android:layout_marginBottom="8dp" 
       android:layout_marginLeft="12dp" 
       android:layout_marginStart="12dp" 
       android:layout_marginTop="8dp" 
       android:src="@drawable/ic_language_white_48dp" 
       android:tint="@color/language_color" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintTop_toTopOf="parent" /> 

     </android.support.constraint.ConstraintLayout> 

    </android.support.v7.widget.CardView> 

</android.support.constraint.ConstraintLayout>