2017-11-16 7 views
3

私はConstrainLayoutの使用を開始しようとしていますが、使用するのは難しいです。私は画面のような設定のためのレイアウトを持っており、非常に簡単で実装しやすいLinearLayoutとRelativeLayoutを使用しています。ここではレイアウトです:このLinearLayoutとRelativeLayoutをConstraintLayoutに変換するにはどうすればよいですか?

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
     <TextView 
      android:id="@+id/tv_stay_awake" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Stay awake" 
      android:padding="10dp"/> 
     <Switch 
      android:id="@+id/switch_stay_awake" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true"/> 
    </RelativeLayout> 


    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
     <TextView 
      android:id="@+id/tv_notification" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Enable Notification" 
      android:padding="10dp"/> 
     <Switch 
      android:id="@+id/switch_notification" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true"/> 
    </RelativeLayout> 


    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
     <TextView 
      android:id="@+id/tv_location" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Enable location" 
      android:padding="10dp"/> 
     <Switch 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true"/> 
    </RelativeLayout> 

</LinearLayout> 

、これは、それがどのように見えるかです: enter image description here

は、今私は同じ設定のUIを構築したいのですが、ConstrainLayoutを使用して、ここでConstrainLayoutで、これはUIを設定するために私が持っています。

<?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="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 

    <TextView 
     android:id="@+id/tv_stay_awake" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Stay awake"/> 
    <Switch 
     android:id="@+id/switch_stay_awake" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintRight_toRightOf="parent" /> 


    <TextView 
     android:id="@+id/tv_notification" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Enable Notification" 
     app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/> 

    <Switch 
     android:id="@+id/switch_notification" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/> 


    <TextView 
     android:id="@+id/tv_location" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Enable location" 
     app:layout_constraintTop_toBottomOf="@+id/tv_notification"/> 
    <Switch 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/switch_notification"/> 

</android.support.constraint.ConstraintLayout> 

と、それは次のように判明:あなたが見ることができるようにenter image description here

、スイッチボタンはTextViewにして整列されていません。 LinearLayoutとRelativeLayoutで行ったのと同じように見えるので、それらを同じ行レベルのTextViewとどのように揃えることができますか?私はTextViewとSwitchボタンを各行のRelativeLayoutに置くことができますが、それを行うと、ConstrainLayoutを使用する理由はありません。

答えて

4

これを試すことができます。

Switch XMLコードにapp:layout_constraintBaseline_toBaselineOf="@+id/tv_notification"を追加してください。

<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"> 

    <TextView 
     android:id="@+id/tv_stay_awake" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Stay awake"/> 

    <Switch 
     android:id="@+id/switch_stay_awake" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintBaseline_toBaselineOf="@+id/tv_stay_awake" 
     app:layout_constraintRight_toRightOf="parent"/> 


    <TextView 
     android:id="@+id/tv_notification" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Enable Notification" 
     app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/> 

    <Switch 
     android:id="@+id/switch_notification" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintBaseline_toBaselineOf="@+id/tv_notification" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/> 


    <TextView 
     android:id="@+id/tv_location" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Enable location" 
     app:layout_constraintTop_toBottomOf="@+id/tv_notification"/> 

    <Switch 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintBaseline_toBaselineOf="@+id/tv_location" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/switch_notification"/> 

</android.support.constraint.ConstraintLayout> 

enter image description here

+0

は、今私は、各設定の間の分割線を追加したいOUTPUT、新しいビューを導入することなく、それを行う方法はありますか? –

+0

私は方法がありませんでした。もし私がこれをしたいならば、私はラインデバイダとして新しい 'View'を追加します。 – KeLiuyue

関連する問題