Skip to content

Commit

Permalink
feat(android): flatten ListView layout (#14037)
Browse files Browse the repository at this point in the history 
* feat(android): flatten ListView layout

* change layout order

* adjust right padding

* fix footer/headerView

* update library, move to async updates
  • Loading branch information
@m1ga
m1ga authored Aug 26, 2024
1 parent 3eda594 commit b9fd683
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 95 deletions.
167 changes: 81 additions & 86 deletions android/modules/ui/res/layout/titanium_ui_listview_holder.xml
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,91 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/titanium_ui_listview_holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:outlineProvider="bounds">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/titanium_ui_listview_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:outlineProvider="bounds">

<!-- Header Container -->
<RelativeLayout
android:id="@+id/titanium_ui_listview_holder_header_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:addStatesFromChildren="true"
app:layout_constraintBottom_toTopOf="@+id/titanium_ui_listview_holder_footer_title"
app:layout_constraintStart_toEndOf="@id/titanium_ui_listview_holder_left_image"
app:layout_constraintTop_toBottomOf="@+id/titanium_ui_listview_holder_header_title" />

<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="@+id/titanium_ui_listview_holder_header_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="18dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:gravity="center_vertical"
android:focusable="false"
android:focusableInTouchMode="false"/>
</RelativeLayout>
<ImageView
android:id="@+id/titanium_ui_listview_holder_left_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:paddingStart="6dp"
android:paddingEnd="0dp"
app:layout_constraintBottom_toTopOf="@id/titanium_ui_listview_holder_footer_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/titanium_ui_listview_holder_header_title" />

<!-- Outer Content Container -->
<RelativeLayout
android:id="@+id/titanium_ui_listview_holder_outer_content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/titanium_ui_listview_holder_header_container"
android:addStatesFromChildren="true">
<ImageView
android:id="@+id/titanium_ui_listview_holder_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="6dp"
android:focusable="false"
android:focusableInTouchMode="false"
app:layout_constraintBottom_toBottomOf="@id/titanium_ui_listview_holder_footer_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/titanium_ui_listview_holder_header_title" />

<ImageView
android:id="@+id/titanium_ui_listview_holder_left_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="6dp"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="@+id/titanium_ui_listview_holder_header_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center_vertical"
android:minHeight="18dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/titanium_ui_listview_holder_left_image"
android:addStatesFromChildren="true"/>
<TextView
android:id="@+id/titanium_ui_listview_holder_footer_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center_vertical"
android:minHeight="18dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

<ImageView
android:id="@+id/titanium_ui_listview_holder_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="6dp"
android:focusable="false"
android:focusableInTouchMode="false"/>

</RelativeLayout>
<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<!-- Footer Container -->
<RelativeLayout
android:id="@+id/titanium_ui_listview_holder_footer_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@id/titanium_ui_listview_holder_outer_content_container">
<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

<org.appcelerator.titanium.view.TiCompositeLayout
android:id="@+id/titanium_ui_listview_holder_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="@+id/titanium_ui_listview_holder_footer_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="18dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:gravity="center_vertical"
android:focusable="false"
android:focusableInTouchMode="false" />
</RelativeLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
4 changes: 2 additions & 2 deletions android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/ListViewAdapter.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

import android.content.Context;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;

public class ListViewAdapter extends TiRecyclerViewAdapter<ListViewHolder, ListItemProxy>
{
Expand Down Expand Up @@ -112,7 +112,7 @@ public void onBindViewHolder(@NonNull ListViewHolder holder, int position)
public ListViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
{
// Create new TableViewHolder instance.
final RelativeLayout layout = (RelativeLayout) inflater.inflate(id_holder, null);
final ConstraintLayout layout = (ConstraintLayout) inflater.inflate(id_holder, null);
return new ListViewHolder(parent.getContext(), layout);
}

Expand Down
29 changes: 26 additions & 3 deletions android/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/ListViewHolder.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
import org.appcelerator.titanium.view.TiCompositeLayout;
import org.appcelerator.titanium.view.TiUIView;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
Expand All @@ -33,6 +34,8 @@
import android.widget.ImageView;
import android.widget.TextView;

import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.recyclerview.widget.RecyclerView;

import java.lang.ref.WeakReference;
Expand Down Expand Up @@ -70,7 +73,7 @@ public ListViewHolder(final Context context, final ViewGroup viewGroup)
// Header attributes.
setTitleAttributes("header", context, this.headerTitle);

this.container = viewGroup.findViewById(R.id.titanium_ui_listview_holder_outer_content_container);
this.container = viewGroup.findViewById(R.id.titanium_ui_listview_holder);

this.leftImage = viewGroup.findViewById(R.id.titanium_ui_listview_holder_left_image);

Expand All @@ -92,6 +95,7 @@ public ListViewHolder(final Context context, final ViewGroup viewGroup)
* @param proxy ListItemProxy to bind.
* @param selected Is row selected.
*/
@SuppressLint("ClickableViewAccessibility")
public void bind(final ListItemProxy proxy, final boolean selected)
{
reset();
Expand Down Expand Up @@ -165,7 +169,6 @@ public void bind(final ListItemProxy proxy, final boolean selected)
this.rightImage.setVisibility(View.VISIBLE);

RecyclerView.ViewHolder mViewHolder = this;

this.rightImage.setOnTouchListener(new View.OnTouchListener()
{
@Override
Expand Down Expand Up @@ -252,7 +255,7 @@ public boolean onTouch(View view, MotionEvent motionEvent)
borderView.setAddStatesFromChildren(true);

// Amend maximum size for content to parent ListView measured height.
this.content.setChildFillHeight(nativeListView.getMeasuredHeight());
this.container.setMinimumHeight(nativeListView.getMeasuredHeight());

// Add ListViewItem to content.
this.content.addView(borderView, view.getLayoutParams());
Expand Down Expand Up @@ -362,6 +365,16 @@ private void setHeaderFooter(TiViewProxy listViewProxy,

this.header.addView(headerView, view.getLayoutParams());
this.header.setVisibility(View.VISIBLE);

ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone((ConstraintLayout) this.container);
constraintSet.connect(R.id.titanium_ui_listview_holder_content, ConstraintSet.TOP,
R.id.titanium_ui_listview_holder_header, ConstraintSet.BOTTOM, 0);
constraintSet.connect(R.id.titanium_ui_listview_holder_left_image, ConstraintSet.TOP,
R.id.titanium_ui_listview_holder_header, ConstraintSet.BOTTOM, 0);
constraintSet.connect(R.id.titanium_ui_listview_holder_right_image, ConstraintSet.TOP,
R.id.titanium_ui_listview_holder_header, ConstraintSet.BOTTOM, 0);
constraintSet.applyTo((ConstraintLayout) this.container);
}
}
}
Expand Down Expand Up @@ -396,6 +409,16 @@ private void setHeaderFooter(TiViewProxy listViewProxy,

this.footer.addView(footerView, view.getLayoutParams());
this.footer.setVisibility(View.VISIBLE);

ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone((ConstraintLayout) this.container);
constraintSet.connect(R.id.titanium_ui_listview_holder_content, ConstraintSet.BOTTOM,
R.id.titanium_ui_listview_holder_footer, ConstraintSet.TOP, 0);
constraintSet.connect(R.id.titanium_ui_listview_holder_left_image, ConstraintSet.BOTTOM,
R.id.titanium_ui_listview_holder_footer, ConstraintSet.TOP, 0);
constraintSet.connect(R.id.titanium_ui_listview_holder_right_image, ConstraintSet.BOTTOM,
R.id.titanium_ui_listview_holder_footer, ConstraintSet.TOP, 0);
constraintSet.applyTo((ConstraintLayout) this.container);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions ...oid/modules/ui/src/java/ti/modules/titanium/ui/widget/listview/TiRecyclerViewAdapter.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ public void update(List<V> newModels, boolean force)
return;
}

final var diffResult = DiffUtil.calculateDiff(new DiffCallback(newModelsClone, this.models));
final var diffResult = DiffUtil.calculateDiff(new AsyncListDiffer(newModelsClone, this.models));

// Update models.
this.models = newModelsClone;
Expand All @@ -129,13 +129,13 @@ public void update(List<V> newModels, boolean force)
/**
* Define DiffUtil.Callback to optimize updating the adapter.
*/
private class DiffCallback extends DiffUtil.Callback
private class AsyncListDiffer extends DiffUtil.Callback
{

List<V> newViews;
List<V> oldViews;

public DiffCallback(List<V> newViews, List<V> oldViews)
public AsyncListDiffer(List<V> newViews, List<V> oldViews)
{
this.newViews = newViews;
this.oldViews = oldViews;
Expand Down
2 changes: 1 addition & 1 deletion android/titanium/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ dependencies {
implementation 'androidx.exifinterface:exifinterface:1.3.6'
implementation "androidx.fragment:fragment:${project.ext.tiAndroidXFragmentLibVersion}"
implementation 'androidx.media:media:1.6.0'
implementation 'androidx.recyclerview:recyclerview:1.3.1'
implementation 'androidx.recyclerview:recyclerview:1.3.2'
implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
implementation 'androidx.transition:transition:1.4.1'
Expand Down

0 comments on commit b9fd683

Please sign in to comment.