Androidを使用していますViewPager
。私がしたいことは、ページのプレビューを左右両方に表示することです。ネガpageMargin
を使用して右側のプレビューを表示できる場所を見てきました。
setPageMargin(-100);
とにかく左側のプレビューも表示できますか?基本的には、私が探しているギャラリーウィジェットに似ています。
Androidを使用していますViewPager
。私がしたいことは、ページのプレビューを左右両方に表示することです。ネガpageMargin
を使用して右側のプレビューを表示できる場所を見てきました。
setPageMargin(-100);
とにかく左側のプレビューも表示できますか?基本的には、私が探しているギャラリーウィジェットに似ています。
回答:
左右のページのプレビューを表示するには、次の2つの値を設定します
viewpager.setClipToPadding(false);
viewpager.setPadding(left,0,right,0);
ビューページャーの2つのページの間にスペースが必要な場合は、次を追加します
viewpager.setPageMargin(int);
@JijuInduchoodanの答えは完璧で、効果的です。しかし、私はAndroidに比較的慣れていないため、適切に理解して設定するのにしばらく時間がかかりました。だから、私は将来の参考のためにこの回答を投稿し、私と同じ立場にいる他の人を助けます。
if (viewPager == null)
{
// Initializing view pager
viewPager = (ViewPager) findViewById(R.id.vpLookBook);
// Disable clip to padding
viewPager.setClipToPadding(false);
// set padding manually, the more you set the padding the more you see of prev & next page
viewPager.setPadding(40, 0, 40, 0);
// sets a margin b/w individual pages to ensure that there is a gap b/w them
viewPager.setPageMargin(20);
}
ViewPager's
アダプターのページに幅を設定する必要はありません。の前のページと次のページを表示するために追加のコードは必要ありませんViewPager
。ただし、各ページの上部と下部に空白スペースを追加する場合は、次のコードをViewPager's
子ページの親レイアウトに設定できます。
android:paddingTop="20dp"
android:paddingBottom="20dp"
これがViewPagerの最終的な外観になります。
今では、使用することを検討すべきであるViewPager2 「その前身の痛みポイントのほとんどを扱う、ViewPagerを置き換える」を:
- RecyclerViewに基づく
- RTL(右から左)レイアウトのサポート
- 垂直方向のサポート
- 信頼性の高いフラグメントサポート(基になるフラグメントコレクションへの変更の処理を含む)
- データセット変更アニメーション(
DiffUtil
サポートを含む)
アクティビティ/フラグメントで、ViewPager2を設定します。
// MyRecyclerViewAdapter is an standard RecyclerView.Adapter :)
viewPager2.adapter = MyRecyclerViewAdapter()
// You need to retain one page on each side so that the next and previous items are visible
viewPager2.offscreenPageLimit = 1
// Add a PageTransformer that translates the next and previous items horizontally
// towards the center of the screen, which makes them visible
val nextItemVisiblePx = resources.getDimension(R.dimen.viewpager_next_item_visible)
val currentItemHorizontalMarginPx = resources.getDimension(R.dimen.viewpager_current_item_horizontal_margin)
val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
page.translationX = -pageTranslationX * position
// Next line scales the item's height. You can remove it if you don't want this effect
page.scaleY = 1 - (0.25f * abs(position))
// If you want a fading effect uncomment the next line:
// page.alpha = 0.25f + (1 - abs(position))
}
viewPager2.setPageTransformer(pageTransformer)
// The ItemDecoration gives the current (centered) item horizontal margin so that
// it doesn't occupy the whole screen width. Without it the items overlap
val itemDecoration = HorizontalMarginItemDecoration(
context,
R.dimen.viewpager_current_item_horizontal_margin
)
viewPager2.addItemDecoration(itemDecoration)
追加HorizontalMarginItemDecoration
些細です、ItemDecoration
:
/**
* Adds margin to the left and right sides of the RecyclerView item.
* Adapted from https://stackoverflow.com/a/27664023/4034572
* @param horizontalMarginInDp the margin resource, in dp.
*/
class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
RecyclerView.ItemDecoration() {
private val horizontalMarginInPx: Int =
context.resources.getDimension(horizontalMarginInDp).toInt()
override fun getItemOffsets(
outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
) {
outRect.right = horizontalMarginInPx
outRect.left = horizontalMarginInPx
}
}
前/次のアイテムをどれだけ表示するかを制御する寸法と、現在のアイテムの水平マージンを追加します。
<dimen name="viewpager_next_item_visible">26dp</dimen>
<dimen name="viewpager_current_item_horizontal_margin">42dp</dimen>
最後にをViewPager2
レイアウトに追加します。
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
重要なことの1つ:ViewPager2
アイテムには必ずlayout_height="match_parent"
(そうでなければ、IllegalStateExceptionがスローされます)必要があるため、次のような操作を行う必要があります。
<androidx.cardview.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" <-- this!
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="280dp">
<!-- ... -->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
GoogleはPageTransformer
、インスピレーションとして使用できる2つの実装があるViewPager2のガイドを追加しました:https : //developer.android.com/training/animation/screen-slide-2
viewpager.setPageTransformer { page, position -> page.translationX = -1 * position }
setOffscreenPageLimit(1)
:)
2017では、このような動作RecyclerView
はPagerSnapHelper(v7サポートライブラリのバージョン25.1.0で追加)を使用することで簡単に実現できます。:
いつか私はそのようなviewpagerのような機能が必要で、小さなライブラリを用意しました:
MetalRecyclerPagerView-すべてのコードとその例を見つけることができます。
主に単一のクラスファイルであるMetalRecyclerViewPager.java(および2つのxml:attrs.xmlとids.xml)で構成されています。
それが誰かを助け、数時間を節約することを願っています:)
new PagerSnapHelper().attachToRecyclerView(recyclerView)
を追加するだけで、ページスナップができます。
誰かがまだ解決策を探している場合、負のマージンを使用せずにそれを実現するようにViewPageをカスタマイズしました。サンプルプロジェクトをここで見つけますhttps://github.com/44kksharma/Android-ViewPager-Carousel-UI
ほとんどの場合に機能するはずですが、あなたはそれでもページマージンを定義できます
mPager.setPageMargin(margin in pixel);
これはxmlファイルで行うことができます。以下のコードを使用してください。
android:clipToPadding="false"
android:paddingLeft="XX"
android:paddingRight="XX"
例えば:
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingLeft="30dp"
android:paddingRight="30dp" />
注:ページ間にスペースが必要な場合は、パディング/マージンを子フラグメントに設定してください
これを別の画面で表示するのに苦労している人のために、
mPager.setClipToPadding(false);
DisplayMetrics displayMetrics = new DisplayMetrics();
self.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int paddingToSet = width/4; //set this ratio according to how much of the next and previos screen you want to show.
mPager.setPadding(paddingToSet,0,paddingToSet,0);
ビューページャーにゼロパディングを設定しない場合、ビューページャーのエッジ効果の配置がめちゃくちゃになることに注意してください。これはビューページャーのバグです。ここを参照してください:ビューページャーエッジ効果のバグ
android:overScrollMode="never"
ビューページャーに設定してエッジ効果を無効にするか、EdgeEffectクラスのわずかに変更されたバージョンでバグを修正することができます:ViewPagerEdgeEffect fix
このフラグメントアダプターとクラスを使用して、viewpagerを左右にスクロールします。スクロールして次のページを表示するために必要なクラスを追加します。
package com.rmn.viewpager;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* The <code>PagerAdapter</code> serves the fragments when paging.
* @author mwho
*/
public class PagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
/**
* @param fm
* @param fragments
*/
public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
/* (non-Javadoc)
* @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
*/
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
/* (non-Javadoc)
* @see android.support.v4.view.PagerAdapter#getCount()
*/
@Override
public int getCount() {
return this.fragments.size();
}
}
package com.manishkpr.viewpager;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class ViewPagerAdapter extends FragmentPagerAdapter {
private Context _context;
public ViewPagerAdapter(Context context, FragmentManager fm) {
super(fm);
_context=context;
}
@Override
public Fragment getItem(int position) {
Fragment f = new Fragment();
switch(position){
case 0:
f=LayoutOne.newInstance(_context);
break;
case 1:
f=LayoutTwo.newInstance(_context);
break;
}
return f;
}
@Override
public int getCount() {
return 2;
}
}
setPageMargin(-100)
、正しく仕事を?