تلاشي الأسهم على صور وايتشر
-
28-09-2019 - |
سؤال
أنا أقوم بإنشاء تطبيق يستخدم صورًا لـ ImagesWitcher لإظهار بعض الصور. أريد أن أعرض الأسهم على جانبي الشاشة بالإضافة إلى زر في الأسفل عندما يكون المستخدم قد لمس الشاشة أو الصور المحولة. تمامًا كما سترى عند عرض لقطات الشاشة للتطبيق في سوق Android.
حتى الآن ، قمت بتنفيذ نشاطي على ongestureListener ، وقد أنشأت مجموعة من المشاركين التي تتلاشى ، تنام لمدة ثانية واحدة ثم تتلاشى مرة أخرى كلما تم تشغيل حدث Action_UP. المشكلة هي أنني أريد إزالة سهم إذا كان المستخدم يرفرف إلى صورة أخرى. هناك ثلاث صور.
إليك جاذبية من الكود الخاص بي.
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
new FadeInOutButtons().execute();
}
return mGesture.onTouchEvent(event);
}
private void fadeOutAll() {
Animation fadeOut = AnimationUtils.loadAnimation(
MyActivity.this, android.R.anim.fade_out);
mButtonHolder.startAnimation(fadeOut);
mButtonHolder.setVisibility(View.GONE);
if (mRightArrow.getVisibility() == View.VISIBLE) {
mRightArrow.startAnimation(fadeOut);
mRightArrow.setVisibility(View.GONE);
}
if (mLeftArrow.getVisibility() == View.VISIBLE) {
mLeftArrow.startAnimation(fadeOut);
mLeftArrow.setVisibility(View.GONE);
}
}
private class FadeInOutButtons extends AsyncTask<Void, Void, Void> {
@Override
protected Void doInBackground(Void... params) {
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
}
return null;
}
@Override
protected void onPostExecute(Void result) {
fadeOutAll();
super.onPostExecute(result);
}
@Override
protected void onPreExecute() {
Animation fadeIn = AnimationUtils.loadAnimation(
MyActivity.this, android.R.anim.fade_in);
mButtonHolder.startAnimation(fadeIn);
mButtonHolder.setVisibility(View.VISIBLE);
final int sz = mImages.size();
if (sz > 1) {
if (mPosition < sz - 1) {
mRightArrow.startAnimation(fadeIn);
mRightArrow.setVisibility(View.VISIBLE);
}
if (mPosition > 0) {
mLeftArrow.startAnimation(fadeIn);
mLeftArrow.setVisibility(View.VISIBLE);
}
}
super.onPreExecute();
}
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
final int sz = mImages.size();
if (sz > 1) {
if (velocityX < 0 && mPosition < sz - 1) {
mInactive = mActive;
mActive = (ImageView) mSwitcher.getNextView();
mActive.setImageResource(mImages.get(++mPosition));
mSwitcher.showNext();
} else if (velocityX > 0 && mPosition > 0) {
mInactive = mActive;
mActive = (ImageView) mSwitcher.getNextView();
mActive.setImageResource(mImages.get(--mPosition));
mSwitcher.showPrevious();
}
}
mInactive.setImageURI(null);
return true;
}
هل فعل أي منكم أي شيء مثل هذا من قبل؟ كيف يمكنني أن أجعل السهم الأيسر فقط يختفي عندما تركز الصورة الثالثة ، وفقط الصحيح عندما يكون الأول ... وهكذا ...؟ لقد عالقت في هذا لمدة ساعة.
شكرًا!
آسف على التنسيق.
المحلول
أولاً ، لا تستخدم AsyncTask
إذا كنت لا تقوم فعليًا بأي عمل خلفي (لا يعتبر النوم كعمل!). إستخدم Handler
متصل بخيط واجهة المستخدم و postDelayed()
لذلك.
مثال العمل على وجهات النظر الباهتة داخل وخارج
أولاً ، تخطيطك main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageSwitcher
android:id="@+id/imageSwitcher"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<Button android:id="@+id/prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Previous"
/>
<Button android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Next"
/>
</RelativeLayout>
نعم ، أنا أستخدم الأزرار بدلاً من ImageViews ، فقط للحفاظ على المثال بسيط.
الآن تتلاشى الرسوم المتحركة وتتلاشى:
fade_in.xml:
fade_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="500"
android:fillAfter="true"/>
أخيرًا ، بعض التعليمات البرمجية الفعلية لنشاطك الرئيسي:
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;
public class MainActivity extends Activity implements ViewFactory, OnTouchListener {
ImageSwitcher imageSwitcher;
View prev,next;
Handler handler = new Handler();
static final int[] images = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3
};
int currentImageIndex = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher);
imageSwitcher.setFactory(this);
imageSwitcher.setOnTouchListener(this);
prev = findViewById(R.id.prev);
next = findViewById(R.id.next);
setCurrentImage();
scheduleHideButtons();
}
private void setCurrentImage() {
imageSwitcher.setImageResource(images[currentImageIndex]);
}
private void scheduleHideButtons() {
handler.removeCallbacks(hideButtonsRunnable);
handler.postDelayed(hideButtonsRunnable, 3000);
}
private Runnable hideButtonsRunnable = new Runnable() {
@Override public void run() {
fadeButtons(false);
}
};
private void fadeButtons(final boolean fadeIn) {
if (fadeIn) {
scheduleHideButtons();
}
Animation anim = AnimationUtils.loadAnimation(this, fadeIn?R.anim.fade_in:R.anim.fade_out);
prev.startAnimation(anim);
next.startAnimation(anim);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationEnd(Animation animation) {
prev.setVisibility(fadeIn?View.VISIBLE:View.GONE);
next.setVisibility(fadeIn?View.VISIBLE:View.GONE);
}
@Override public void onAnimationRepeat(Animation animation) { }
@Override public void onAnimationStart(Animation animation) { }
});
}
@Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setBackgroundColor(0xFF000000);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
ImageSwitcher.LayoutParams.FILL_PARENT,
ImageSwitcher.LayoutParams.FILL_PARENT));
return imageView;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction()==MotionEvent.ACTION_DOWN) {
if (prev.getVisibility()==View.GONE) {
fadeButtons(true);
}
else {
scheduleHideButtons();
}
}
return false;
}
}