私はscrollviewを作成し、その中にimageviewを配置しました。下の画像と同じようにスクロールしてサイズを変更したいのですが、これまでのところほとんど成功していません。
私の試みでは、スクロール時に画像のサイズが変更されましたが、サイズ変更後にスペースが残っています。以下をどのように変更しますか:
画像:
これまでの私のコード:
activity_main.xml
<ImageView
Android:layout_gravity="center"
Android:adjustViewBounds="true"
Android:layout_width="601dp"
Android:layout_height="250dp"
Android:paddingTop="0dp"
Android:paddingLeft="0dp"
Android:paddingRight="0dp"
Android:scaleType="fitXY"
Android:id="@+id/contactPic"
Android:src="@drawable/stock"
Android:clickable="true"/>
MainActivity:
@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
final ImageView contactPicture = (ImageView) findViewById(R.id.contactPic);
final RelativeLayout contactLayout = (RelativeLayout) findViewById(R.id.ContactRLayout);
if (scrollView == contactScrollView) {
View view = (View) scrollView.getChildAt(scrollView.getChildCount() - 1);
int distanceFromPageEnd = (view.getBottom() - (scrollView.getHeight() + scrollView.getScrollY()));
Log.e("onScrollChanged", "distance from bottom = " + String.valueOf(distanceFromPageEnd));
if (distanceFromPageEnd >= 1408)
{
contactPicture.getLayoutParams().height = (distanceFromPageEnd - 1408);
contactPicture.requestLayout();
}
}
ScrollViewListener:
public interface ScrollViewListener {
void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);
}
ObservableScrollView:
public class ObservableScrollView extends ScrollView {
private ScrollViewListener scrollViewListener = null;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
public void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if(scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
}
視差効果を実現する方法を示す簡単な例を以下に示します。
まず、ImageView
と他のビューをFrameLayout
に配置します。
<ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/scrollView"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<FrameLayout
Android:id="@+id/flWrapper"
Android:layout_width="match_parent"
Android:layout_height="wrap_content">
<ImageView
Android:id="@+id/contactPic"
Android:layout_width="match_parent"
Android:layout_height="@dimen/contact_photo_height"
Android:scaleType="centerCrop"
Android:src="@drawable/stock" />
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="@dimen/contact_photo_height">
<!-- Other Views -->
</LinearLayout>
</FrameLayout>
</ScrollView>
LinearLayout
の上マージンはImageViews
の高さ(@dimen/contact_photo_height
(この例では)。
次に、ScrollView
のスクロール位置をリッスンし、ImageView
の位置を変更する必要があります。
@Override
protected void onCreate(Bundle savedInstanceState) {
<...>
mScrollView = (ScrollView) findViewById(R.id.scrollView);
mPhotoIV = (ImageView) findViewById(R.id.contactPic);
mWrapperFL = (FrameLayout) findViewById(R.id.flWrapper);
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ScrollPositionObserver());
<...>
}
private class ScrollPositionObserver implements ViewTreeObserver.OnScrollChangedListener {
private int mImageViewHeight;
public ScrollPositionObserver() {
mImageViewHeight = getResources().getDimensionPixelSize(R.dimen.contact_photo_height);
}
@Override
public void onScrollChanged() {
int scrollY = Math.min(Math.max(mScrollView.getScrollY(), 0), mImageViewHeight);
// changing position of ImageView
mPhotoIV.setTranslationY(scrollY / 2);
// alpha you could set to ActionBar background
float alpha = scrollY / (float) mImageViewHeight;
}
}