Горизонтальная прокрутка вид изображений в ViewPager

Question

Я хочу, чтобы этот горизонтальный вид прокрутки в вид пейджером для скольжения как Flipkart. Может кто-нибудь, пожалуйста, помогите мне, как это сделать. Я сделал одну кодировку, в которой я могу пронести только одно изображение. В настоящее время я использую только статические изображения. Позже я проанализирую

Answer 1

См. Это tutorial. Это поможет вам. Измените элемент HorizontalScrollView согласно вашему требованию

Answer 2

Я создал слайдер изображения, который загрузит изображение с сервера с помощью picasso. Из-за нехватки времени я отправляю полный код примера, который вы можете легко изменить на своем пути:)

post_item_viewer

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/relativeLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/white"> 

    <RelativeLayout 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/toolbar_height" 
     android:background="@color/base_color"> 

     <ImageView 
      android:id="@+id/close" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="15dp" 
      android:src="@drawable/abc_ic_clear_mtrl_alpha" /> 

     <TextView 
      android:id="@+id/username" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="20dp" 
      android:layout_toEndOf="@+id/close" 
      android:layout_toRightOf="@+id/close" 
      android:textColor="@color/white" 
      android:textSize="@dimen/heading_text" /> 
    </RelativeLayout> 


    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@+id/toolbar" 
     android:layout_marginBottom="@dimen/footer_height"></android.support.v4.view.ViewPager> 

    <RelativeLayout 
     android:id="@+id/footer" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/footer_height" 
     android:layout_alignParentBottom="true" 
     android:background="@color/black"> 

     <ImageView 
      android:id="@+id/prev" 
      android:layout_width="50dp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="30dp" 
      android:src="@drawable/ic_arrowleft" /> 

     <TextView 
      android:id="@+id/image_position" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="0 of 0" 
      android:textColor="@color/white" 
      android:textSize="@dimen/heading_text" /> 

     <ImageView 
      android:id="@+id/next" 
      android:layout_width="50dp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true" 
      android:layout_marginRight="30dp" 
      android:src="@drawable/ic_arrowright" /> 
    </RelativeLayout> 
</RelativeLayout> 

UserPostViewer

public class UserPostViewer extends DialogFragment implements View.OnClickListener { 
    private ProgressDialog progressDialog; 
    private View view; 
    private int position = 0; 
    private ImageView mNext; 
    private ImageView mPrevious; 
    private ViewPager viewPager; 
    private int COUNT_MAX = 0; 
    private final int COUNT_MIN = 0; 
    private MaterialTextViewMedium mPosView; 
    private MaterialTextViewMedium title; 

    /** 
    * Create a new instance of UserPostViewer, providing "userId" and "userName" 
    * as arguments. 
    */ 
    static UserPostViewer newInstance(String userId, String userName) { 
     UserPostViewer fragment = new UserPostViewer(); 
     Bundle args = new Bundle(); 
     args.putString("user_id", userId); 
     args.putString("user_name", userName); 
     fragment.setArguments(args); 
     return fragment; 
    } 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     int style = DialogFragment.STYLE_NO_TITLE, theme = android.R.style.Theme_Holo_Light; 
     setStyle(style, theme); 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     view = inflater.inflate(R.layout.post_item_viewer, container, false); 
     initProgressDialog(); 
     closeListener(); 
     String userId = getArguments().getString("user_id"); 
     Map<String, String> params = new HashMap<>(); 
     params.put("user_id", userId); 
     getPosts(params); 
     return view; 
    } 

    private void initProgressDialog() { 
     progressDialog = new ProgressDialog(getActivity()); 
     progressDialog.setCancelable(false); 
     progressDialog.setCanceledOnTouchOutside(false); 
    } 

    private void showProgressDialog(String message) { 
     if (!progressDialog.isShowing()) 
      progressDialog.setMessage(message); 
     progressDialog.show(); 
    } 

    private void hideProgressDialog() { 
     if (progressDialog.isShowing()) 
      progressDialog.dismiss(); 
    } 

    private void getPosts(Map<String, String> params) { 
     VolleyJsonArrayReq arrayReq = new VolleyJsonArrayReq (Constants.USER_IMAGES, new JSONObject(params), new Response.Listener<JSONArray>() { 
      @Override 
      public void onResponse(JSONArray response) { 
       try { 
        if (response != null) { 
         Gson gson = new Gson(); 
         Type collectionType = new TypeToken<Collection<GetPostItems>>() { 
         }.getType(); 
         Collection<GetPostItems> getPostItemses = gson.fromJson(response.toString(), collectionType); 
         initView(getPostItemses); 
        } 
       } catch (Exception e) { 
       } 
      } 
     }, new Response.ErrorListener() { 
      @Override 
      public void onErrorResponse(VolleyError error) { 
       hideProgressDialog(); 
       if (getActivity() != null && isAdded()) { 
        String errorString = VolleyErrorHelper.getMessage(error, getActivity()); 
        if (errorString != null) { 
         Util.showAlert(getActivity(), getResources().getString(R.string.error), errorString); 
        } 
       } 
      } 
     }); 
     showProgressDialog(getResources().getString(R.string.loading)); 
     CustomVolleyHelper.getInstance(getActivity()).addToRequestQueue(arrayReq); 
    } 

    private void initView(Collection<GetPostItems> mGetPostItemses) { 
     try { 
      if (view != null && getActivity() != null) { 
       String userName = getArguments().getString("user_name"); 
       viewPager = (ViewPager) view.findViewById(R.id.pager); 
       title = (MaterialTextViewMedium) view.findViewById(R.id.username); 
       title.setText(getResources().getString(R.string.title_support) + userName); 
       mPosView = (MaterialTextViewMedium) view.findViewById(R.id.image_position); 
       viewPager.setPageTransformer(true, new DepthPageTransformer()); 
       mNext = (ImageView) view.findViewById(R.id.next); 
       mPrevious = (ImageView) view.findViewById(R.id.prev); 
       List<GetPostGridItems> mItems = new ArrayList<>(); 
       for (GetPostItems getPostItemses : mGetPostItemses) { 
        GetPostGridItems getPostGridItems = new GetPostGridItems(); 
        getPostGridItems.setThumbnail(Constants.BASE_URL + getPostItemses.getImage_path()); 
        mItems.add(getPostGridItems); 
       } 
       COUNT_MAX = mItems.size() - 1; 
       PostPagerAdapter adapter = new PostPagerAdapter(getActivity(), mItems); 
       viewPager.setAdapter(adapter); 
       setListener(); 
       updateView(COUNT_MIN); 
      } 
      hideProgressDialog(); 
     } catch (Exception e) { 

     } 
    } 

    private void setListener() { 
     viewPager.addOnPageChangeListener(onPageChangeListener); 
     mNext.setOnClickListener(this); 
     mPrevious.setOnClickListener(this); 
    } 

    private void closeListener() { 
     ImageView closeDialog = (ImageView) view.findViewById(R.id.close); 
     closeDialog.setOnClickListener(this); 
    } 

    @Override 
    public void onClick(View view) { 
     switch (view.getId()) { 
      case R.id.next: 
       if (position != COUNT_MAX) { 
        position++; 
        swipeTo(position); 
       } 
       break; 
      case R.id.prev: 
       if (position != COUNT_MIN) { 
        position--; 
        swipeTo(position); 
       } 
       break; 
      case R.id.close: 
       dismiss(); 
       break; 

     } 
    } 

    ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { 
     @Override 
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
     } 

     @Override 
     public void onPageSelected(int currentPosition) { 
      position = currentPosition; 
      updateView(position); 
     } 

     @Override 
     public void onPageScrollStateChanged(int state) { 

     } 
    }; 

    private void swipeTo(int position) { 
     viewPager.setCurrentItem(position, true); 
     updateView(position); 
    } 


    private void updateView(int position) { 
     mPosView.setText((position + 1) + " of " + (COUNT_MAX + 1)); 
    } 


} 

PostPagerAdapter

public class PostPagerAdapter extends PagerAdapter { 
    private final int THUMB_MAX_WIDTH = 250;//720 
    private final int THUMB_MAX_HEIGHT = 250;//480 
    private int size; 
    private Context mContext; 
    private List<GetPostGridItems> mItems; 

    public PostPagerAdapter(Context context, List<GetPostGridItems> mItems) { 
     this.size = (int) Math.ceil(Math.sqrt(THUMB_MAX_WIDTH * THUMB_MAX_HEIGHT)); 
     this.mContext = context; 
     this.mItems = mItems; 
    } 

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

    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return view == ((LinearLayout) object); 
    } 

    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     LayoutInflater mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     View itemView = mLayoutInflater.inflate(R.layout.post_pager_item, container, false); 
     ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView); 
     Picasso.with(mContext) 
       .load(mItems.get(position).getThumbnail()).placeholder(R.drawable.ic_profile_thumb).resize(size, size) 
       .centerInside() 
       .into(imageView); 
     container.addView(itemView); 
     return itemView; 
    } 

    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
     container.removeView((LinearLayout) object); 
    } 
} 

post_pager_item

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:gravity="center" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/imageView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

</LinearLayout> 

GetPostGridItems

public class GetPostGridItems { 

private String mThumbnail; 

public String getThumbnail() { 
     return mThumbnail; 
    } 

    public void setThumbnail(String thumbnail) { 
     this.mThumbnail = thumbnail; 
    } 
} 

Показаны ползунок изображения DialogFragment

private void showDialog() { 
     // DialogFragment.show() will take care of adding the fragment 
     // in a transaction. We also want to remove any currently showing 
     // dialog, so make our own transaction and take care of that here. 
     FragmentManager fm = getSupportFragmentManager(); 
     FragmentTransaction transaction = fm.beginTransaction(); 
     Fragment prev = getSupportFragmentManager().findFragmentByTag("dialog"); 
     if (prev != null) { 
      transaction.remove(prev); 
     } 
     transaction.addToBackStack(null); 

     // Create and show the dialog. 
     DialogFragment newFragment = UserPostViewer.newInstance(mUserId, mUserName); 
     newFragment.show(transaction, "dialog"); 
    } 

Примечание: Найти нужный файл для анимации из ниже ссылке.

DepthPageTransformer