今天寫(xiě)一個(gè)仿畫(huà)廊效果的demo, 中間正常顯示,要能看見(jiàn)兩個(gè)的item蟋恬, 縮小加透明度
那么我就想到了viewPager, 因?yàn)橹皩?xiě)過(guò)類似的項(xiàng)目翁潘,也沒(méi)有記錄, 今天就記錄下
先看圖
本來(lái)錄個(gè)屏的歼争,沒(méi)想到上傳不了MP4的拜马,湊合用吧
先看布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="100dp"
android:clipToPadding="false"
android:paddingLeft="35dp"
android:paddingRight="35dp"
android:layout_marginTop="50dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="240dp"
android:paddingLeft="35dp"
android:paddingRight="35dp"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
android:clipToPadding="false"
主要是這個(gè)渗勘,這個(gè)屬性默認(rèn)是true, 改成false是讓控件繪制padding的區(qū)域, 這樣距離兩邊的item就可以看見(jiàn)了
寫(xiě)完viewPager之后 我就在想recyclerView 能不能實(shí)現(xiàn)呢俩莽, 于是就準(zhǔn)備試一試旺坠, 果然recyclerView是無(wú)所不能的...
下面來(lái)看看代碼
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = findViewById(R.id.viewPager);
mRecyclerView = findViewById(R.id.recyclerView);
initView();
}
private void initView() {
for (int i = 0; i < 6; i++) {
mData.add("這是第" + (i + 1) + "個(gè)");
}
initPagerAdapter();
initAdapter();
}
private void initPagerAdapter() {
if (mPagerAdapter == null) {
mPagerAdapter = new ViewPagerAdapter();
// 設(shè)置頁(yè)面之間的邊距
mViewPager.setPageMargin(dp2px(12));
// 設(shè)置縮放 透明度
mViewPager.setPageTransformer(false, new CustPagerTransformer());
}
//添加數(shù)據(jù)之后在設(shè)置適配器這樣setPageTransformer會(huì)生效,否則兩邊的item沒(méi)有透明的效果
mViewPager.setAdapter(mPagerAdapter);
mPagerAdapter.addData(mData);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 滑動(dòng)之后處理邏輯
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
代碼上有注釋扮超,相信基本都能看明白了
有一點(diǎn)需要注意一下就是viewPager設(shè)置適配器 適配器添加數(shù)據(jù)取刃,在添加數(shù)據(jù)的時(shí)候需要在設(shè)置一次適配器, 否則縮放透明效果不存在出刷,或者順序會(huì)混亂
下面是viewPager縮放的類
public class CustPagerTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.8f;
private static final float MIN_ALPHA = 0.5f;
private static final float MAX_SCALE = 1.0f;
private static final float MAX_ALPHA = 1.0f;
@Override
public void transformPage(@NonNull View view, float position) {
if (position < -1) {
view.setScaleY(MIN_SCALE);
view.setAlpha(MIN_ALPHA);
} else if (position == 0) {
view.setScaleY(MAX_SCALE);
view.setAlpha(MAX_ALPHA);
} else if (position <= 1) {
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
float alphaFactor = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - Math.abs(position));
view.setScaleY(scaleFactor);
view.setAlpha(alphaFactor);
} else {
view.setScaleY(MIN_SCALE);
view.setAlpha(MIN_ALPHA);
}
}
}
還有item布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_linearLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@drawable/shape_blue_radius_10"
android:orientation="vertical">
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="這是第幾個(gè)"
android:textColor="#ffffff"
android:textSize="17dp" />
</LinearLayout>
這就是viewPager的實(shí)現(xiàn)璧疗, 下面看看RecyclerView
private void initAdapter() {
if (mAdapter == null) {
mAdapter = new RecyclerViewAdapter();
mRecyclerView.setAdapter(mAdapter);
layoutManager = new LinearLayoutManager(this);
// 設(shè)置方向
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
mRecyclerView.setLayoutManager(layoutManager);
// 讓item居中顯示
LinearSnapHelper snapHelper = new LinearSnapHelper();
// 綁定到 mRecyclerView
snapHelper.attachToRecyclerView(mRecyclerView);
}
mAdapter.addData(mData);
// 需要在添加數(shù)據(jù)時(shí) 再調(diào)用一次 不然會(huì)在滑動(dòng)時(shí)才會(huì)顯示效果
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
final float MIN_SCALE = 0.85f;
final float MIN_ALPHA = 0.5f;
final float MAX_SCALE = 1.0f;
final float MAX_ALPHA = 1.0f;
int childCount = recyclerView.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = recyclerView.getChildAt(i);
int left = child.getLeft();
int paddingStart = recyclerView.getPaddingStart();
// 遍歷recyclerView子項(xiàng),以中間項(xiàng)左側(cè)偏移量為基準(zhǔn)進(jìn)行縮放
float bl = Math.min(1, Math.abs(left - paddingStart) * 1f / child.getWidth());
float scale = MAX_SCALE - bl * (MAX_SCALE - MIN_SCALE);
float alpha = MAX_ALPHA - bl * (MAX_ALPHA - MIN_ALPHA);
child.setScaleY(scale);
child.setAlpha(alpha);
}
}
});
}
RecyclerView添加滾動(dòng)監(jiān)聽(tīng)的時(shí)候 設(shè)置數(shù)據(jù)也要在調(diào)用一次馁龟, 不然會(huì)在滑動(dòng)時(shí)才會(huì)顯示效果
設(shè)置完這些 還有一個(gè) RecyclerView沒(méi)有設(shè)置間距 可以在布局設(shè)置 也可以用方法設(shè)置 我方便就在布局設(shè)置的
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_linearLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/shape_blue_radius_10"
android:orientation="vertical">
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="這是第幾個(gè)"
android:textColor="#ffffff"
android:textSize="17dp" />
</LinearLayout>
距離左右有一點(diǎn)間距崩侠, 自己掌握
RecyclerView適配器就沒(méi)什么可說(shuō)的了,都一樣的
基本就是這些了
所以可見(jiàn)實(shí)現(xiàn)一種功能并不是只有一種方法坷檩, 其實(shí)我寫(xiě)了三種啦膜, 可能實(shí)現(xiàn)這個(gè)功能還有很多方法, 這里就先上兩個(gè)淌喻, 如果有更好的方法請(qǐng)@我
地址:https://github.com/xiaobinAndroid421726260/Android_CustomAllCollection.git