Using ConstraintLayout instead of LinearLayouts in PostsList

This commit is contained in:
Pierre HUBERT 2018-08-31 14:43:48 +02:00
parent bc662d2174
commit ab37254cf7
2 changed files with 96 additions and 76 deletions

View File

@ -1,17 +1,12 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <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" xmlns:tools="http://schemas.android.com/tools"
style="@style/PostContainer" style="@style/PostContainer"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"> android:orientation="vertical">
<!-- Information about user who created the post -->
<LinearLayout
style="@style/PostHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<org.communiquons.android.comunic.client.ui.views.WebUserAccountImage <org.communiquons.android.comunic.client.ui.views.WebUserAccountImage
android:id="@+id/user_account_image" android:id="@+id/user_account_image"
android:layout_width="@dimen/account_image_default_width" android:layout_width="@dimen/account_image_default_width"
@ -19,11 +14,6 @@
android:contentDescription="@string/user_image_description" android:contentDescription="@string/user_image_description"
android:src="@drawable/default_account_image" /> android:src="@drawable/default_account_image" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<!-- User name --> <!-- User name -->
<TextView <TextView
@ -32,6 +22,10 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="@+id/user_account_image"
app:layout_constraintTop_toTopOf="parent"
tools:text="User name" /> tools:text="User name" />
<!-- Post creation time --> <!-- Post creation time -->
@ -40,15 +34,10 @@
style="@style/PostDate" style="@style/PostDate"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/user_account_name"
app:layout_constraintTop_toBottomOf="@+id/user_account_name"
tools:text="15 days ago" /> tools:text="15 days ago" />
</LinearLayout>
<!-- Separator -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- Post visibility level --> <!-- Post visibility level -->
<ImageView <ImageView
@ -57,26 +46,39 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="@dimen/post_options_btn_height" android:layout_height="@dimen/post_options_btn_height"
android:layout_gravity="top" android:layout_gravity="top"
android:src="@drawable/ic_public"
android:contentDescription="@string/post_visibility_icon" android:contentDescription="@string/post_visibility_icon"
android:src="@drawable/ic_public"
android:tint="@color/darker_gray"
app:layout_constraintEnd_toStartOf="@+id/post_actions_btn"
app:layout_constraintTop_toTopOf="@+id/post_actions_btn"
tools:text="Public" /> tools:text="Public" />
<!-- Actions button -->
<ImageView <ImageView
android:id="@+id/post_actions_btn" android:id="@+id/post_actions_btn"
style="@style/PostActionsButton" style="@style/PostActionsButton"
android:layout_width="@dimen/post_options_btn_width" android:layout_width="@dimen/post_options_btn_width"
android:layout_height="@dimen/post_options_btn_height" android:layout_height="@dimen/post_options_btn_height"
android:layout_gravity="top" android:layout_gravity="top"
android:contentDescription="@string/post_action_btn_description" /> android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:contentDescription="@string/post_action_btn_description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<!-- Additional views --> <!-- Additional views -->
<FrameLayout <FrameLayout
android:id="@+id/additional_views" android:id="@+id/additional_views"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" /> android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/user_account_image"
tools:layout_height="10dp" />
<!-- Post content --> <!-- Post content -->
<TextView <TextView
@ -84,6 +86,12 @@
style="@style/PostContent" style="@style/PostContent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/additional_views"
tools:text="Post content" /> tools:text="Post content" />
<!-- Like button --> <!-- Like button -->
@ -91,21 +99,39 @@
android:id="@+id/like_button" android:id="@+id/like_button"
style="@style/PostLikeButton" style="@style/PostLikeButton"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" /> android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/post_content" />
<!-- Post comments --> <!-- Post comments -->
<LinearLayout <LinearLayout
android:id="@+id/comments_list" android:id="@+id/comments_list"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" /> android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/like_button"
tools:background="@color/holo_red_dark"
tools:layout_height="30dp" />
<!-- Comments form --> <!-- Comments form -->
<LinearLayout <LinearLayout
android:id="@+id/create_comment_form" android:id="@+id/create_comment_form"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal"> android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/comments_list">
<!-- Comment hint --> <!-- Comment hint -->
<org.communiquons.android.comunic.client.ui.views.EditCommentContentView <org.communiquons.android.comunic.client.ui.views.EditCommentContentView
@ -127,4 +153,4 @@
</LinearLayout> </LinearLayout>
</LinearLayout> </android.support.constraint.ConstraintLayout>

View File

@ -80,18 +80,12 @@
<!-- Comment actions button --> <!-- Comment actions button -->
<style name="PostActionsButton"> <style name="PostActionsButton">
<item name="android:padding">2dp</item>
<item name="android:layout_gravity">center</item> <item name="android:layout_gravity">center</item>
<item name="android:background">?selectableItemBackground</item> <item name="android:background">?selectableItemBackground</item>
<item name="android:src">@drawable/ic_more</item> <item name="android:src">@drawable/ic_more</item>
<item name="android:tint">@android:color/darker_gray</item> <item name="android:tint">@android:color/darker_gray</item>
</style> </style>
<!-- Post header -->
<style name="PostHeader">
<item name="android:padding">2dp</item>
</style>
<!-- Post owner name --> <!-- Post owner name -->
<style name="PostOwnerName"> <style name="PostOwnerName">
<item name="android:paddingLeft">5dp</item> <item name="android:paddingLeft">5dp</item>
@ -101,7 +95,7 @@
<!-- Post date --> <!-- Post date -->
<style name="PostDate"> <style name="PostDate">
<item name="android:paddingLeft">10dp</item>
</style> </style>
<!-- Post visibility --> <!-- Post visibility -->