1. ホーム
  2. 質問と答え
  3. 制約レイアウトを使用して画面の端の近くにビューを配置する方法は？

制約レイアウトを使用して画面の端の近くにビューを配置する方法は？

2017-12-08 11 views
0

GridLayoutをConstraintLayoutに変更しようとしています。制約レイアウトを使用して画面の端の近くにビューを配置する方法は？

<android.support.v7.widget.GridLayout android:layout_width="match_parent" 
android:layout_height="match_parent" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:android="http://schemas.android.com/apk/res/android"> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_asset" 

    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="0" 
    app:layout_row="0" 

    app:hideText="true" 
    app:skipStartColor="true"/> 

<TextView 
    android:id="@+id/progress_text_stage_asset" 

    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="@dimen/margin_small" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="0" 
    app:layout_row="1" 

    style="@style/AppWidget.Text.Emphasized" 
    android:gravity="center" 
    android:textColor="@color/circular_progress_middle_color" 
    android:text="text text text" /> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_sync" 

    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="2" 
    app:layout_row="0" 

    app:hideText="true" 
    app:skipStartColor="true"/> 

<TextView 
    android:id="@+id/progress_text_stage_sync" 

    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="@dimen/margin_small" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="2" 
    app:layout_row="1" 

    style="@style/AppWidget.Text.Emphasized" 
    android:gravity="center" 
    android:textColor="@color/circular_progress_middle_color" 
    android:text="text text text" /> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_completed" 

    android:layout_width="@dimen/circular_color_progress_size_medium" 
    android:layout_height="@dimen/circular_color_progress_size_medium" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="0" 
    app:layout_row="3" 

    app:hideText="true" 
    app:skipStartColor="true"/> 

<TextView 
    android:id="@+id/progress_text_stage_completed" 

    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="@dimen/margin_small" 

    app:layout_gravity="center_horizontal" 
    app:layout_column="0" 
    app:layout_row="4" 

    style="@style/AppWidget.Text.Emphasized" 
    android:gravity="center" 
    android:textColor="@color/circular_progress_middle_color" 
    android:text="@string/msg_in_store_commissioning_stage_completed" /> 

<View 
    android:layout_width="0dp" 
    android:layout_height="0dp" 

    app:layout_column="1" 
    app:layout_row="2" 
    app:layout_columnWeight="1" 
    app:layout_rowWeight="1"/> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_params" 

    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 

    app:layout_gravity="center" 
    app:layout_column="2" 
    app:layout_row="3" 

    app:hideText="true" 
    app:skipStartColor="true"/> 

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

をそしてそれは、このような出力を生成します：

私のグリッドは、このようになります

enter image description here

私はConstraintLayoutに新しいです。制約レイアウトを使用して同じ動作を達成する簡単な方法はありますか？私はそれがより効率的できれいになると思います。

RelativeLayoutを使用すると、左、右、下などを整列させることができます。 LinearLayoutを使用すると、循環ビューの間に空のビューを配置して特定の重みを追加するだけです。

しかし、それはeaslyly ConstraintLayoutで行うことができますか？

UPDATE：ここ は私がこれまでConstraintLayoutと試みたものです：

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


<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_asset" 
    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 
    android:layout_marginStart="16dp" 
    app:hideText="true" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    app:skipStartColor="true" /> 

<TextView 
    android:id="@+id/progress_text_stage_asset" 

    style="@style/AppWidget.Text.Emphasized" 
    android:layout_width="wrap_content" 

    android:layout_height="wrap_content" 
    android:layout_marginStart="8dp" 
    android:layout_marginTop="12dp" 

    android:gravity="center" 
    android:text="text text text" 
    android:textColor="@color/circular_progress_middle_color" 
    app:layout_column="0" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/progress_stage_asset" 
    app:layout_gravity="center_horizontal" 
    app:layout_row="1" /> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_sync" 
    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 
    android:layout_marginEnd="16dp" 

    app:hideText="true" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    app:skipStartColor="true" /> 

<TextView 
    android:id="@+id/progress_text_stage_sync" 
    style="@style/AppWidget.Text.Emphasized" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="8dp" 
    android:layout_marginTop="@dimen/margin_small" 
    android:gravity="center" 
    android:text="text text text" 
    android:textColor="@color/circular_progress_middle_color" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/progress_stage_sync" 
    app:layout_gravity="center_horizontal" /> 

<com.app.widget.CircularColorProgressView 
    android:id="@+id/progress_stage_completed" 

    android:layout_width="@dimen/circular_color_progress_size_medium" 
    android:layout_height="@dimen/circular_color_progress_size_medium" 

    android:layout_marginBottom="48dp" 


    app:hideText="true" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_gravity="center_horizontal" 
    app:skipStartColor="true" /> 

<TextView 
    android:id="@+id/progress_text_stage_completed" 

    style="@style/AppWidget.Text.Emphasized" 
    android:layout_width="wrap_content" 

    android:layout_height="wrap_content" 

    android:layout_marginStart="3dp" 
    android:layout_marginTop="@dimen/margin_small" 
    android:gravity="center" 
    android:text="@string/msg_in_store_commissioning_stage_completed" 
    android:textColor="@color/circular_progress_middle_color" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/progress_stage_completed" 
    app:layout_gravity="center_horizontal" /> 

<com.app.widget.CircularColorProgressView 
    android:layout_width="@dimen/circular_color_progress_size_small" 
    android:layout_height="@dimen/circular_color_progress_size_small" 
    android:layout_marginBottom="80dp" 
    android:layout_marginEnd="16dp" 
    app:hideText="true" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:skipStartColor="true" />

それがグリッドにかなり似生成： enter image description here

出典

2017-12-08 Konrad

+0

ConstraintLayoutで試したことを教えてください。 –

+0

CircularColorProgressViewファイルを共有してください – Saif

+0

@RamiJemli私の質問を更新しました – Konrad

答えて

0

あなたがデザインを使用する場合、それが簡単になりますこれを達成するためのアンドロイドスタジオのエディタ

トップでビューを揃えるために、あなたのビュー

>に親としてandroid.support.constraint.ConstraintLayoutを追加 - 右上

app:layout_constraintEnd_toEndOf="parent" 
app:layout_constraintTop_toTopOf="parent"

でビューを揃えるために

app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toTopOf="parent"

を残しましたビューを左下に配置するには

app:layout_constraintBottom_toBottomOf="parent" 
app:layout_constraintStart_toStartOf="parent"

（あなたのケースのTextViewに）別のビュー

app:layout_constraintTop_toBottomOf="@+id/viewId"

出典

2017-12-08 12:58:38

0
の下にビューを整列するために右下 

app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent"

ビューを整列させます

試用： 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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/gridLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ProgressBar 
     android:id="@+id/progress_stage_asset" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="10dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     /> 

    <TextView 
     android:id="@+id/progress_text_stage_asset" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="text text text" 
     android:textColor="@android:color/black" 
     app:layout_constraintLeft_toLeftOf="@+id/progress_stage_asset" 
     app:layout_constraintRight_toRightOf="@+id/progress_stage_asset" 
     app:layout_constraintTop_toBottomOf="@+id/progress_stage_asset" /> 

    <ProgressBar 
     android:id="@+id/progress_stage_sync" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     /> 

    <TextView 
     android:id="@+id/progress_text_stage_sync" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="text text text" 
     app:layout_constraintLeft_toLeftOf="@id/progress_stage_sync" 
     app:layout_constraintLeft_toRightOf="@+id/progress_stage_sync" 
     app:layout_constraintTop_toBottomOf="@+id/progress_stage_sync"/> 

    <ProgressBar 
     android:id="@+id/progress_stage_completed" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="10dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintBottom_toTopOf="@+id/progress_text_stage_completed" 
     /> 

    <TextView 
     android:id="@+id/progress_text_stage_completed" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello" 
     android:textColor="@android:color/black" 
     app:layout_constraintLeft_toLeftOf="@+id/progress_stage_completed" 
     app:layout_constraintRight_toRightOf="@+id/progress_stage_completed" 
     app:layout_constraintBottom_toBottomOf="parent"/> 

    <View 
     android:id="@+id/view" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     /> 

    <ProgressBar 
     android:id="@+id/progress_stage_params" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     android:layout_marginBottom="20dp" 
     /> 

</android.support.constraint.ConstraintLayout>

出典

2017-12-08 13:54:07

関連する問題

 関連する問題