Paralax-Effekt im App-Hintergrund

Im neu in Android Welt. Ich möchte einige Parallaxe Hintergrundeffekte in meiner App setzen.

Wie kann ich es tun? Wie kann man das in Android anfangen?

  • Ist es möglich, Icons auf Action Bar Tabs für Android zu haben?
  • Wie man Android-Quelle an Eclipse anhängt
  • Kein Quell-Attachment-Fehler beim Debuggen von Android-Anwendungen
  • Holen Sie alle Alarme in der Alarmanwendung gespeichert
  • Automatisches Löschen von LogCat auf jedem Eclipse Debug / Run?
  • Welche Art von Verbindung besteht zwischen innerRadiusRatio und thicknessRatio von GradientDrawable class?
  • Gibt es einen produktiven Weg, um 2-3 Layer Parallax Hintergrund zu schaffen? Gibt es ein Werkzeug oder eine Klasse in Android API?

    Oder vielleicht muss ich den Hintergrundbildort oder die Ränder "manuell" im Code ändern?

    Im mit API Level 19.

    Ich habe versucht, Paralloid-Bibliothek zu verstehen, aber das ist zu groß, um ohne jede Erklärung zu verstehen. Im neu auf Android und Java, ich bin nicht vertraut mit allen Layouts und anderen UI-Objekten, aber ich bin mit MVC vertraut.

    Ich begann Bounty, vielleicht kann jemand Schritt für Schritt erklären, wie diese Bibliothek funktioniert.

  • Verschieben Sie das Android-Eclipse-Projekt in den Arbeitsbereich
  • Proguard-Rücklaufwerkzeugausgang
  • Eclipse erzeugt keine Hauptaktivität und Layout
  • Instant Run erfordert 'Tools | Android | Aktivieren der ADB-Integration 'aktiviert werden
  • Programmierbar drehbar oder sichtbar drehen
  • Android Bitmap speichern ohne transparenten Bereich
  • 6 Solutions collect form web for “Paralax-Effekt im App-Hintergrund”

    Dies ist, was Sie tun können:

    In deiner Aktivitäts- / Fragment-Layout-Datei spezifizieren 2 ScrollViews (sagen background_sv und content_sv).

    <?xml version="1.0" encoding="utf-8"?> <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" > <com.example.parallax.MyScrollView android:id="@+id/background_sv" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/parallax_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:background="..." /> </com.example.parallax.MyScrollView> <com.example.parallax.MyScrollView android:id="@+id/content_sv" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout> </com.example.parallax.MyScrollView> </RelativeLayout> 

    Fügen Sie eine Dummy-Ansicht in den Inhalt scrollview der Höhe des Hintergrunds und machen es transparent. Nun, füge einen scroll-Listener an den content_sv an. Wenn der Inhalt scrollview gescrollt wird, rufen Sie an

     mBgScrollView.scrollTo(0, (int)(y /*scroll Of content_sv*/ / 2f)); 

    Die vorhandenen APIs haben nicht die Unterstützung, um die Scroll-Ereignisse zu erhalten. Daher müssen wir eine benutzerdefinierte ScrollView erstellen, um den ScrollViewListener bereitzustellen.

     package com.example.parallax; // imports; public class MyScrollView extends ScrollView { public interface ScrollViewListener { void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy); } private ScrollViewListener scrollViewListener = null; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public void setScrollViewListener(ScrollViewListener scrollViewListener) { this.scrollViewListener = scrollViewListener; } @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); } } } 

    Hier ist die Aktivität, die sowohl den Inhalt ScrollView als auch den Hintergrund ScrollView beherbergt

     package com.example.parallax; // imports; public class ParallaxActivity extends Activity implements ScrollViewListener { private MyScrollView mBgScrollView; private MyScrollView mContentScrollView; @Override public void onCreate(Bundle savedInstanceState) { mBgScrollView = findViewById(R.id.background_sv); mContentScrollView = findViewById(R.id.content_sv); mContentScrollView.setOnScrollListener(this); } @Override public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) { super.onScrollChanged(scrollView, x, y, oldx, oldy); // when the content scrollview will scroll by say 100px, // the background scrollview will scroll by 50px. It will // look like a parallax effect where the background is // scrolling with a different speed then the content scrollview. mBgScrollView.scrollTo(0, (int)(y / 2f)); } } 

    Ich denke, die Frage ist unklar, also ist das nicht wirklich eine Antwort so viel wie ein Versuch, mit mehr Details zu klären, als ich in einen Kommentar einschließen könnte.

    Meine Frage ist, welche Art von Parallaxeffekt Sie erreichen wollen. Angesichts dieser drei Beispiele (es handelt sich um Demo-Apps, die du aus dem Play Store installieren kannst), welches, wenn überhaupt, die Art des Parallaxeffektes, den du willst? Bitte antworte in einem Kommentar.

    • Paralloid-Demo

    • Parallax Scroll Demo

    • Google IO App

    Angesichts einer Antwort finden wir es einfacher zu helfen. Wenn Sie Ihre Frage bearbeiten, um diese Informationen einzuschließen, wird sie verbessert.

    Im Folgenden finden Sie eine Beispielanwendung, die vom Autor von Paralloid veröffentlicht wurde :

    https://github.com/chrisjenx/Paralloid/tree/master/paralloidexample

    Von der GitHub-Seite unter dem Abschnitt "Getting Started":

    Layout

    ScrollView

    Dies ist ein Beispiel, wenden Sie sich bitte an die paralloidexample App für den vollständigen Code.

     <FrameLayout ..> <FrameLayout android:id="@+id/top_content" android:layout_width="match_parent" android:layout_height="192dp"/> <uk.co.chrisjenx.paralloid.views.ParallaxScrollView android:id="@+id/scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true"> <LinearLayout android:id="@+id/scroll_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="192dp"/> </uk.co.chrisjenx.paralloid.views.ParallaxScrollView> </FrameLayout> 

    Fragment

    Innerhalb deiner onViewCreated() oder onCreateView() .

     //... FrameLayout topContent = (FrameLayout) rootView.findViewById(R.id.top_content); ScrollView scrollView = (ScrollView) rootView.findViewById(R.id.scroll_view); if (scrollView instanceof Parallaxor) { ((Parallaxor) scrollView).parallaxViewBy(topContent, 0.5f); } // TODO: add content to top/scroll content 

    Das ist es!

    Schauen Sie sich die Parallaxor-Schnittstelle für die anwendbaren Parallax-Methoden an.

    Hoffe das hilft!

    Auch hier ist ein Link zu Google's 'Erste Schritte' Seite für Android.

    Auch hier ist ein Link zu einem 'Java Tutorial für komplette Anfänger'.

    Neben der Verknüpfung zu einer Dokumentation über Layouts, die die visuelle Struktur für eine Benutzeroberfläche definieren.

    Das heißt, du würdest das Layout verwenden, um zu definieren, wie die Schnittstelle aussieht und den nachfolgenden Beispielcode verwendet, um zu definieren, was passiert, wenn du damit interagierst.

    PS Sie können die Anwendung hier in Aktion sehen

    Ich benutze die ParallaxScroll Bibliothek . Sehr einfach zu bedienen, gute Proben und gut dokumentiert.

    Hier ist, wie es mit ScrollView gemacht werden kann und es ist Hintergrundbild. Ich habe den Code in Github begangen .

    Sie müssen die ScrollView und Drawable Klassen erweitern.

    1. Die ScrollView-Hintergrundhöhe ist standardmäßig dieselbe wie die Ansichtsfensterhöhe. Um den Parallaxeffekt zu erreichen, sollte die Hintergrundhöhe größer sein und sollte auf der ScrollView-Kinderhöhe und dem Hintergrund-Scroll-Faktor basieren, den wir auferlegen möchten. Der Hintergrund-Scrollfaktor von 1 zeigt an, dass die Hintergrundhöhe dieselbe ist wie die ScrollView-Child-Höhe, und daher wird der Hintergrund mit demselben Offset scrollen, während das Kind scrollt. 0,5 zeigt an, die Hintergrundhöhe beträgt 0,5 mal ScrollView Kinder verlängerte Höhe und wird 50% langsamer im Vergleich zu den untergeordneten Inhalten scrollen. Dies bringt effektiv den Parallaxen-Scrolling-Effekt.

    Aufruf der folgenden Methode aus dem ScrollView-Konstruktor:

     void init() { // Calculate background drawable size before first draw of scrollview getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { // Remove the listener getViewTreeObserver().removeOnPreDrawListener(this); mDrawable = (ParallaxDrawable) getBackground(); if(mDrawable != null && mDrawable instanceof ParallaxDrawable) { // Get the only child of scrollview View child = getChildAt(0); int width = child.getWidth(); // calculate height of background based on child height and scroll factor int height = (int) (getHeight() + (child.getHeight() - getHeight()) * mScrollFactor); mDrawable.setSize(width, height); } return true; } }); } 
    1. Wenn ScrollView gescrollt wird, berücksichtigen Sie den Scroll-Offset beim Zeichnen des Hintergrunds. Dies erreicht grundsätzlich den Parallaxeffekt.

    ParallaxScrollView:

     protected void onScrollChanged(int x, int y, int oldX, int oldY) { if(mDrawable != null && mDrawable instanceof ParallaxDrawable) { // set the scroll offset for the background drawable. mDrawable.setScrollOffset(x*mScrollFactor, y*mScrollFactor); } } 

    ParallaxDrawable:

     @Override public void draw(Canvas canvas) { // To move the background up, translate canvas by negative offset canvas.translate(-mScrollXOffset, -mScrollYOffset); mDrawable.draw(canvas); canvas.translate(mScrollXOffset, mScrollYOffset); } protected void onBoundsChange(Rect bounds) { // This sets the size of background drawable. mDrawable.setBounds(new Rect(bounds.top, bounds.left, bounds.left + mWidth, bounds.top + mHeight)); } 

    Verwendung von ParallaxScrollView und ParallaxDrawable:

     public class MyActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.parallax_layout); final ParallaxScrollView scrollView = (ParallaxScrollView) findViewById(R.id.sv); ParallaxDrawable drawable = new ParallaxDrawable(getResources().getDrawable(R.drawable.bg)); scrollView.setBackground( drawable, 0.2f ); } } 

    Parallax_layout.xml:

     <manish.com.parallax.ParallaxScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/sv" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:text="@string/text" /> <View android:layout_width="match_parent" android:layout_height="5dp" /> ... </LinearLayout> </manish.com.parallax.ParallaxScrollView> 

    Die Android-API unterstützt nicht viel konkrete Werkzeuge für sie, wie Sie wahrscheinlich bemerkt haben. In API 20 addierten sie Höhen, die ein Attribut für Tiefe sind. Dies unterstützt nicht Parallaxen Layouts selbst, aber ich würde sagen, es ist ein Schritt von Google, um diese Art von Arbeit einfacher zu machen. Wenn du eine wilde Vermutung wünschst, wenn und wann würde ich sagen, dass Parallax Utilities hinzugefügt werden könnte, bevor API 25 veröffentlicht wird, basierend auf dem neuesten Update und dem Fortschritt in der Batterieeffizienz.

    Für jetzt ist alles, was Sie brauchen, auf eine Art von Bewegung zu hören und ändern Sie die Ansichten Positionen auf der Grundlage eines Wertes, die Höhen darstellen.

    Deine Frage hat mich dazu gebracht, mein eigenes Projekt aufzurüsten, und so habe ich es mit ViewDragHelper in einem Fragment gemacht.

     public class MainFragment extends Fragment implements View.OnTouchListener { private ImageView mDecor, mBamboo, mBackgroundBamboo; private RelativeLayout mRootLayout; private ViewDragHelper mDragHelper; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mRootLayout = (RelativeLayout) inflater.inflate(R.layout.fragment_main, container, false); mRootLayout.setOnTouchListener(this); mDecor = (ImageView) mRootLayout.findViewById(R.id.decor); mBamboo = (ImageView) mRootLayout.findViewById(R.id.bamboo); mBackgroundBamboo = (ImageView) mRootLayout.findViewById(R.id.backround_bamboo); mDragHelper = ViewDragHelper.create(mRootLayout, 1.0f, new ViewDragHelper.Callback() { private final float MAX_LEFT = -0; private final float MAX_TOP = -20; private final float MAX_RIGHT = 50; private final float MAX_BOTTOM = 10; private final float MULTIPLIER = 0.1f; private final int DECOR_ELEVATION = 3; private final int FRONT_BAMBOO_ELEVATION = 6; private final int BACKGROUND_BAMBOO_ELEVATION = 1; private float mLeft = 0; private float mTop = 0; @Override public boolean tryCaptureView(View view, int i) { return true; } @Override public int clampViewPositionVertical(View child, int top, int dy) { mTop += dy * MULTIPLIER; mTop = mTop > MAX_BOTTOM ? MAX_BOTTOM : mTop < MAX_TOP ? MAX_TOP : mTop; mDecor.setTranslationY(mTop * DECOR_ELEVATION); mBamboo.setTranslationY(mTop * FRONT_BAMBOO_ELEVATION); mBackgroundBamboo.setTranslationY(mTop * BACKGROUND_BAMBOO_ELEVATION); return 0; } @Override public int clampViewPositionHorizontal(View child, int left, int dx) { mLeft += dx * MULTIPLIER; mLeft = mLeft < MAX_LEFT ? MAX_LEFT : mLeft > MAX_RIGHT ? MAX_RIGHT : mLeft; mDecor.setTranslationX(mLeft * DECOR_ELEVATION); mBamboo.setTranslationX(mLeft * FRONT_BAMBOO_ELEVATION); mBackgroundBamboo.setTranslationX(mLeft * BACKGROUND_BAMBOO_ELEVATION); return 0; } @Override public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy){ mRootLayout.requestLayout(); } }); return mRootLayout; } @Override public boolean onTouch(View view, MotionEvent motionEvent) { mDragHelper.processTouchEvent(motionEvent); // you can still use this touch listener for buttons etc. return true; } } 
    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.