Как исправить дергание у фиксированного заголовка при прокрутке списка?

Question

[Артем]

Задача: нужно сделать фиксированный заголовок над ListView, который будет прятаться при прокрутке вниз и возвращаться при прокрутке вверх.

Проблема: при медленной прокрутке вниз заголовок начинает моргать. Понятно, что это происходит из-за того, что список изменяется по высоте при убирании заголовка и scroll listener вызывается с другими позициями. Но как это обойти?

Выглядит так:


Исходный код в архиве: sderni.ru/280526

Активити:

public class MainActivity extends ActionBarActivity implements AbsListView.OnScrollListener {

    private static final int LIST_DATA_COUNT = 100;
    private View mHeader;
    private int mLastFirstVisibleItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mHeader = findViewById(R.id.textView);

        String[] listData = new String[LIST_DATA_COUNT];
        for (int i=0;i<LIST_DATA_COUNT;i++) {
            listData[i]= String.valueOf(i);
        }

        ListView listView = (ListView) findViewById(R.id.listView);
        listView.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, android.R.id.text1, listData));
        listView.setOnScrollListener(this);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (firstVisibleItem<mLastFirstVisibleItem) {
            Log.d("tag", "up");
            mHeader.setVisibility(View.VISIBLE);
        } else if (firstVisibleItem>mLastFirstVisibleItem) {
            Log.d("tag", "down");
            mHeader.setVisibility(View.GONE);
        }
        mLastFirstVisibleItem = firstVisibleItem;
    }
}

Разметка:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Header"
        android:gravity="center"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/textView"/>
</RelativeLayout>

Logcat:

D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down
D/tag? up
D/tag? down

Comments

[Aleksandr Koscheev]

что-то не сходится. такое впечатление, что у вас ListView находится под TextView и вся эта история происходит в LinearLayout

[Артем]

Aleksandr Koscheev: нет, LinearLayout здесь вообще нет, а код скопирован из проекта с которого сделана анимация выше. Можете попробовать скачать проект по ссылке и запустить его, чтобы посмотреть вживую.

[Aleksandr Koscheev]

Артем: у вас в исходнике android:layout_below="@id/textView"

[Aleksandr Koscheev]

Артем: разберитесь с макетом и сделайте прозрачный бекграунд у TextView

[Артем]

Aleksandr Koscheev: да, below. Серьезно, просто запустите и сразу увидите все от и до. Макет в порядке, здесь проблемы нет. Прозрачность там не нужна совсем, дело не в ней. Заголовок должен динамически убираться и появляться в зависимости от прокрутки, за это отвечает код в onScroll и нужно как-то правильно подобрать логику.

[Aleksandr Koscheev]

Артем: вы below убрали? не помогло?

[Артем]

Aleksandr Koscheev: так если я уберу below, то список перекроет TextView. Мне это не нужно. Разметка сделано верно и её обсуждение выходит за рамки вопроса.

[Aleksandr Koscheev]

Артем: ну раз вам нужна такая разметка, тогда советую поменять GONE на INVISIBLE

[Aleksandr Koscheev]

Артем: "список перекроет TextView" - и это не обязательно, можно сделать так, чтобы оба элемента были видны.

Answer 1

[Артем]

Сделал так:

listView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();
                if (action == MotionEvent.ACTION_DOWN) {
                    startY = event.getY();
                } else if (action == MotionEvent.ACTION_MOVE) {
                    float y = event.getY();
                    if(startY-y<-60){
                        mHeader.setVisibility(View.VISIBLE);
                    }else if(startY-y>60){
                        mHeader.setVisibility(View.GONE);
                    }
                }
                return false;
            }
        });

Answer 2

[Эмин]

Разберитесь с новой design support lib, для таких нужд в ней ввели CoordinatorLayout.
Читать здесь, ну и в гугле достаточно еще статей.

Comments

[Артем]

Нашел указания, что CoordinatorLayout не работает с ListView.

[Константин Берков]

Артем: Попробуйте RecyclerView, он очень даже няшный и удобный, ну или в onScroll'е используйте setTranslate для этого хидера, примеров море.

[Артем]

Константин Берков: да, думал над этим. Но это потребует основательной переделки списка, в данный момент для этого возможности нет, к сожалению.

[Константин Берков]

Артем: И совсем не основательной, во-первых вы избавитесь от старого виджета, во-вторых от медленного ArrayAdapter'a (по хорошему с ListView стоит использовать расширенный BaseAdapter, ну или CursorAdapter), в-третьих вы научитесь использовать новый виджет и теперь никак не отвертитесь от паттерна ViewHolder и в-четвертых вы сделает то что вам нужно. Чистое здоровье, а добавятся всего два новых класса - адаптер и ViewHolder.

[Эмин]

Константин Берков: конечно, даже добавить нечего)