स्नैपचैट

Question

की तरह गहराई पेजर ट्रांसफार्मर मैं स्नैपचैट एप्लिकेशन की तरह DepthPageTransformer के साथ ViewPager को लागू करने की कोशिश कर रहा हूं। स्नैपचैट एप्लिकेशन में, एक कैमरा स्क्रीन होती है जो हमेशा ViewPager के केंद्र में आती है और बाएं या दाएं से स्वाइप करने से कैमरा स्क्रीन के शीर्ष पर अन्य टुकड़े आते हैं।

मुझे this लिंक से DepthPageTransformer के लिए कोड मिला है। लेकिन इस डेमो के साथ समस्या यह है कि यह पीछे से सभी अगले स्क्रीन दृश्य लाता है। स्नैपचैट की तरह मेरे पास केंद्र में कैमरा स्क्रीन है और बाईं ओर से 2 स्क्रीन आ रही हैं और दो स्क्रीन स्क्रीन पर दाईं ओर से ऊपर आ रही हैं।

तो, मैं PageTransformer कैसे बना सकता हूं जो मेरे केंद्र स्क्रीन के शीर्ष पर बाएं या दाएं से टुकड़े लाता है जो कैमरा है?

Answer 1

मुझे लगता है कि आप अपने FragmentPagerAdapter में 5 टुकड़े प्रदान करना चाहिए, तीसरे (सूचकांक = 2) टुकड़ा कैमरा दृश्य के साथ टुकड़ा हो जाएगा,

viewPager.setCurrentItem(2); //2 is index of camera fragment 

फिर अपने ViewPager.PageTransformer इस तरह दिखना चाहिए:

@Override 
public void transformPage(View page, float position) { 
    int pageIndex = (int) page.getTag(); //im stroing pageIndex of fragment in its tag 
    if(pageIndex == 2) { //2 is index of camera fragment 
    float currentTranslation = - position * page.getWidth(); 
    ViewCompat.setTranslationX(page, currentTranslation); 
    ViewCompat.setTranslationZ(page, -1); 
    return; 
} 

मैं pageIndex स्ट्रॉइंग कर रहा हूं जबकि खंड में इसका टैग बनाया गया है।

@Nullable 
@Override 
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
    ... 
    view.setTag(pageIndex); 
    return view; 
} 

यहाँ परिणामों के साथ gif है: भोजन के साथ https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

टुकड़ा एक आप अपने कैमरे टुकड़ा के साथ बदलना चाहिए है।

Answer 2

यह वही है जो उन्होंने किया है, अगर आपको अवधारणा को कोई टिप्पणी नहीं मिलती है।

मूल रूप से वे क्या कर रहे हैं वे एक MainActivity जो कैमरे दिखाया जा रहा है और यह नीचे में उन तीन बटन रखा है प्लस कि viewpager viewpager अपनी होल्डिंग पर तीन टुकड़े

रखा है

1.LeftFragment (टुकड़ा है है बाईं तरफ)। 2. केंद्र फ़्रेगमेंट (यह खंड पारदर्शी है, इसलिए जब यह केंद्र में आता है तो मुख्य सक्रियता सामग्री दिखाई देती है जो कैमरा है)। 3. राइटफ्रैगमेंट (दाईं तरफ फ्रैगमेंट)।

अब कोडिंग भाग आता है।

MainActivity.java।

public class MainActivity extends AppCompatActivity { 

    private ViewPager mViewPager; 

    @RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH) 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     mViewPager = (ViewPager) findViewById(R.id.view_pager); 
     mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager())); 

     mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
       //Here calculate the amount by which the pages are scrolled and animate your buttons accordingly. 
      } 

      @Override 
      public void onPageSelected(int position) { 

      } 

      @Override 
      public void onPageScrollStateChanged(int state) { 

      } 
     }); 

    } 


    class PagerAdapter extends FragmentStatePagerAdapter { 

     public PagerAdapter(FragmentManager fm) { 
      super(fm); 
     } 

     @Override 
     public Fragment getItem(int position) { 
      switch (position) { 
       case 0: 
        return new LeftFragment(); 
       case 1: 
        return new CenterFragment(); 
       case 2: 
        return new RightFragment(); 
      } 
      return null; 
     } 

     @Override 
     public int getCount() { 
      return 3; 
     } 
    } 
} 

activity_main.xml

<?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:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:openDrawer="start"> 


    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Here is your camera." 
     android:textAppearance="?android:attr/textAppearanceLarge"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 


    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:text="Button"/> 


</RelativeLayout> 

फिर टुकड़े

LeftFragment.java

public class LeftFragment extends BaseController { 
    @Override 
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
     View rootView = inflater.inflate(R.layout.fragment_sheet2, container, false); 
     return rootView; 
    } 
} 

fragment_left.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="2dp"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#FFA726" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" 
      android:fontFamily="sans-serif" 
      android:text="Left" 
      android:textColor="#fff" 
      android:textSize="30sp"/> 

    </RelativeLayout> 
</android.support.v7.widget.CardView> 

आता है

राइटफ्रैगमेंट।जावा

public class RightFragment extends BaseController { 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
     View rootView = inflater.inflate(R.layout.fragment_sheet1, container, false); 

     return rootView; 
    } 
} 

fragment_right.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="2dp"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#FFA726" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" 
      android:fontFamily="sans-serif" 
      android:text="Right" 
      android:textColor="#fff" 
      android:textSize="30sp"/> 

    </RelativeLayout> 
</android.support.v7.widget.CardView> 

मैं एनीमेशन हिस्सा जो मुझे लगता है कि आप viewpager OnPageChangeListener में गणना की छोटा सा के साथ प्राप्त कर सकते हैं छोड़ दिया है।

हैप्पी कोडिंग।