1

ViewPagerでfirebaseを使用する最も良い方法は何ですか?ViewPagerでFirebaseを実装する方法は?

予想される出力

Expected OutPut

は、どのように私はそれが位置のためfirebaseを通知し、取得し、それに応じてデータを添付することをFirebaseなどでViewPagerを使用することができますか?

Person.java

public class Person { 

    private String name; 
    private String email; 
    private String hobby; 

    public Person(){ 

    } 


    public Person(String name , String email , String hobby){ 
     this.name= name; 
     this.email = email; 
     this.hobby = hobby; 

    } 

    public void setName(String name) { 
     this.name = name; 
    } 

    public void setEmail(String email) { 
     this.email = email; 
    } 

    public void setHobby(String hobby) { 
     this.hobby = hobby; 
    } 

    public String getName() { 
     return name; 
    } 

    public String getEmail() { 
     return email; 
    } 

    public String getHobby() { 
     return hobby; 
    } 
} 

MainActivity.java

public class MainActivity extends AppCompatActivity { 

    private ViewPager viewPager; 
// private FirebaseAuth mAuth; 
    List<Person> person; 
    private Context context; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     person = new ArrayList<>(); 
//  mAuth = FirebaseAuth.getInstance(); 
     context = this; 



     viewPager = (ViewPager) findViewById(R.id.pagerView); 
     viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), person, context)); 


    } 


    class MyPagerAdapter extends FragmentPagerAdapter { 
     String[] tabsArray; 
     private List<Person> personInAdapter = new ArrayList<>(); 
     private Context context; 

//  int icons[] = {R.drawable.white_home, R.drawable.white_heart, 
//    R.drawable.white_star, R.drawable.white_heart, R.drawable.white_star}; 

     public MyPagerAdapter(FragmentManager fm, List<Person> person, Context context) { 
      super(fm); 
      personInAdapter = person; 
      this.context = context; 
      tabsArray = getResources().getStringArray(R.array.TABS); 
     } 


//  @Override 
//  public CharSequence getPageTitle(int position) { 
//   return tabsArray[position]; 
//  } 

     @Override 
     public Fragment getItem(int position) { 

      return MyFragment.getInstance(position); 
     } 

     @Override 
     public int getCount() { 
      return personInAdapter.size(); 
     } 
    } 
} 

MyFragment.java

public class MyFragment extends Fragment { 
    private TextView upperText; 
    private TextView lowerText; 
    List<Person> personInAdapter = new ArrayList<>(); 
    private Context context; 
    private DatabaseReference databaseReference; 
    public static MyFragment getInstance(int position) { 
     MyFragment myFragment = new MyFragment(); 
     Bundle args = new Bundle(); 
     args.putInt("position", position); 
     myFragment.setArguments(args); 

     return myFragment; 
    } 


    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     View view = inflater.inflate(R.layout.fragment_my, container, false); 
     upperText = (TextView) view.findViewById(R.id.myFragmentUpperText); 
     lowerText = (TextView) view.findViewById(R.id.myFragmentLowerText); 
     databaseReference = FirebaseUtil.getBaseRef().child("Person"); 
     int i = getArguments().getInt("position"); 
     ValueEventListener postListener = new ValueEventListener() { 
      @Override 
      public void onDataChange(DataSnapshot dataSnapshot) { 
      // Get Post object and use the values to update the UI 
      for (DataSnapshot personSnapshot: dataSnapshot.getChildren()) { 
       Person person = personSnapshot.getValue(Person.class); 
       upperText.setText(person.getName()); 
       lowerText.setText(person.getEmail()); 
       Log.i("Data In Person ", person.toString()); 
      } 

      // [END_EXCLUDE] 
     } 

      @Override 
      public void onCancelled(DatabaseError databaseError) { 
       // Getting Post failed, log a message 
       // [START_EXCLUDE] 

      } 
     }; 
     databaseReference.addValueEventListener(postListener); 
//  Bundle bundle = getArguments(); 
//  if (bundle != null) { 
//   textView.setText("The value is" +i); 
//  } 

     return view; 
    } 


    @Override 
    public void onActivityCreated(@Nullable Bundle savedInstanceState) { 
     super.onActivityCreated(savedInstanceState); 

    } 
} 

IはFirebaseRecyclerViewとfirebase試み、SAMを実装していますLinearSnapHelperHorizontal RecyclerView:カスタムでeはRecyclerviewと、それは私がViewPagerに非常によく似たものにFirebaseから取得したデータを使用することができたSOおよび様々な他のブログにハード汗を流した後

FirebaseRecyclerAdapter<Blog, BlogViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Blog, BlogViewHolder>(
       Blog.class, 
       R.layout.blog_row, 
       BlogViewHolder.class, 
       mDatabaseReference 
     ) { 
      @Override 
      protected void populateViewHolder(BlogViewHolder viewHolder, Blog model, int position) { 
       viewHolder.setDesc(model.getDesc()); 
       viewHolder.setTitle(model.getTitle()); 
       viewHolder.setImage(getApplicationContext(), model.getImageUrl()); 
       mGoogleNow.progressiveStop(); 
       mGoogleNow.setVisibility(View.GONE); 
      } 
     }; 
     mBlogList.setAdapter(firebaseRecyclerAdapter); 
    } 
    public void LogoutFromFirebase(View view) { 
     mAuth.signOut(); 
    } 
    public static class BlogViewHolder extends RecyclerView.ViewHolder { 
     NetworkImageView networkImageView; 
     ImageLoader imageLoader; 
     View mView; 
     public BlogViewHolder(View itemView) { 
      super(itemView); 
      mView = itemView; 
     } 
     public void setTitle(String title) { 
      TextView sTitle = (TextView) mView.findViewById(R.id.TitleTextView); 
      sTitle.setText(title); 
     } 
     public void setDesc(String desc) { 
      TextView sDesc = (TextView) mView.findViewById(R.id.descriptionTextView); 
      sDesc.setText(desc); 
     } 
     public void setImage(Context context, String image) { 
      networkImageView = (NetworkImageView) mView.findViewById(R.id.imageBlogPost); 
      imageLoader = CustomVolleyRequest.getInstance(context) 
        .getImageLoader(); 
      imageLoader.get(image, ImageLoader.getImageListener(networkImageView, 
        R.drawable.crop_image_menu_crop, android.R.drawable 
          .ic_dialog_alert)); 
      networkImageView.setImageUrl(image, imageLoader); 
      // Picasso.with(context).load(image).into(networkImageView); 
     } 
    } 
+1

は、あなただけのリサイクルでfirebaseリサイクルアダプタ+水平linearlayoutmanagerを使用できませんでしたか?あなたの意見は画面全体を占めることができますが、これはあなたが望むものを達成するはずです –

+0

はい、私はそれを考慮しましたが、リサイクラーアダプター+ horizo​​ntal linearoutoutmanagerの問題は、外部ライブラリを使用せずにスワイプを一度に単一要素に制限できないことです。 – AndroidBeginner

+0

「一度に1つの要素にスワイプを制限する」という意味を明確にすることができます –

答えて

5

最後に魔法のように働きました。 findTargetSnapPositionを無効にする必要があります。私はでRecyclerView

blog_row.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 

    xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_margin="15dp" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:orientation="vertical"> 

      <com.android.volley.toolbox.NetworkImageView 
       android:id="@+id/imageBlogPost" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       android:paddingBottom="15dp" 
       android:src="@drawable/common_google_signin_btn_text_light_normal" /> 

      <TextView 
       android:id="@+id/TitleTextView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="20dp" 

       android:text="Post Title Here" 
       android:textSize="16sp" /> 

      <TextView 
       android:id="@+id/descriptionTextView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Post Description Here" 
       android:paddingBottom="15dp" 
       android:textSize="14sp" /> 
     </LinearLayout> 

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

CardView使用していた私の場合は

まず、あなたの活動にRecyclerViewを追加/フラグメント

<android.support.v7.widget.RecyclerView 
     android:layout_below="@+id/sign_in_button" 
     android:layout_width="match_parent" 
     android:orientation="horizontal" 
     android:id="@+id/blog_list" 
     android:layout_height="match_parent"> 
    </android.support.v7.widget.RecyclerView> 

あなたのアクティビティーTY /フラグメント

private RecyclerView mBlogList; 




LinearLayoutManager layoutManager 
        = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); 
      mBlogList = (RecyclerView) findViewById(R.id.blog_list); 

      mBlogList.setHasFixedSize(true); 
      mBlogList.setLayoutManager(layoutManager); 

LinearSnapHelper snapHelper = new LinearSnapHelper() { 
      @Override 
      public int findTargetSnapPosition(RecyclerView.LayoutManager lm, int velocityX, int velocityY) { 
       View centerView = findSnapView(lm); 
       if (centerView == null) 
        return RecyclerView.NO_POSITION; 

       int position = lm.getPosition(centerView); 
       int targetPosition = -1; 
       if (lm.canScrollHorizontally()) { 
        if (velocityX < 0) { 
         targetPosition = position - 1; 
        } else { 
         targetPosition = position + 1; 
        } 
       } 

       if (lm.canScrollVertically()) { 
        if (velocityY < 0) { 
         targetPosition = position - 1; 
        } else { 
         targetPosition = position + 1; 
        } 
       } 

       final int firstItem = 0; 
       final int lastItem = lm.getItemCount() - 1; 
       targetPosition = Math.min(lastItem, Math.max(targetPosition, firstItem)); 
       return targetPosition; 
      } 
     }; 
     snapHelper.attachToRecyclerView(mBlogList); 

最後のステップは、我々はこのようにViewPager効果を得ることができ、これを使用してRecyclerView

mBlogList.setAdapter(firebaseRecyclerAdapter); 

にアダプタを設定することです。

RecyclerView ViewPager

Image Source

関連する問題