Изображение CollapsingToolbarLayout с масштабированием

Я читал весь день без какого-либо успеха в этом.

По сути, вы хотите иметь возможность установить ImageView внутри android.support.design.widget.CollapsingToolbarLayout, чтобы изменить его высоту в зависимости от обнаруженного изменения onOffsetChanged, чтобы он «уменьшался» при сворачивании, чтобы соответствовать всей ширине изображения и «масштабировать -in" при расширении для нормального поведения centerCrop.

Я попытался установить высоту ImageView в onOffsetChanged, но это вызывает другие проблемы, предполагающие, что CollapsingToolbarLayout также перемещает его.

Пример функциональности, который я видел в проекте ParallaxListView, но хочу использовать CollapsingToolbarLayout.

Кто-нибудь может дать пример кода (если это возможно)?

введите описание изображения здесь

Также замечен этот проект, но снова аналогичное ограничение. Другие проекты также.

введите описание изображения здесь


person George    schedule 28.06.2017    source источник


Ответы (2)


Вы можете попробовать использовать android:scaleType="matrix"для определения макета сворачивающегося изображения.

В коде сохраните начальный ImageMatrix в Matrix, используя matrix.set(imageView.getImageMatrix());

И в зависимости от прокрутки сворачивающейся панели инструментов вы можете использовать matrix.postScale() для масштабирования изображения и, наконец, вернуть его в ImageView с помощью imageView.setImageMatrix(matrix). Это может дать вам эффект увеличения / уменьшения.

person Balamurugan    schedule 28.06.2017

В конце концов мне удалось сделать это со следующим кодом для всех, кто может помочь. Код будет соответствовать ширине при расширении и высоте при сворачивании. При необходимости его можно изменить для дальнейшего масштабирования (увеличения).

Не уверен, что написан оптимальный код, предложения приветствуются. Чтобы измерить растровое изображение и представление и вычислить минимальный/максимальный масштаб, я использую первый вызов onOffsetChanged, который, кажется, работает нормально.

открытый класс MyActivity расширяет AppCompatActivity, реализует AppBarLayout.OnOffsetChangedListener {

private float collapsedScale;
private float expandedScale;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.my_activity_layout);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    setTitle(entry.label);

    photoView = (ImageView) findViewById(R.id.photo_image);

    AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    mAppBarLayout.addOnOffsetChangedListener(this);

}

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

    int maxScroll = appBarLayout.getTotalScrollRange();

    float scrollPercent = (float) Math.abs(verticalOffset) / (float) maxScroll;

    if (collapsedScale == 0) {

        Drawable photo = photoView.getDrawable();

        int bitmapWidth = photo.getIntrinsicWidth();
        int bitmapHeight = photo.getIntrinsicHeight();

        collapsedScale = (float)photoView.getWidth()/(float)bitmapWidth;
        expandedScale = (float)photoView.getHeight()/(float)bitmapHeight;

        scalePhotoImage(photoView, expandedScale);

    } else {

        scalePhotoImage(photoView, collapsedScale + (expandedScale - collapsedScale) * (1f - scrollPercent));
    }
}

private static void scalePhotoImage(ImageView photoView, float scale) {

    Drawable photo = photoView.getDrawable();

    int bitmapWidth = photo.getIntrinsicWidth();
    int bitmapHeight = photo.getIntrinsicHeight();

    float offsetX = (photoView.getWidth() - bitmapWidth) / 2F;
    float offsetY = (photoView.getHeight() - bitmapHeight) / 2F;

    float centerX = photoView.getWidth() / 2F;
    float centerY = photoView.getHeight() / 2F;

    Matrix imageMatrix = new Matrix();
    imageMatrix.setScale(scale, scale, centerX, centerY);
    imageMatrix.preTranslate(offsetX, offsetY);

    photoView.setImageMatrix(imageMatrix);
}
}

Мой макет

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:elevation="6dp"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        app:contentScrim="@android:color/transparent">

        <ImageView
            android:id="@+id/photo_image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/demo_photo"
            android:fitsSystemWindows="true"
            android:scaleType="matrix"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:theme = "@style/ToolBarStyle"
            app:layout_collapseMode="pin">

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

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <include layout="@layout/content_layout" />

</android.support.v4.widget.NestedScrollView>

person George    schedule 28.06.2017
comment
Как я могу добиться обратной версии этого? - person LutfiTekin; 17.02.2020